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.


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



Step 4

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

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro