# Gallery

Displays images for the Gallery field type (e.g. [ACF Gallery field](https://wplake.org/blog/display-acf-gallery-field-with-shortcode/)).

In Advanced Views, if you add a Gallery field to your *Layout* it will display the list of images in the default layout. In **Pro** you’ll be able to change the Gallery Layout to Masonry plus the option to enable the Lightbox with slider options.  

{% hint style="warning" %}
Note: For the Masonry Gallery Layout to work you’d need to ensure that the Return Format is set to **Image Array** or **Image ID**. Choosing the **Image URL** doesn’t provide the necessary image dimensions.
{% endhint %}

## How to use it

**Edit** or **add** a new *Layout*.

**Select** the **Group** containing the gallery field.

Select the **Gallery** field from the **Field** dropdown, and select the **Image Size**.

## Grid Layout

<figure><img src="/files/BuB9A7YT9LWo7j4VEVty" alt=""><figcaption><p>Example of the Grid, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

The [CSS grid feature](https://www.w3schools.com/CSS/css_grid.asp) is the easiest way to display Gallery images in a grid.

The example code below shows how to set this up. Change `'2'` to your desired number[^1] of columns in the [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) rule, and adjust the [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap), which controls the space between items, from `20px` to your preferred value:

Twig template:

```twig
{% if gallery.value %}
    <div class='acf-view__gallery'>
        {% for image_item in gallery.value %}
            <img class='acf-view__image' src="{{ image_item.value }}"
                 width="{{ image_item.width }}" height="{{ image_item.height }}" alt="{{ image_item.alt }}"
                 decoding="{{ image_item.decoding }}" loading="{{ image_item.loading }}"
                 srcset="{{ image_item.srcset }}" sizes="{{ image_item.sizes }}">
        {% endfor %}
    </div>
{% endif %}
```

CSS code:

```css
#view__gallery {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
 #view__gallery {
  grid-template-columns: repeat(2, 1fr);
 }
}
```

## Masonry Layout (Pro)

From the **Gallery layout** dropdown, **select** the Classic or Flat masonry option and press the Update button.&#x20;

The Classic masonry employs the [Macy.js](https://github.com/bigbite/macy.js), while Flat uses a [Flat Masonry script](https://gitlab.com/lightsource/masonry) from Lightsource.&#x20;

{% hint style="info" %}
**Pro tip:** You can apply both Masonry and Lightbox to the same gallery field simultaneously to provide a visually appealing preview and allow for a detailed display on click.
{% endhint %}

Optional: After saving, switch to the CSS & JS tab, and fine-tune the instance settings:

### Macy.js

<figure><img src="/files/rT87anaIAGz6VMomuvJF" alt=""><figcaption><p>Example of the Macy.js, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

In the Masonry instance settings, you can fine-tune the number of columns, the gap between items (margin), and the responsive behavior. Check the [Macy.js documentation](https://github.com/bigbite/macy.js) to learn more.

```javascript
var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://github.com/bigbite/macy.js */
	new Macy({
		container: gallery,
		columns: 4,
		margin: {
			x: 0,
			y: 0,
		},
		breakAt: {
			992: 2,
			400: 1,
		},
	});
}
```

### Flat Layout

<figure><img src="/files/87EkiOeVJiQIQMG3o66M" alt=""><figcaption><p>Example of the Flat masonry, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

The flat masonry is a simple script, which offers only the basic settings, including gap between items and min-row height:

```javascript
var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://gitlab.com/lightsource/masonry */
	new AcfViewsMasonry(
		gallery,
		{
			ROW_MIN_HEIGHT: 180,
			GUTTER: 20,
			MOBILE_GUTTER: 10,
			MOBILE_WIDTH: 992,
		}
	);
}
```

## Inline-carousel Layout (Pro)

<figure><img src="/files/RyyhtHbTbsIDqeEj66Bf" alt=""><figcaption><p>Example of the Inlline-Carousel, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

From the **Gallery layout** dropdown, **select** the Inline-Gallery option and press the Update button.&#x20;

{% hint style="info" %}
The Inline-Gallery option employs the [Carousel feature](https://www.lightgalleryjs.com/demos/carousel-gallery/) of the [LightGallery library](https://www.lightgalleryjs.com/).&#x20;
{% endhint %}

Optional: After saving, switch to the CSS & JS tab, and fine-tune the instance settings:

```javascript
var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	var container = document.createElement('div');
	container.classList.add('acf-view__inline-gallery');
	gallery.parentElement.insertBefore(container, gallery);

	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(gallery, {
		container: container,
		showMaximizeIcon: true,
		download: true,
		enableDrag: false,
		allowMediaOverlap: false,
		closable: false,
		plugins: [window.lgThumbnail,],
	}).openGallery();
}
```

## Images slider (Pro)

<figure><img src="/files/oFW3sHIhq9ColFkY1Cwe" alt=""><figcaption><p>Example of the images slider, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

From the **Enable slider** dropdown, **select** the Splide option and press Update. This option employs the [Splide library](https://splidejs.com/), with the following defaults:

```javascript
var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://splidejs.com/guides/options/ */
	new Splide(gallery, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}
```

## Lightbox (Pro)

<figure><img src="/files/agAKr34Gz45wINUqxHMP" alt=""><figcaption><p>Example of the lightbox, taken from our <a href="https://wplake.org/blog/display-acf-gallery-field-with-shortcode/">ACF Gallery article</a>.</p></figcaption></figure>

Lightbox shows a zoom icon on image hover and allows readers to click and open an image in full-screen mode and switch between items if there are others.

{% hint style="info" %}
**Pro tip:** You can apply both Masonry and Lightbox to the same gallery field simultaneously to provide a visually appealing preview and allow for a detailed display on click.
{% endhint %}

From the **Enable lightbox** dropdown, **select** the LightGallery or Simple (no settings) option and press Update. The LightGallery option employs the [LightGallery library](https://www.lightgalleryjs.com/), and has the following defaults:

```javascript
var gallery = this.querySelector('.acf-view__gallery');
if (gallery) {
	/* https://www.lightgalleryjs.com/docs/settings/#lightgallery-core */
	new lightGallery(gallery, {
		closeOnTap: true,
		counter: true,
		download: false,
		allowMediaOverlap: false,
		enableDrag: false,
		plugins: [window.lgThumbnail,],
	});
}
```

## FAQs

<details>

<summary>Masonry last image stretching</summary>

### How to fix it using CSS overrides

Copy the following CSS snippet into your *Layouts*' -> CSS & JS Tab -> CSS Code field.

```css
// masonry images last image fix stretching
#view .acf-view__image-outer {
    width: fit-content !important;
}
```

</details>

[^1]:


---

# Agent Instructions: 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:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/content-fields/gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.