# Image gallery (Grid)

{% hint style="info" %}
**Note**: This element and this article are work in progress.
{% endhint %}

The **ThemeWare® "Image gallery (Grid)"** is a variant of the "Image gallery" from Shopware. In this element, the product images are displayed in a grid or one below the other (as a scroller).

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FCfCte0sdAkHAemrT7rZF%2Fimage.png?alt=media&#x26;token=c3b0e008-0ee2-46e8-ba49-0fa69ad99421" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)"</p></figcaption></figure>

{% hint style="success" %}
**Beta**: Please note that this element is in a testing phase, feel free to test it.
{% endhint %}

{% hint style="info" %}
**Note**: This CMS element has no individual CMS block. Simply replace a "Image gallery" element in an existing CMS block.
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add element (replacing the "Image gallery" element)

You can use the ThemeWare® "Image gallery (Grid)" by replacing an existing "Image gallery":

1. Move the mouse over the CMS block (1)
2. Click on the ![](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FmJletu5KccxmhgyvuZUv%2Ficon-repeat.png?alt=media\&token=af944903-299f-43a7-a5cd-92e635d8669b) "Replace" icon (2)
3. The pop-up "Select element" opens
4. Select the desired CMS element (3)

<div><figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F8Bnik9CjtGgEWeSPm4Mw%2Fimage.png?alt=media&#x26;token=dff98434-a4a2-45a6-a46c-8b867b1f5b75" alt=""><figcaption></figcaption></figure> <figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FyiUBALshhVr8AU2m47GJ%2Fcms-extensions--replace-galery-grid.png?alt=media&#x26;token=a27ad4c9-a95a-461a-8cec-e8fb19a8c173" alt="" width="521"><figcaption></figcaption></figure></div>

***

## Configure element

You can configure the ThemeWare® "Image gallery (Grid)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F2PucLINZ7mAqvu1W2yKk%2Ficon-cog.png?alt=media\&token=56e34152-66e8-4707-8c19-3621b8f2448e) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FpFqtxyxBRnPrS9uJxcXq%2Fimage.png?alt=media&#x26;token=bb1473ce-c43a-47bc-891c-74cf3a202657" alt=""><figcaption><p>Configuring the ThemeWare® "Image gallery (Grid)"</p></figcaption></figure>

***

## Configuration

The configuration of the "Image gallery (Grid)" is fairly self-explanatory. The **gallery images** are a mandatory field. Strictly speaking, you do not need to configure anything else.

### General

In the "General" tab you configure the images and the display of the gallery.

> **Gallery**
>
> In the "Gallery" section you select the **images** to be displayed in the gallery. This is a mandatory field. You can also configure the **display mode**, the **minimum height** (default: `430px`, for the mobile gallery slider), the **minimum height (>=992px)** (for the grid from desktop) and the **vertical alignment**.

### Layout

In the "Layout" tab you configure the grid layout and the gallery navigation.

> **General**
>
> In the "General" section you can select the **layout type**. Three layouts are available: "Images stacked", "Images stacked (1x 100%, rest 50%)" and "Images stacked (all 50%)".
>
> **Gallery slider**
>
> In the "Gallery slider" section you can configure the **arrow navigation**, the **dot navigation** and the **preview navigation** of the mobile gallery slider.
>
> **Gallery grid (>=992px)**
>
> In the "Gallery grid" section you can show or hide the **preview navigation** of the gallery grid (from desktop). You can also activate the **fullscreen gallery**.

***

## Examples

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FCfCte0sdAkHAemrT7rZF%2Fimage.png?alt=media&#x26;token=c3b0e008-0ee2-46e8-ba49-0fa69ad99421" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)"</p></figcaption></figure>

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2FKIfsM4PfIvAoj1FqL7z8%2Fimage.png?alt=media&#x26;token=68a6f601-24c6-4c8c-ab28-d0b850f6d187" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)" (as a gallery scroller)</p></figcaption></figure>