14th Dec '23
/
14 comments

ACF Gallery Query Loop in Bricks

ACF Gallery Query Loop in Bricks

Updated on 1 July 2024

This Pro tutorial provides the steps to set the images set in a post's Gallery-type ACF Pro field as loop items of a Bricks query loop.

We shall output the post's gallery images as a grid, with each image linking to its full version and the image title and description text appearing below.

While it is possible to use the Image Gallery element and select the Gallery field as its source, using a query loop gives us more control and flexibility.

Step 1

If you haven't already, create a field group having a Gallery type of custom field using ACF.

Ensure that the return format is set to Image ID.

In our example, we created one with the location rule of Post Type = Page.

This tutorial works with posts of any post type.

Step 2

Edit your posts (Pages in this example) and populate the gallery for each.

Step 3

Implement Steps 2 and 3 of Media File Attachment Data in Bricks tutorial.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 632 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Filtering ACF Relationship Query by Post Meta in Bricks

Filtering ACF Relationship Query by Post Meta in Bricks

How to filter the posts of a post type related to another post type based on the value of a True / False type ACF…
How to add a custom SwiperJS slider in Bricks

How to add a custom SwiperJS slider in Bricks

In this tutorial, we'll show you how to integrate a custom slider in Bricks using the SwiperJS library and how to add custom parameters using…
Categories:
Tags:
Pro
Dynamic Posts Lightbox in Bricks using GLightbox

Dynamic Posts Lightbox in Bricks using GLightbox

Steps to set create a dynamic lightbox with content from the post inside of the query loop.
Categories:
Pro
“My Favorites” in Bricks

“My Favorites” in Bricks

This Pro tutorial provides the steps to set up and use My Favorites in Bricks Builder.
Categories: