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: