# 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fy5IVOSPqiJfiDqiTgcDC%2Fimage.png?alt=media&#x26;token=1740cae3-5945-4845-98da-b462416698fb" 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FVbYXDpEY5wsj7yNyPhsd%2Fimage.png?alt=media&#x26;token=cd3873ff-1de1-416f-8918-5263a22f58a5" 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FiyH2GHuEJwEftdA13ABK%2Fimage.png?alt=media&#x26;token=e0975042-fd07-49cc-9efc-c644927e55f2" 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FjXrfAaU9nVPKaD31rjZI%2Fimage.png?alt=media&#x26;token=6b68eb08-d643-40b0-8805-2436b303597e" 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FsSW91qE23BmLK0ePhmq1%2Fimage.png?alt=media&#x26;token=7ff5efc4-25a0-4f4a-9056-7ed5753176cc" 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="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fwb0umj9CgMjWstzH0GVJ%2Fimage.png?alt=media&#x26;token=c31778e8-da11-4bf3-aaff-e50941b4f0cd" 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]: