Meta Box Image Advanced Galleries using lightGallery in Bricks

This Pro tutorial answers the question posted in the comments section of our previous Dynamic Galleries with Thumbnails and Captions in Lightbox using lightGallery in Bricks tutorial wherein the images to be shown in custom galleries using lightGallery are the ones in an Image Advanced-type of sub field inside a Group-type Meta Box field.

Each row of the Group field are to be shown as an accordion item for which we shall use BricksExtras‘ Pro Accordion element.

The benefit of using lightGallery over the built-in Gallery element of Bricks is that it gives us complete control with advanced features like captions inside the lightbox. When custom galleries are needed, this is the library to use.

Let’s take an example where we have a tour Custom Post Type.

Tour Fields:

A specific Tour post being edited in the WP post editor:

After implementing the tutorial, on the front end:

After an image is clicked:

We shall ensure that the for each row of the Group field, gallery parent element is rendered only if the Image Advanced sub field is not empty.

Step 1

Install and activate BricksExtras.

Enable Pro Accordion module in its settings.

Step 2

Let’s create a custom function that returns true or false depending on whether the Image Advanced sub field is populated or not.

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

<?php

function bl_has_valid_photo_gallery(): bool {
    return ! empty( BricksQuery::get_loop_object()['photo_gallery'] ?? null );
}

Replace photo_gallery with the ID of your Image Advanced sub field.

BricksQuery::get_loop_object() returns the loop object in the current iteration i.e., current loop object.

It would look something like this:

BricksQuery::get_loop_object()['photo_gallery'] therefore, is the array of IDs of all the images selected/uploaded for the photo_gallery Image Advanced-type sub field.

empty( BricksQuery::get_loop_object()['photo_gallery'] for non-empty rows will be false. ! empty( BricksQuery::get_loop_object()['photo_gallery'] will hence be true.

Therefore, we can check the return value of bl_has_valid_photo_gallery function and if it is true (1), then output any element of our choice.

?? is the null coalescing operator.

Step 3

Whitelist wp_get_attachment_image_url and bl_has_valid_photo_gallery functions.

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'has_blocks',
    'wp_get_attachment_image_url',
    'bl_has_valid_photo_gallery'
  ];
} );

Step 4

Create and edit a Bricks single template. Set it to apply to all single posts of your post type.

You may want to add a Section for showing the post title and content.

JSON code for pasting the next Section is provided below.

When done, it should look like this:

JSON link

The outer query loop is enabled on the Accordion Item element. The query type is your Meta Box group.

The inner query loop is enabled on the Block (tag set to LI) with this code in its PHP query editor:

return [
	'post_type' => 'attachment',
	'post_status' => 'inherit',
	'posts_per_page' => 100, // a large number
	'no_found_rows' => true,
	'post__in' => BricksQuery::get_query_for_element_id( 'fsuimk' )->loop_object['photo_gallery'],
	'orderby' => 'post__in',
];

Replace fsuimk with the Bricks ID of the outer query loop Accordion Item.

Make sure this condition is present on the Container (UL):

{echo:bl_has_valid_photo_gallery}

Step 5

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() {

    const lightGalleryElements = document.querySelectorAll('.lightgallery');

    lightGalleryElements.forEach(function(element) {

        const lightGalleryInstance = lightGallery(element, {
            plugins: [lgThumbnail, lgFullscreen],
            //licenseKey: 'your_license_key',
            speed: 500,
            hideBarsDelay: 1000,
            download: false,
            subHtmlSelectorRelative: true
        });


    });

})

</script>

That’s it. Check the front end.