ACF/Meta Box Gallery Images as Bricks Slider in Bricks

Updated on 24 Sep 2024

In the past we showed how to create a custom query for showing ACF Pro‘s Gallery field or Meta Box‘ Advanced Images fields’ images in Bricks slider element here.

It is possible to achieve the same result in a simpler way using the bricks/posts/query_vars filter. This Pro tutorial shows how.

ACF

Step 1

Create a field group attached to your desired post type having a Gallery-type of custom field.

Step 2

Edit your Pages and populate the field.

Step 3

Edit your post type’s singular template with Bricks.

Add a Slider (Nestable) element.

Delete Slides 2 and 3.

Select Slide 1 and enable query loop.

Click the loop icon and set Post type to Media.

Step 4

Enable PHP query editor and paste:

$images = get_field( 'page_gallery' );

if ( ! is_array( $images ) ) {
	return [];
}

$image_ids = array_map( static function( $image ) {
	return $image['ID'] ?? null;
}, $images );

if ( $image_ids ) {
	return [
		'post_type' => 'attachment',
		'post_status' => 'inherit',
		'posts_per_page' => 10,
		'no_found_rows' => true,
		'post__in' => $image_ids,
		'orderby' => 'post__in',
	];
} else {
	return [
		'post__in' => [ 0 ],
	];
}

Replace page_gallery with the name of your Gallery field.

Change 10 to how many ever max. no. of images you want to show.

Alternative/older way:

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

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ): array {
	// check if ACF is active
	if ( ! class_exists( 'acf' ) ) {
		return $query_vars;
	}

	if ( $element_id === 'xwjprd' ) {
		$images = get_field( 'page_gallery' );
		
		$imageIDs = [];

		if ( is_array( $images ) ) {
			// loop through the images and push the IDs to the array
			foreach( $images as $image ) {
				$imageIDs[] = $image['ID'];
			}
		}

		$query_vars['post__in'] = $imageIDs;
	}

	return $query_vars;
}, 10, 3 );

Replace page_gallery with the field name.

Replace xwjprd with the Bricks ID of the query loop-enabled element (Slide 1).

Step 5

For referring to each image in the loop, use the post_id dynamic data tag like this:

If you’d like to have multiple galleries per page, here’s the sample code: https://gist.github.com/srikat/d23abebdcf3e6bad2abd3af9fc03471a

Meta Box

The steps would be similar to the above with the following changes.

Add a field of type “Image Advanced”.

For Step 4 enable PHP query editor and paste:

/**
 * Fallback function for rwmb_meta if Meta Box is not active.
 *
 * @param string $key     The meta key to retrieve.
 * @param mixed  $args    Optional. Additional arguments for the function.
 * @param int    $post_id Optional. The post ID.
 * @return false Always returns false as a fallback.
 */
if ( ! function_exists( 'rwmb_meta' ) ) {
    function rwmb_meta( string $key, $args = '', ?int $post_id = null ) : bool {
        return false;
    }
}

$images = rwmb_meta( 'page_gallery', ['size' => 'full'] );
    
if ( ! is_array( $images ) ) {
  return [];
}

$image_ids = wp_list_pluck( $images, 'ID' );

if ( $image_ids ) {
	return [
		'post_type' => 'attachment',
		'post_status' => 'inherit',
		'posts_per_page' => 10,
		'no_found_rows' => true,
		'post__in' => $image_ids,
		'orderby' => 'post__in',
	];
} else {
	return [
		'post__in' => [ 0 ],
	];
}

Replace page_gallery with the ID of your Image Advanced field.

Change 10 to how many ever max. no. of images you want to show.