Bricks Slider Images From ACF Flexible Content Sub Field

Consider the following field group associated with Pages when using ACF Pro:

“Page Fields” field group
|_”Page Content” Flexible Content field
|__”Layout 1″ layout
|___”Title” Text field
|___”Layout 1 Gallery” Gallery (sub) field

The requirement is to feed all the images set for the Gallery field for all the Layout 1 rows to a Bricks Slider element. This Pro tutorial shows how based on this method/idea.

We shall first write a custom function that takes in the field name, layout name and sub field name as its arguments and returns an array of IDs of all the images of the specified gallery-type sub field across multiple rows of the given layout in the provided Flexible Content field.

We shall then call the above function inside a function hooked to bricks/posts/query_vars filter to programmatically set the source of the “posts”.

Step 1

Create your ACF field group (json export).

Step 2

Edit your Pages and populate the field.

Ex.:

Step 3

Edit your Bricks Page/template and add a Slider (Nestable) element inside a Section’s Container.

Delete Slides 2 and 3.

Select Slide 1 and enable query loop.

Post type: Media

Style → BACKGROUND:

{post_id}

Step 4

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

// Function to get array of image IDs from a ACF gallery field that is a sub field inside a layout of a Flexible Content field.
if ( ! function_exists( 'bl_get_fc_gallery_image_ids' ) ) {
	function bl_get_fc_gallery_image_ids( string $field_name, string $layout_name, string $sub_field_name ): array {
	
		// Check value exists
		if ( have_rows( $field_name ) ) {
			$image_ids = [];
	
			// Loop through rows
			while ( have_rows( $field_name ) ) : the_row();

				// Ex.: Case: "Layout 1" layout
				if ( get_row_layout() === $layout_name ) {
					$gallery = get_sub_field( $sub_field_name );

					 if ( $gallery ) {
							foreach ( $gallery as $image ) {
								$image_ids[] = $image['ID'];
							}
					 }
				}
	
			endwhile;
	
			return $image_ids;
		} else {
			// Return an empty array if no data is found
			return [];
		}

	}
}

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 === 'pgcnjg' ) {
		$query_vars['post__in'] = bl_get_fc_gallery_image_ids( 'page_content', 'layout_1', 'layout_1_gallery' );

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

	return $query_vars;
}, 10, 3 );

Replace pgcnjg with the Bricks ID of the element on which query loop is enabled.

Change the Flexible Content field name, layout name and Gallery sub field name as appropriate.