Bricks Templates Query Loop

In the Bricks forum a user asks:

In the new update in Bricks 1.10
We have templates screenshot feature for templates.
I created a query loop for my templates and I need to call the screenshot of the template in the query loop.
Can anyone help me, please?

Bricks 1.10, currently in beta adds support for Template screenshots.

This setting is disabled by default and can be enabled at Bricks → Settings.

In the Templates dialog inside the editor, screenshots can be generated on-demand (usually for any templates already present before this setting is enabled). Screenshots will be automatically generated for all templates when the setting is on.

If you are looking to output the template names in a Bricks query loop with their screenshots, it is not enough to simply set the Image element’s source to the featured image. This is because the presence of featured image is first checked for the templates and if it is not present, automatically-generated template screenshots are pulled. Templates will typically be using auto-generated screenshots.

The logic for this is defined in /wp-content/themes/bricks/includes/admin.php.

Let’s define a custom function with the above code.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php

function bl_get_bricks_template_image_url(): ?string {
    $post_id = get_the_ID();

    // Check if post has a thumbnail
    if ( has_post_thumbnail( $post_id ) ) {
        return get_the_post_thumbnail_url( $post_id, 'thumbnail' );
    } else {
        // Get automatically-generated template screenshot from custom directory
        $wp_upload_dir = wp_upload_dir();
        $custom_dir = $wp_upload_dir['basedir'] . '/' . BRICKS_TEMPLATE_SCREENSHOTS_DIR . '/';
        $custom_url = $wp_upload_dir['baseurl'] . '/' . BRICKS_TEMPLATE_SCREENSHOTS_DIR . '/';
        $existing_files = glob($custom_dir . "template-screenshot-$post_id-*.webp");
        $file_path = $existing_files[0] ?? null;

        if ( $file_path ) {
            return str_replace( $custom_dir, $custom_url, $file_path );
        }
    }

    // Return null if no image is found
    return null;
}

Next, whitelist the bl_get_bricks_template_image_url function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_bricks_template_image_url'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides bl_get_bricks_template_image_url. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Set up a query loop with this PHP in the query editor:

return [
	'post_type' => 'bricks_template',
	'posts_per_page' => 100, // a large number
	'no_found_rows' => true,
];

Sign code.

For showing the template screenshot, add an Image element and set its source to:

{echo:bl_get_bricks_template_image_url}