> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/bild-galerie.md).

# Image - Gallery

The image gallery element is a visually appealing way to present multiple images in a gallery format, enhanced by an interactive **Lightbox function**. Users can enlarge and focus on the images in the gallery by clicking on them and switch between them.

This element is ideal for showcasing products, projects, portfolios, or events attractively.

<figure><img src="/files/GWrQHdjj0ZAs7OB3RxAN" alt=""><figcaption></figcaption></figure>

### Image Gallery Settings

<figure><img src="/files/4oUxR49MSQ2opLARnInB" alt=""><figcaption></figcaption></figure>

### General Settings

<figure><img src="/files/X7G4eI2F2rD8YKcOaAhJ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Spacing between images (1)</td><td>The empty space between the images can be determined here.</td></tr><tr><td>Fixed height of images (2)</td><td>Images vary greatly in format. This function sets the image crop to create a uniform layout.</td></tr><tr><td>Select layout (3)</td><td>Grid = Images arranged in a grid<br>Slider = Images displayed as a slider<br>Masonry = Irregular grid with variance</td></tr></tbody></table>

### Lightbox Settings

<figure><img src="/files/zWB3UgHsvSgyaLm1BQnQ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="271">Function</th><th>Description</th></tr></thead><tbody><tr><td>Show image title (1)</td><td>The title assigned to the image in the Shopware media library will be displayed here.</td></tr><tr><td>Enable arrow navigation (2)</td><td>If disabled, navigation can still be done via swipe.</td></tr><tr><td>Image numbering (3)</td><td>This numbers the images, so it's always clear how many images are left to see.</td></tr><tr><td>Share images (4)</td><td>Allow customers to share the images on social networks.</td></tr><tr><td>Loading animation (5)</td><td>During the loading process of the lightbox, an animation is executed. You have various options here.</td></tr><tr><td>Loading animation color (6)</td><td>The color of the animation elements.</td></tr><tr><td>Overlay background color (7)</td><td>The lightbox darkens the surrounding area. Here you can choose the color.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/bild-galerie.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.