Meta Box Image Advanced Field Images in Bricks Query Loop

A user asked:

Do you know what the best way to query an image from metabox gallery?

I would like to query the top 3 images from a metabox gallery but there doesnt look like an easy way. The only way I found is to use the gallery element from bricks but customization is limited.

I would like to set a block as a query loop and add an image element on it so I can do more things with it

This Pro tutorial provides the steps to set the images uploaded/selected in a Meta Box “Image Advanced” type of custom field as the source of images of an Image element in a Bricks query loop of type Posts → Media.

Step 1

Create an Image Advanced field for your desired post type or a specific post.

In this example, we created one called page_gallery for all Pages.

If you’d like to restrict the number of images, enter a number in the “Max. number of files” field.

Step 2

Edit your Pages and populate the field.

Step 3

Edit your Page/template with Bricks.

Add a Section having this structure:

Heading is of course optional.

Enable query loop on the Block.

Click on the query icon and select Media in the Post type control.

Select the Image element and set its data source to

{post_id}

Select your desired image size.

Step 2

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

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

// Function to get the image IDs from the Meta Box field of type "Image Advanced".
function bl_get_mb_image_advanced_ids( string $field_id ): array {
	// get the images from the Meta Box field
	$images = rwmb_meta( $field_id, [ 'size' => 'full' ] );
		
	// if no images, return an empty array
	if ( ! $images ) {
		return [];
	}
	
	// create an empty array
	$image_ids = [];
	
	// loop through the images
	foreach( $images as $image ) {
		// create a new array with the image IDs
		$image_ids[] = $image['ID'];
	}

	return $image_ids;
}

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id == 'kkdtiq' ) {
		$MBGalleryImageIds = bl_get_mb_image_advanced_ids( 'page_gallery' );

		if ( ! empty( $MBGalleryImageIds ) ) {
			$query_vars['post__in'] = $MBGalleryImageIds;
		}
	}

	return $query_vars;
}, 10, 3 );

Replace kkdtiq with the Bricks ID of your query loop element.

Replace page_gallery with your field ID.

If you’d like to only output the first 3 images, replace

return $image_ids;

with

return array_slice( $image_ids, 0, 3 );

Step 3

Let’s ensure that the Section gets rendered only if the product gallery is not empty.

There are two ways of going about this.

Method 1:

Add this code:

add_filter( 'bricks/element/render', function( $render, $element ) {
	if ( $element->id === 'kkdtiq' ) {
		return bl_get_mb_image_advanced_ids( 'page_gallery' );
	}

	return $render;
}, 10, 2 );

where kkdtiq is the Bricks ID of the Section element and page_gallery is the field ID.

Method 2:

Add this Dynamic data condition on the Section:

{echo:bl_get_mb_image_advanced_ids(page_gallery)}