Meta Box/ACF Images Staggered Grid Gallery in Bricks

This Pro tutorial provides the steps to show images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.

We shall write a custom function that builds an array with IDs of images like this:

• first image from the full width images
• first two images from the half width images
• second image from the full width images
• third and fourth images from the half width images

and so on…

This function will then be set as the source of images for the Bricks’ Image Gallery element.

After implementing the tutorial:

Step 1

Create a field group for your post type (page in this example) having:

If using ACF

two ‘Gallery’ fields

Set the Return Format to Image ID for both fields.

If using Meta Box

two ‘Image Advanced’ fields

Step 2

Edit your posts (Pages in this example) and populate the fields.

ACF:

Meta Box:

Step 3

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

If using ACF:

<?php 

function bl_get_staggered_grid_layout_image_ids(): array {
    // $array1 = array_keys( rwmb_meta( 'page__full_width_images' ) ); // Images that span 2 columns
    $array1 = get_field( 'page__full_width_images' ); // Images that span 2 columns

    // $array2 = array_keys( rwmb_meta( 'page__half_width_images' ) ); // Images that span 1 column
    $array2 = get_field( 'page__half_width_images' ); // Images that span 1 column

    // Initialize the master array
    $master_array = [];

    // Initialize counters for both arrays
    $count1 = 0;
    $count2 = 0;

    // Determine the total number of images
    $total_images = count( $array1 ) + count( $array2 );

    // Loop until we have processed all images
    while ( $count1 < count( $array1 ) || $count2 < count( $array2 ) ) {
        // Add an image from array1 (spans 2 columns)
        if ( $count1 < count( $array1 ) ) {
            $master_array[] = $array1[$count1];
            $count1++;
        }

        // Add two images from array2 (each spans 1 column)
        for ( $i = 0; $i < 2; $i++ ) {
            if ( $count2 < count( $array2 ) ) {
                $master_array[] = $array2[$count2];
                $count2++;
            }
        }
    }

    return $master_array;
}

Replace page__full_width_images and page__half_width_images with the corresponding names of the fields in your site.

If using Meta Box:

<?php 

function bl_get_staggered_grid_layout_image_ids(): array {
    $array1 = array_keys( rwmb_meta( 'page__full_width_images' ) ); // Images that span 2 columns

    $array2 = array_keys( rwmb_meta( 'page__half_width_images' ) ); // Images that span 1 column

    // Initialize the master array
    $master_array = [];

    // Initialize counters for both arrays
    $count1 = 0;
    $count2 = 0;

    // Determine the total number of images
    $total_images = count( $array1 ) + count( $array2 );

    // Loop until we have processed all images
    while ( $count1 < count( $array1 ) || $count2 < count( $array2 ) ) {
        // Add an image from array1 (spans 2 columns)
        if ( $count1 < count( $array1 ) ) {
            $master_array[] = $array1[$count1];
            $count1++;
        }

        // Add two images from array2 (each spans 1 column)
        for ( $i = 0; $i < 2; $i++ ) {
            if ( $count2 < count( $array2 ) ) {
                $master_array[] = $array2[$count2];
                $count2++;
            }
        }
    }

    return $master_array;
}

Replace page__full_width_images and page__half_width_images with the corresponding IDs of the fields in your site.

Step 4

Whitelist the bl_get_staggered_grid_layout_image_ids function.

Ex.:

<?php 

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

You should also add other functions (native or custom) being used in your Bricks instance besides bl_get_staggered_grid_layout_image_ids. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Step 5

Edit the template that applies to your post type with Bricks.

Add a Section and inside its Container, an Image Gallery element.

Use these settings:

{echo:bl_get_staggered_grid_layout_image_ids}

Add this CSS for the element:

/* Full-width image (spans two columns) */
%root% > *:nth-child(3n+1) {
	grid-column: span 2;
}

%root% > *:nth-child(3n+1) img {
	height: 382px;
}
@media (max-width: 767px) {
	%root% > *:nth-child(3n+1) img {
		height: 194px;
	}
}

/* Single-column images */
%root% > *:nth-child(3n+2),
%root% > *:nth-child(3n+3) {
	grid-column: span 1;
}

%root% img {
	width: 100%;
}

Credit

ChatGPT for the code.