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

Related Tutorials..

Pro
Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Custom Dynamic Data Tags for ACF Field Label, Prefix and Suffix in Bricks

Bricks lacks built-in dynamic tags for ACF field labels, prefixes, and suffixes. This tutorial shows how to add them using custom dynamic tags.
Categories:
Pro
Random images from ACF Options Gallery in Bricks

Random images from ACF Options Gallery in Bricks

This Pro tutorial provides the steps to output images from an ACF Gallery-type custom field in a Bricks query loop randomly with each image appearing…
Categories:
Displaying SureCart Featured Products & Products Collections with a Query Loop

Displaying SureCart Featured Products & Products Collections with a Query Loop

We walk through how to use a query loop to display SureCart products, featured products & collections.
Categories:
Bricks Templates Query Loop

Bricks Templates Query Loop

How display Bricks Templates with saved screenshots in a query loop.
Categories:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Pro
Frontend Editing with ACF in Bricks

Frontend Editing with ACF in Bricks

This Pro tutorial provides the steps to show a form on single posts on the front end for admins and the post author using which…
Categories:
Pro
Post/Page-Specific Background Slideshow in Bricks using Backstretch

Post/Page-Specific Background Slideshow in Bricks using Backstretch

This Pro tutorial provides the steps to load and initialize Backstretch on the images uploaded to a post (of any post type like Pages or…
Categories: