Gallery

Displays images for the Gallery field type (e.g. ACF Gallery fieldarrow-up-right).

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.

circle-exclamation

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

Example of the Grid, taken from our ACF Gallery articlearrow-up-right.

The CSS grid featurearrow-up-right 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 of columns in the grid-template-columnsarrow-up-right rule, and adjust the gaparrow-up-right, which controls the space between items, from 20px to your preferred value:

Twig template:

CSS code:

Masonry Layout (Pro)

From the Gallery layout dropdown, select the Classic or Flat masonry option and press the Update button.

The Classic masonry employs the Macy.jsarrow-up-right, while Flat uses a Flat Masonry scriptarrow-up-right from Lightsource.

circle-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.

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

Macy.js

Example of the Macy.js, taken from our ACF Gallery articlearrow-up-right.

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 documentationarrow-up-right to learn more.

Flat Layout

Example of the Flat masonry, taken from our ACF Gallery articlearrow-up-right.

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

Example of the Inlline-Carousel, taken from our ACF Gallery articlearrow-up-right.

From the Gallery layout dropdown, select the Inline-Gallery option and press the Update button.

circle-info

The Inline-Gallery option employs the Carousel featurearrow-up-right of the LightGallery libraryarrow-up-right.

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

Images slider (Pro)

Example of the images slider, taken from our ACF Gallery articlearrow-up-right.

From the Enable slider dropdown, select the Splide option and press Update. This option employs the Splide libraryarrow-up-right, with the following defaults:

Example of the lightbox, taken from our ACF Gallery articlearrow-up-right.

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.

circle-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.

From the Enable lightbox dropdown, select the LightGallery or Simple (no settings) option and press Update. The LightGallery option employs the LightGallery libraryarrow-up-right, and has the following defaults:

FAQs

chevron-rightMasonry last image stretchinghashtag

How to fix it using CSS overrides

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

Last updated