Custom Field Values Below Images in WordPress Block Editor Output

Updated on 7 Feb 2024

A user in our Facebook group asks:

How can I display Image custom fields? I have 2 ACF fields for each image: Author and URL. I would like to display those fields underneath each image.
This is on blog posts, so I am using Gutenberg for the content and Bricks for the template. Anyone know how I can display that?

WordPress provides a render_block filter for modifying the output of blocks on the front end.

This Pro tutorial shows how we can construct HTML for outputting custom field (where the fields for image attachments) values as a link and append it before the closing figure tag for all images that have the fields populated.

Note: This only works for images inserted in the post editor after the custom fields have been registered, not for existing images.

Custom fields definition using ACF:

Fields being populated in the Media Library:

HTML output on the front end:

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro