ACF Image Data in Bricks

In the Bricks Facebook group a user asks:

REPOST – can anyone please tell me how to display media file attachment data beneath the thumbnail image on an archive post page like in the the image. (I asked about displaying the alt in my OP and people jumped down my throat. The alt was just an example so I could figure out the actual method.)

I have 1500+ images created by photographers who filled in the alt, titles, descriptions and captions in lightroom. The captions are very long so if I enable captions in Bricks, the text covers the entire thumbnail (2nd image).

The archive page is an ACF cpt with one image field. I know I can add a field for the captions and output this beneath the thumbnails but that means a lot of work copying and pasting the captions. If I can display the captions dynamically from the attachment data, that will save me time.

This Pro tutorial walks you through the steps for outputting data like Alt text, Caption, Title and URL of an Image-type ACF custom field for posts in a Bricks query loop.

CPT: Service

Service Fields:

Service 1:

Service 2

Both the images have captions filled in the Media Library.

After implementing the tutorial, output on the Services CPT archive page:

Step 1

Create your CPT at ACF → Post Types.

Toggle ‘Advanced Configuration’.

Under ‘URLs’ tab, enable ‘Archive’ and optionally enter an Archive Slug.

Step 2

Create the corresponding field group having an Image-type custom field.

Leave ‘Image Array’ as Return Format.

Create your CPT posts and populate the image field for each.

Step 3

Let’s create a custom PHP function that takes in two arguments: the field name and the type of data and returns the specified data for the given field.

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

<?php 

// Possible $data: caption, url, title, alt
// Sample usage in Bricks: 
function bl_get_acf_image_data( $field, $data = 'caption' ): string {
    $image = get_field( $field );
    
    if ( $image ) {
        return $image[$data];
    }

    return '';
}

The default value for the second argument has been set to caption. So for getting the caption text, we can omit this argument when this function is called.

Whitelist the bl_get_acf_image_data function.

Ex.:

<?php 

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

You should also add any other functions (native or custom) being used in your Bricks instance in addition to bl_get_acf_image_data. 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

At Bricks → Templates, create a template for your CPT archive.

It should be of type ‘Archive’.

Edit it with Bricks.

Set a condition to make the template apply to your CPT’s archive.

Copy this JSON (of a Section from our dev site) and paste it.

Caption paragraph element’s text has been set to:

{echo:bl_get_acf_image_data(service_image)}

References

https://www.advancedcustomfields.com/resources/image/#customized-display-array