Aleš Sýkora / February 26, 2024 / 6 comments

ACF Gallery in Bricks Loop

Post summary: If you want to build your own gallery layout and you want to be completely free of Bricks Gallery block, then you may need to use custom query.

Let’s see how to query ACF gallery in Bricks Loop. You will need to use Bricks Media query and give it ID’s of images from your ACF gallery field.

Create an ACF gallery field

Let it set to return the array.

New! Create Bricks Block with post query easily

Create a post query and add custom parameters. Change the post__in to your ACF gallery slug.

return [
'post_type' => 'attachment', //switch post type to attachment
'post_status' => 'any', // it doesn't work without this
'posts_per_page' => '-1', // display unlimited images
'post__in' => get_post_meta( get_the_ID(), 'webmaniak_construction_gallery', true )
];

Add image block inside the query and set post_id as dynamic data input.

Old-way Create Bricks Block element with media query

Add the block element and write down it’s ID. Set the Post type to the media.

Add image block inside the DIV and set the dynamic data to post_id.

Old-way Create a filter for the query

You need to change the element_id and the slug of your ACF gallery field. Then add it into functions.php in Bricks Child template or into code snippets plugin. I use it within Advanced Scripts Plugin.

<?php
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
    if ( $element_id === 'hpbklm' ) { // Target your Query ID (do not add the brxe-) 
        global $post;
        // Get images from ACF Gallery Field
        $gallery = get_field('acf_gallery_id_loop', $post->ID); // change slug of your gallery field if needed

        if ( empty( $gallery ) ) {
            // If your gallery is empty, do not return anything
            $query_vars['post__in'] = [0];
            return $query_vars;
        }

        // Get ID's if images in gallery
        $gallery_ids = [];
        foreach ($gallery as $image) {
            $gallery_ids[] = $image['ID'];
        }

        $query_vars['post__in'] = $gallery_ids;
    }
    
    return $query_vars;
}, 10, 3 );

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

6 comments

  • Maddalena

    The new method is much cleaner, thanks for sharing!
    To order the images according to how they are arranged in the ACF backend gallery field, you can add the following line to the query:
    ‘orderby’ => ‘post__in’,

    Out of curiosity, it also works if you set the order by “Post include order” in the Bricks query editor before clicking on “Query editor (PHP)”.
    In my (very humble) opinion, this shouldn’t work, since it’s confusing: when I click on the PHP editor, I expect it to override other settings hidden underneath. But it works. :-)

  • Great tutorial! The only thing is that I don’t get original order of images from acf gallery? I mean the images on frontend are displayed not in the same order as in backend. How to force the same order as in ACF backend gallery field? Thanks!

    • A

      I am sorry, but I am not sure why it doesn’t respect the order. It’s propably caused by the post__in. Have you tried the secondary approach instead? Is it the same?

  • Thanks for a nice/easy way of feeding the query loop.
    The only problem I have with the NEW way is that in the builder, the correct images are not displayed. I get the first image in my image library. On the front-end, it works perfect

Share Your Thoughts