Updated on 19 Apr 2024
This Pro tutorial provides the steps to load and initialize lightGallery on the images coming from a Gallery type of ACF field or an Image Advanced type of Meta Box field and being output using a Posts → Media Bricks query loop for a dynamic thumbnail gallery with support for thumbnails and captions inside the lightbox.
Note: The video was recorded before making a settings change to load the images in the correct order.
Step 1
Create a field group for your desired post type having a 'Gallery' type of field with ACF or an 'Image Advanced' type of field with Meta Box.
Meta Box screenshots:
Step 2
Edit your posts and upload/select images for your field.
Step 3
Edit your Page/template with Bricks and add a Section.
Inside the Section's Container, add a Container.
Change its HTML tag to ul.
Display: grid
Gap: 1em
Grid template columns: repeat(3, minmax(0, 1fr))
In the STYLE tab, go to CSS control group and add this class: lightgallery
Add a Block inside having a HTML tag of li and set Display to block.
Enable query loop.
Post type: Media
