ACF/Meta Box Gallery Images as Bricks Slider Using a Custom Query Type in Bricks

For an easier alternative method, follow this tutorial instead.

---

Updated on 26 Jul 2023

This Pro tutorial provides the steps to set images of a ACF Pro‘s Gallery field or Meta Box‘ Image Advanced type of field as the source of a Slider (Nestable) element in Bricks.

When editing a Page:

When the Page is being viewed on the front end:

ACF Pro

Step 1

Create a field group having a Gallery-type of field labelled say, Page Gallery and set its location to be your desired post type (Pages in this example).

Step 2

Edit your Pages and populate the field for each by uploading/selecting your desired images that should appear in the slider.

Step 3

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

// Add new "ACF Page Gallery" type control to query loop options - in the dropdown.
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['acf_page_gallery'] = esc_html__( 'ACF Page Gallery' );

	return $control_options;
} );

// Run new query if option selected.
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	if ( $query_obj->object_type !== 'acf_page_gallery' ) {
		return $results;
	}
	
	/* If option is selected, run our new query */
	if ( $query_obj->object_type === 'acf_page_gallery' ) {
		$results = bl_run_new_query_20230309();
	}
	
	return $results;
}, 10, 2 );

// Form an array of image IDs and return it.
function bl_run_new_query_20230309() {
	// if ACF is not active, return an empty array
	if ( ! class_exists( 'ACF' ) ) {
		return [];
	}

	// get the images from the ACF Gallery field
	$images = get_field( 'page_gallery' );
	
	// 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 the array of image IDs so that for each loop iteration, the loop object contains the image ID
	return $image_ids;
}

// Helper function to get the ID of the loop object.
function bl_get_acf_page_gallery_image_id() {
	$looping_query_id = BricksQuery::is_any_looping();

	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'acf_page_gallery' ) {
		return BricksQuery::get_loop_object( $looping_query_id );
	}

	return '';
}

Make sure that the correct field name is set (on the right side) in

$images = get_field( 'page_gallery' );

Step 4

Edit your single Page (or your post type) template with Bricks.

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

Delete Slide 2 and Slide 3.

Toggle “Use query loop” on for Slide 1.

Click the loop icon and set the query type to “ACF Page Gallery”.

Switch to STYLE tab → BACKGROUND and paste this dynamic data as the image source:

{echo:bl_get_acf_page_gallery_image_id}

Change the image size as needed.

You may want to set the Background position to Center center.

Meta Box

Step 1

Create a field group having a Image Advanced-type of field labelled say, Page Gallery and set its location to be your desired post type (Pages in this example).

Step 2

Edit your Pages and populate the field for each by uploading/selecting your desired images that should appear in the slider.

Step 3

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

// Add new "Meta Box Page Gallery" type control to query loop options - in the dropdown.
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['meta_box_page_gallery'] = esc_html__( 'Meta Box Page Gallery' );

	return $control_options;
} );

// Run new query if option selected.
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	if ( $query_obj->object_type !== 'meta_box_page_gallery' ) {
		return $results;
	}
	
	/* If option is selected, run our new query */
	if ( $query_obj->object_type === 'meta_box_page_gallery' ) {
		$results = bl_run_new_query_20230309();
	}
	
	return $results;
}, 10, 2 );

// Form an array of image IDs and return it.
function bl_run_new_query_20230309() {
	// Avoid Undefined Function Error when Meta Box is not active.
	if ( ! function_exists( 'rwmb_meta' ) ) {
		function rwmb_meta( $key, $args = '', $post_id = null ) {
			return [];
		}
	}

	// get the images from the Meta Box field
	$images = rwmb_meta( 'page_gallery', [ '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 the array of image IDs so that for each loop iteration, the loop object contains the image ID
	return $image_ids;
}

// Helper function to get the ID of the loop object.
function bl_get_meta_box_page_gallery_image_id() {
	$looping_query_id = BricksQuery::is_any_looping();

	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'meta_box_page_gallery' ) {
		return BricksQuery::get_loop_object( $looping_query_id );
	}

	return '';
}

Make sure that the correct field ID is set (on the right side) in

$images = rwmb_meta( 'page_gallery', [ 'size' => 'full' ] );

Step 4

Edit your single Page (or your post type) template with Bricks.

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

Delete Slide 2 and Slide 3.

Toggle “Use query loop” on for Slide 1.

Click the loop icon and set the query type to “Meta Box Page Gallery”.

Switch to STYLE tab → BACKGROUND and paste this dynamic data as the image source:

{echo:bl_get_meta_box_page_gallery_image_id}

Change the image size as needed.

You may want to set the Background position to Center center.

Update on 26 Jul 2023

When using Meta Box: If you’d like to set this up on two different post types use this code instead.

In this example, a CPT called event has event_gallery Image Advanced-type custom field and another CPT called coach has coach_gallery custom field.

// Add new "Meta Box Page Gallery" type control to query loop options - in the dropdown.
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['mb_event_gallery'] = esc_html__( 'MB Event Gallery' );
	$control_options['queryTypes']['mb_coach_gallery'] = esc_html__( 'MB Coach Gallery' );

	return $control_options;
} );

// Run new query if option selected.
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	// if $query_obj->object_type is not 'mb_event_gallery' or 'mb_coach_gallery', return the original results
	if ( ! in_array( $query_obj->object_type, [ 'mb_event_gallery', 'mb_coach_gallery' ] ) ) {
		return $results;
	}
	
	// if option is selected, run our new query
	if ( $query_obj->object_type === 'mb_event_gallery' ) {
		$results = bl_run_new_query_20230726( 'event_gallery' );
	} else if ( $query_obj->object_type === 'mb_coach_gallery' ) {
		$results = bl_run_new_query_20230726( 'coach_gallery' );
	}
	
	return $results;
}, 10, 2 );

// Form an array of image IDs and return it.
function bl_run_new_query_20230726( $field_id ) {
	// Avoid Undefined Function Error when Meta Box is not active.
	if ( ! function_exists( 'rwmb_meta' ) ) {
		function rwmb_meta( $key, $args = '', $post_id = null ) {
			return [];
		}
	}

	// 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 the array of image IDs so that for each loop iteration, the loop object contains the image ID
	return $image_ids;
}

// Helper function to get the ID of the loop object.
function bl_get_meta_box_gallery_image_id() {
	$looping_query_id = BricksQuery::is_any_looping();

	// if $looping_query_id exists and the query object type is 'mb_event_gallery' or 'mb_coach_gallery', return the loop object
	if ( $looping_query_id && in_array( BricksQuery::get_query_object_type( $looping_query_id ), [ 'mb_event_gallery', 'mb_coach_gallery' ] ) ) {
		return BricksQuery::get_loop_object( $looping_query_id );
	}

	return '';
}

Replace event_gallery and coach_gallery with the IDs of your Image Advanced-type of custom fields.

In the Background control, use this to pull the image for the current item in the loop:

{echo:bl_get_meta_box_gallery_image_id}