Custom Field Values Below Images in WordPress Block Editor Output

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.

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 all 250+ Bricks code tutorials with BricksLabs Pro