Featured Image’s Meta in a Bricks Posts Query Loop

This Pro tutorial provides the steps for outputting values of custom fields for the featured image of current post in a Bricks query loop.

Consider this sample field group created using ACF:

Field label: Original Source
Field type: URL
Location: Attachment = All

After implementing the tutorial:

Notice the ORIGINAL SOURCE link for the featured images with the field populated. It links to the value (in this case, a URL) set for the images.

Step 1

Using your favorite custom fields plugin create a custom field for either all attachments or image-type of attachments.

Edit your posts’ featured images and populate your custom field.

Step 2

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

<?php 

// Function to get the value of a custom field for the current post's featured image
function bl_get_acf_field_value_featured_image( string $field_name ) {
    return get_field( $field_name, get_post_thumbnail_id() );
}

If you prefer using native WordPress function or are using a different plugin like Meta Box instead of ACF, replace

return get_field( $field_name, get_post_thumbnail_id() );

with

return get_post_meta( get_post_thumbnail_id(), $field_name, false );

Step 3

Whitelist the bl_get_acf_field_value_featured_image function.

Ex.:

<?php 

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

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

More info on whitelisting can be found here.

Step 4

Edit with Bricks a Page or template in which you would like show the posts grid.

Copy this JSON of the fully-built section from our dev site and paste.

Note: Some ACSS classes/variables are used.

Things of importance:

To ensure that the Div that houses the featured image and text link, this condition has been applied:

This will only begin working once you whitelist the has_post_thumbnail() function.

The dynamic URL of the text link has been set to:

{echo:bl_get_acf_field_value_featured_image(original_source)}

where original_source is the field name/ID.

This condition has been applied on the text link to ensure that it gets output only if the URL exists:

{echo:bl_get_acf_field_value_featured_image(original_source)}