26th Sep '23
/
1 comment

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Related Posts using ACF Post Object in Bricks

Related Posts using ACF Post Object in Bricks

Modifying the query loop to limit the posts to only related posts via an ACF Post Object custom field.
Categories:
Tags:
Pro
ACF Image Data in Bricks

ACF Image Data in Bricks

Displaying Alt text, Caption, Title and URL of an ACF image field for posts in a query loop.
Categories:
Tags:
Pro
Configuring Image Gallery dynamic source in Bricks

Configuring Image Gallery dynamic source in Bricks

Let's say you have a custom field created with ACF Pro of the type Gallery called "Property Gallery" for posts of "Property" CPT. In the…
Pro
Events grouped by Event Date custom field in Bricks

Events grouped by Event Date custom field in Bricks

This Pro tutorial for Bricks users provides the steps to output posts of an event custom post type dynamically grouped by the value of their…
Categories:
Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

Accessing ACF Repeater Sub Fields Programmatically in Bricks Query Loop

It is possible to output sub field's values when a Bricks query loop's type has been set to a ACF Repeater without writing code. This…
Categories:
ACF Checkbox Items with Custom SVG Bullets in Bricks

ACF Checkbox Items with Custom SVG Bullets in Bricks

We walk through outputting list items with SVG icons based on the choice of a ACF Checkbox field.
Categories:
Tags:
Pro
Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

On product pages, we show all the FAQs associated with the current WooCommerce product's product categories.
Categories:
Pro
Post-specific ACF Repeater Galleries as Sliders in Bricks

Post-specific ACF Repeater Galleries as Sliders in Bricks

How to output ACF Repeater field rows with the images of the Gallery-type sub field as a slider.