> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/image-gallery.md).

# Image gallery

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Gallery column</mark>](/unicorn-shopify-theme/dynamic-theme-sections/image-gallery/gallery-column.md)" blocks.\
**Tip:** Press **"Add block"** to use the "Gallery column" block. Each block can be added individually and customized in different ways.
{% endhint %}

### Content

**Images per row**\
Set the number of images displayed per row: 2 or 4.\ <mark style="color:orange;">**Note!**</mark> Works only for large screens. By default, the theme displays one item per row on mobile.

**Image ratio**\
Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:

* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*.

  \*The "Proportion" option is applied to mobile by default.

**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

* **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 1000 pixels.

**Column alignment**\
Decide whether to display the text content on the "Left" or "Center".

**Heading / Text**\
Use the color pickers to set up the text colors.

### Layout options <a href="#layout-options" id="layout-options"></a>

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use swipe on mobile**\
Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/6sX0jK9l4x82eY1uhLKj" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/5ub14hGniiiTMV5sK0vD" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}