Dynamic Multiple Galleries in Bricks Using Meta Box

This Pro tutorial provides the steps to set up multiple galleries per page in Bricks using Meta Box cloneable Group field having an Image Advanced sub field.

When editing a Page:

After implementing the tutorial, on the front end:

Update: Added instructions for showing custom gallery titles.

Screenshots: 1, 2.

Step 1

Install and activate Meta Box and Meta Box AIO plugins.

Import this field group or set it up for Pages like this:

Step 2

Edit your Pages. Add as many galleries as needed for each and upload/select images.

Step 2

Edit the template that applies to all the Pages with Bricks.

Copy this JSON and paste to import the Section.

We have applied a Dynamic data condition to the Section to ensure that it gets output only if there is at least 1 page gallery for the current Page.

The first Heading’s text is set to “Page”. We are going to append ” Galleries” or ” Gallery” to it conditionally based on the number of galleries.

“Use query loop” is ticked for the Block and the Query Type set to MB Group: Page Galleries.

Image Gallery element’s source has been set to:

{echo:bl_get_page_gallery}

where bl_get_page_gallery() is a custom function that we are going to define in the next step.

The text of Heading above the Image Gallery is set to:

Gallery {echo:bl_get_loop_index}

bl_get_loop_index() is a custom function that we are going to define in the next step.

This will print “Gallery 1”, “Gallery 2” headers – as many as the number of page galleries.

Step 3

Add the following in child theme‘s functions.php or a code snippets plugin:

// Function to return an array of image IDs in the page_gallery Image Advanced field's value.
// Ex.: https://d.pr/i/daG4Zx
function bl_get_page_gallery(): array {
    return BricksQuery::get_loop_object()['page_gallery'];
}

// Function to get the loop index.
if ( ! function_exists( 'bl_get_loop_index' ) ) {
    function bl_get_loop_index(): int {
        if ( method_exists( 'BricksQuery', 'get_query_object' ) ) {
            $query_object = BricksQuery::get_query_object();

            if ( $query_object ) {
                $value = intval( $query_object::get_loop_index() ) + 1;
            }
        } else {
            $value = 0;
        }

        return $value ?? 0;
    }
}

// Append "Gallery" or "Galleries" to the specified heading.
add_filter( 'bricks/element/settings', function( $settings, $element ) {
    // ensure that there is no fatal error if Meta Box is not active
    if ( ! function_exists( 'rwmb_meta' ) ) {
        function rwmb_meta( $key, $args = [], $object_id = null ) {
            return null;
        }
    }

    if ( $element->id === 'ripslo' && rwmb_meta( 'page_galleries' ) ) {
        $settings['text'] .= count( rwmb_meta( 'page_galleries' ) ) > 1 ? __( ' Galleries', 'mytextdomain' ) : __( ' Gallery', 'mytextdomain' );
    }

    return $settings;
}, 10, 2 );

Replace ripslo with the Bricks ID of your “Page” Heading element.

Update: To show gallery titles

Edit the field group. Add a Text-type of Sub Field having an ID of say, page_gallery_title above the “Page Gallery”. Screenshot.

Replace the earlier code with:

// Function to return a sub field value or an array of image IDs in the page_gallery Image Advanced field's value.
// Ex.: https://d.pr/i/daG4Zx
function bl_get_page_gallery_field( string $field_id ): string|array {
    return BricksQuery::get_loop_object()[$field_id];
}

// Append "Gallery" or "Galleries" to the specified heading.
add_filter( 'bricks/element/settings', function( $settings, $element ) {
    // ensure that there is no fatal error if Meta Box is not active
    if ( ! function_exists( 'rwmb_meta' ) ) {
        function rwmb_meta( $key, $args = [], $object_id = null ) {
            return null;
        }
    }

    if ( $element->id === 'ripslo' && rwmb_meta( 'page_galleries' ) ) {
        $settings['text'] .= count( rwmb_meta( 'page_galleries' ) ) > 1 ? __( ' Galleries', 'mytextdomain' ) : __( ' Gallery', 'mytextdomain' );
    }

    return $settings;
}, 10, 2 );

Then replace

Gallery {echo:bl_get_loop_index}

with

{echo:bl_get_page_gallery_field(page_gallery_title)}

and

{echo:bl_get_page_gallery}

with

{echo:bl_get_page_gallery_field(page_gallery)}