Gallery
Displays images for the Gallery field type (e.g. ACF Gallery field).
In the Lite version, if you add a Gallery field to your View it will display the list of images in the default layout. In the Pro version you’ll be able to change the Gallery Layout to Masonry plus the option to enable the Lightbox with slider options.
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.
How to use it
Edit or add a new View.
Select the Group containing the gallery field.
Select the Gallery field from the Field dropdown, and select the Image Size.

Grid Layout

The CSS grid feature is the simplest way to display Gallery items as a grid.
The example code below shows how to set this up. Change '2'
to your desired of columns in the grid-template-columns rule, and adjust the gap, 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.js, while Flat uses a Flat Masonry script from Lightsource.
After saving, switch to the CSS & JS tab, and optionally fine-tune the instance settings:
Macy.js

In the Masonry instance settings, you can fine-tune the number of columns, the gap between items (margin), and the responsive behaviour. Check the Macy.js documentation to learn more.
Flat Layout

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

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

After saving, switch to the CSS & JS tab, and optionally fine-tune the instance settings:
Images slider (Pro)

From the Enable slider dropdown, select the Splide option and press the Update button. This option employs the Splide library, and have the following defaults:
Lightbox (Pro)

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.
From the Enable lightbox dropdown, select the LightGallery or Simple (no settings) option and press the Update button. The LightGallery option employs the LightGallery library, and have the following defaults:
FAQs
Last updated
Was this helpful?