Meta Box Image Advanced Field Images Slider in Bricks

In the previous ACF/Meta Box Gallery Images as Bricks Slider Using a Custom Query Type in Bricks tutorial we showed how a new query type can be created for feeding the images set in a Meta Box‘ Image Advanced field to a Bricks nestable slider.

This Pro tutorial provides step-by-step details of another way of accomplishing the same – this time using the bricks/posts/query_vars filter. We shall expand on the “Example: Loop images from Metabox.io Advanced Image Field of current post” on the filter’s documentation page.

We are also going to ensure that the entire Section gets output only if the field is populated i.e., has at least 1 image.

Step 1

Create a field group having an Image Advanced type of custom field and attach it to your desired post type.

In this example, we created a field group called “Page Fields” having a page_gallery (field ID) “Image Advanced” type of field with the Location set to Page (page).

Step 2

Edit your posts (Pages in this example) and populate the custom field by selecting/uploading images for the Page Gallery.

Step 3

Edit your Page or the template that applies to all Pages with Bricks.

Manual instructions for setting up the Section are below. If you would like to import the Section by copy and paste, here’s the JSON.

Add a Section and inside its Container, a Slider (Nestable) element.

Delete Slide 2 and Slide 3.

By default sliders take up 50vh height. You may want to click on the slider layer in the structure panel and enter auto for Height under OPTIONS.

Configure any other settings as needed for the arrows and pagination dots.

Select Slide 1.

Use query loop: Turn on.

Click the query/loop icon and set Post type to Media.

Order by: Post include order. This ensures that slide images appear in the same order as your images in the custom field.

Set Posts per page to a large number that images in your custom field will never typically exceed.

Add a Block inside Slide 1.

Padding on all sides: 2em

Max. width: 600

Typography → Color: #fff

Background color: rgba(0, 0, 0, 0.75)

Border on all sides: 4

Add a h3 heading inside the Block.

Change its text to:

{echo:bl_get_image_meta(title)}

You may want to rename this element in the structure panel to Title.

Add a Basic Text element below it, rename it to Caption and change its text to:

<strong>{echo:bl_get_image_meta()}</strong>

Add a Basic Text element below it, rename it to Description and change its text to:

{echo:bl_get_image_meta(description)}

Step 4

Apply a Dynamic data condition on the Section.

{echo:bl_is_image_advanced_empty(page_gallery)}

Replace page_gallery with your field ID.

Step 5

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

// Function to check if the Meta Box Image Advanced field is empty.
function bl_is_image_advanced_empty( $field_id ) {
	$images = rwmb_meta( $field_id );

	return empty( $images );
}

// Set the Posts query (Media type) posts to the images set in the Meta Box Image Advanced field.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	// only target pkqgnx element_id and if the field is not empty
	if ( $element_id !== 'pkqgnx' || bl_is_image_advanced_empty( 'page_gallery' ) ) return $query_vars;
		
	// get Meta Box Advanced Images field values. 'page_gallery' is the Field ID
	$gallery_images = (array) rwmb_meta( 'page_gallery', ['size' => 'full'] );
	// (array) is a type casting operator that converts the value returned by rwmb_meta() to an array. This is done to ensure that $gallery_images is always an array, even if there is only one image in the gallery
	
	// get Images IDs only
	$gallery_images_ids = array_keys( $gallery_images );
	
	// set the images ids as post__in parameter
	$query_vars['post__in'] = $gallery_images_ids;

	// respect the order in which the images are set in the field
	// $query_vars['orderby'] = 'post__in';

	return $query_vars;
}, 10, 3 );

// Get the ID of the object being iterated through in the loop.
function bl_get_loop_item_id() {
	return BricksQuery::is_any_looping() ? BricksQuery::get_loop_object_id() : 0;
}

// Function to get the image meta data.
function bl_get_image_meta( $type = 'caption' ) {
	$image_id = bl_get_loop_item_id();

	if ( $type == 'alt' ) {
		return get_post_meta( $image_id, '_wp_attachment_image_alt', true );
	} else if ( $type == 'title' ) {
		return get_post( $image_id )->post_title;
	} else if ( $type == 'description' ) {
		return get_post( $image_id )->post_content;
	} else if ( $type == 'caption' ) {
		return get_post( $image_id )->post_excerpt;
	} else {
		return 'unknown Parameter';
	}
}

Replace pkqgnx with the Bricks ID of query loop element and page_gallery with the field ID.