Dynamic Galleries with Thumbnails and Captions in Lightbox using lightGallery in Bricks

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

Order by: Post include order

Add an attribute called data-src set to

Add an attribute called data-sub-html set to

.bricks-image-caption

Add an Image element inside.

Set its source to

{post_id}

Step 4

Let’s load and initialize lightGallery.

Click on the gear icon (Settings) → PAGE SETTINGS → CUSTOM CODE.

Header scripts:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/lightgallery@2.7.2/css/lightgallery-bundle.min.css" />

Body (footer) scripts:

<!-- Load LightGallery JavaScript -->
<script src="https://unpkg.com/lightgallery@2.7.2/lightgallery.min.js"></script>

<!-- Load LightGallery Thumbnail Plugin JavaScript -->
<script src="https://unpkg.com/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>

<!-- Load LightGallery Fullscreen Plugin JavaScript -->
<script src="https://unpkg.com/lightgallery@2.7.2/plugins/fullscreen/lg-fullscreen.min.js"></script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    lightGallery(document.querySelector('.lightgallery'), {
        plugins: [lgThumbnail, lgFullscreen],
        // licenseKey: 'your_license_key',
        speed: 500,
        hideBarsDelay: 1000,
        download: false,
        subHtmlSelectorRelative: true
    });
});
</script>

If you have multiple galleries per page, replace

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    lightGallery(document.querySelector('.lightgallery'), {
        plugins: [lgThumbnail, lgFullscreen],
        // licenseKey: 'your_license_key',
        speed: 500,
        hideBarsDelay: 1000,
        download: false,
        subHtmlSelectorRelative: true
    });
});
</script>

with

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    const lightGalleryElements = document.querySelectorAll('.lightgallery');

    lightGalleryElements.forEach(function(element) {
        lightGallery(element, {
            plugins: [lgThumbnail, lgFullscreen],
            //licenseKey: 'your_license_key',
            speed: 500,
            hideBarsDelay: 1000,
            download: false,
            subHtmlSelectorRelative: true
        });
    });
});
</script>

Step 5

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

ACF

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ): array {
	// check if ACF is active
	if ( ! class_exists( 'acf' ) ) {
		return $query_vars;
	}
	
	if ( $element_id === 'mckvle' ) {	
		$query_vars['post__in'] = BricksIntegrationsDynamic_DataProviders::render_tag( '{acf_page_gallery}', get_the_ID(), 'image' );
	}

	return $query_vars;
}, 10, 3 );

Replace mckvle with the Bricks ID of the query loop element.

Replace page_gallery with the name of your field.

Meta Box

<?php 

// Avoid Undefined Function Error when Meta Box is not active.
if ( ! function_exists( 'rwmb_meta' ) ) {
	function rwmb_meta( $key, $args = '', $post_id = null ) {
		return [];
	}
}

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id == 'mckvle' ) {
            $query_vars['post__in'] = BricksIntegrationsDynamic_DataProviders::render_tag( '{mb_page_page_gallery}', get_the_ID(), 'image' );
	}

	return $query_vars;
}, 10, 3 );

Replace mckvle with the Bricks ID of the query loop element.

Replace mb_page_page_gallery with the dynamic tag that represents your field.

This can be obtained by temporarily adding an Image Gallery element, clicking the lightning dynamic icon, and selecting your field. You can delete this element after copying/noting the dynamic tag.

Step 6

Whitelist wp_get_attachment_image_url function.

See Whitelisting echo functions in Bricks 1.9.7 and above.