In the previous ACF/Meta Box Gallery Images as Bricks Slider Using a Custom Query Type in Bricks tutorial we showed how a new query type can be created for feeding the images set in a Meta Box' Image Advanced field to a Bricks nestable slider.
This Pro tutorial provides step-by-step details of another way of accomplishing the same - this time using the bricks/posts/query_vars filter. We shall expand on the "Example: Loop images from Metabox.io Advanced Image Field of current post" on the filter's documentation page.
We are also going to ensure that the entire Section gets output only if the field is populated i.e., has at least 1 image.
Step 1
Create a field group having an Image Advanced type of custom field and attach it to your desired post type.
In this example, we created a field group called "Page Fields" having a page_gallery (field ID) "Image Advanced" type of field with the Location set to Page (page).
Step 2
Edit your posts (Pages in this example) and populate the custom field by selecting/uploading images for the Page Gallery.
Step 3
Edit your Page or the template that applies to all Pages with Bricks.
Manual instructions for setting up the Section are below. If you would like to import the Section by copy and paste, here's the JSON.
Add a Section and inside its Container, a Slider (Nestable) element.
Delete Slide 2 and Slide 3.
By default sliders take up 50vh height. You may want to click on the slider layer in the structure panel and enter auto for Height under OPTIONS.
Configure any other settings as needed for the arrows and pagination dots.
Select Slide 1.
Use query loop: Turn on.
Click the query/loop icon and set Post type to Media.
Order by: Post include order. This ensures that slide images appear in the same order as your images in the custom field.
Set Posts per page to a large number that images in your custom field will never typically exceed.
Add a Block inside Slide 1.
Padding on all sides: 2em
Max. width: 600
Typography → Color: #fff
Background color: rgba(0, 0, 0, 0.75)
Border on all sides: 4
Add a h3 heading inside the Block.
Change its text to:
{echo:bl_get_image_meta(title)}
You may want to rename this element in the structure panel to Title.
Add a Basic Text element below it, rename it to Caption and change its text to:
<strong>{echo:bl_get_image_meta()}</strong>
Add a Basic Text element below it, rename it to Description and change its text to:
{echo:bl_get_image_meta(description)}
Step 4
Apply a Dynamic data condition on the Section.
{echo:bl_is_image_advanced_empty(page_gallery)}
Replace page_gallery with your field ID.
Step 5
Add the following in child theme's functions.php or a code snippets plugin:
