ACF Gallery in Bricks Loop

min read / ACF, Bricks Builder, Custom Code, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

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 );

4 comments