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..

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:
How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 1)

How to populate a map with dynamic markers from a CPT using ACF in Bricks (PART 1)

This tutorial provides the PHP & JS codes that can be pasted in order to create a dynamic map with markers populated from a custom…
Categories:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
Pro
Conditional Output Based on ACF Date Field in Bricks

Conditional Output Based on ACF Date Field in Bricks

Updated on 1 Aug 2024 Looking to have a Section or other elements in Bricks rendered on the frontend only if today's date is before…
Categories:
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories: