Opens in a new tab
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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
ACF Date Field Value Custom Format in Bricks

ACF Date Field Value Custom Format in Bricks

In the Bricks forum, a user asks: Hi there, I am setting up an events calendar using bricks. In some circumstances I would like to…
Categories:
Tags:
Pro
Conditionally Hiding Bricks Filters based on Select Filter Value

Conditionally Hiding Bricks Filters based on Select Filter Value

How show or hide Bricks' filter based on the selection made by another filter.
Categories:
Tags:
Pro
Google Maps JavaScript API in Bricks

Google Maps JavaScript API in Bricks

This Pro tutorial provides the steps to show post-specific maps with custom marker content in Bricks using Google's Maps JavaScript API and Advanced Custom Fields.…
Categories:
ACF Relationship: Count of Related Posts

ACF Relationship: Count of Related Posts

Looking to get the number of CPT B posts related to a CPT A post when using a Relationship field with ACF? Here's a custom…
Categories:
Tags:
Pro
ACF Term Meta on Single Posts in Bricks

ACF Term Meta on Single Posts in Bricks

Consider this scenario: CPT: Project Custom taxonomy: Project Type Each project will be assigned only one project type. Project Type taxonomy's custom field: Project Type…
Categories:
Color Custom Field as Section Background Color on Category/Term Archives in Bricks

Color Custom Field as Section Background Color on Category/Term Archives in Bricks

How to use a color from a taxonomy term custom field for as the hero section background color on archive pages.
Categories:
Tags: