Gallery
Last updated
Was this helpful?
Last updated
Was this helpful?
Displays images for the Gallery field type (e.g. ).
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.
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.
Twig template:
CSS code:
From the Gallery layout dropdown, select the Classic or Flat masonry option and press the Update button.
After saving, switch to the CSS & JS tab, and optionally fine-tune the instance settings:
The flat masonry is a simple script, which offers only the basic settings, including gap between items and min-row height:
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:
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.
The 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 rule, and adjust the , which controls the space between items, from 20px
to your preferred value:
The Classic masonry employs the , while Flat uses a from Lightsource.
In the Masonry instance settings, you can fine-tune the number of columns, the gap between items (margin), and the responsive behaviour. Check the to learn more.
The Inline-Gallery option employs the of the .
From the Enable slider dropdown, select the Splide option and press the Update button. This option employs the , and have the following defaults:
From the Enable lightbox dropdown, select the LightGallery or Simple (no settings) option and press the Update button. The LightGallery option employs the , and have the following defaults: