---
title: Displaying image galleries
related:
- https://docs.kentico.com/k8/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
You can display images on a page using one of the image gallery [web parts](https://docs.kentico.com/k8/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md). The image gallery web parts display images saved in the content tree as documents (CMS.File document type). Kentico comes with three web parts and four page templates suitable for creating image galleries.
Image galleries aren't the only way to display images on your web pages. You can achieve similar functionality by using the [Media](https://docs.kentico.com/k8/managing-website-content/working-with-files/media-library-files.md) application. The Media application provides an alternative way of creating a gallery and is suitable for large numbers of stored images, or for making audio, video and other file types accessible from your pages. Another option consists of [attaching](https://docs.kentico.com/k8/managing-website-content/working-with-files/document-attachments/attaching-files-to-documents.md) an image to a document using the [Attachment image gallery](https://docs.kentico.com/k8/managing-website-content/working-with-files/document-attachments/attaching-files-to-documents.md)web part.
> **Note:** Images used in galleries are [imported](https://docs.kentico.com/k8/configuring-kentico/managing-files/importing-files.md) the same way as any other files, i.e. you can import files or even the whole folder structure from the disk to the Kentico content repository.
## Creating an image gallery
1. In the **Pages** application, upload the images to the content tree. You can [import multiple images](https://docs.kentico.com/k8/configuring-kentico/managing-files/importing-files.md) at once. This doesn't have to be the first step, but having some images already in place can help you with the next steps.
2. [Place](https://docs.kentico.com/k8/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md#adding-web-parts) one of the available web parts on an existing page. The web available web parts that you can use for creating image galleries are:
- **Lightbox gallery web part** - displays a set of expandable picture thumbnails.
- **Image gallery web part** - displays a set of expandable picture thumbnails.—OR—
3. Create an image gallery page using one of the templates:
- **Lightbox gallery template** - uses the **Lightbox gallery web part** displays set of expandable picture thumbnails.
- **Image gallery template** - uses the **Image gallery web part** to display a set of expandable picture thumbnails.
4. Configure how images are displayed by configuring the web part's [transformations](https://docs.kentico.com/k8/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md).
## Image gallery web parts transformation examples
Transformations define how images are displayed in all the **Image gallery** web parts. You can view and alter transformations in the **Transformations** section of a web part's property configuration dialog. For each transformation property, you can **Select** a predefined transformation from a list, **Edit** the current transformation or create a **New** one by means of the respective buttons.
Here are some examples of how you can alter the appearance of the **Image gallery** web part. This is the default thumbnail transformation code of the **Image gallery** web part:
```xml
">
<%#IfEmpty(Eval("FileAttachment"), "no image", "![" + Eval("FileName") + "](" + GetFileUrl("FileAttachment") + "?maxsidesize=300)
")%>
```
And this is how the gallery created with this transformation looks like:
You can add a border by adding encapsulating the transformation in a _div_ element (with _style_ property or via a _class)._
```xml
```
This is how the result looks like:
This example shows how you can display the file name and the date and time of creation for each thumbnail in the gallery:
```csharp
">
<%#IfEmpty(Eval("FileAttachment"), "no image", "")%>
<%# Eval("DocumentName") %>
<%# GetDateTime("DocumentCreatedWhen") %>
```
> **Note:** **Transformations for the Lightbox gallery web part**
>
> When writing a custom transformation for the **Lightbox gallery** web part, it is necessary to use the 'rel' and 'rev' parameters. The value of the 'rel' attribute needs to be in the _lightbox\[group]_ format, where _group_ specifies the name of a group of pictures to be displayed by the web part.
>
> The 'title' parameter is used to determine the description of the image displayed in the lightbox.
>
> ```xml
>
> " title="<%# Eval("FileDescription", true) %>">
> 
?maxsidesize=150" alt="<%# Eval("FileName", true) %>" />
>
>
> ```