Topic: How to add alt text and caption to an image that uses dynamic data?

Marcel
June 4, 2024 at 3:07 pm

Hello.

I have an image block that has the “Enable Dynamic Data” option enabled, so that the image URL comes from an ACF field.

The image is displayed in the front end without any problem.

However, since it is an image, I would like to add an alt text and a caption.

How should I proceed, taking into account that the image is not hosted in my media library (where I could add alttext and caption, obviously) but comes from an external URL?

Thank you!
Ying
June 4, 2024 at 4:53 pm

Hi there,

Where do you want to add the alt text and caption? Below the image?

If so, you can click the CC button when the image block is selected, then select the newly added headline block, enable its dynamic data, set content source to alt text or caption.

Let me know if that’s helpful 🙂
Marcel
June 5, 2024 at 12:08 am

Hi Ying,

What you say is valid if you use an image block and it works correctly.

If you FIRST ADD caption and Alt Text and ONLY AFTER enable dynamic data, it works.

But if you first enable dynamic data, clicking the CC button has no effect (that headline block no longer appears) and the ALT TEXT box is no longer present.

I was wondering if there would be a solution so that I can insert Caption and Alt Text dynamically – using ACF (advanced custom fields), as I dynamically insert an image.
David
June 5, 2024 at 1:48 am

Hi there,

have you considered setting the image block as you require with the caption in place, and the dynamic data set. And the save the block as a Pattern ?
Then you can add the Pattern instead of the Image Block when required, and simply update the dynamic data if required.
Marcel
June 5, 2024 at 3:11 am

OK David, sorry to bother you. I don’t care to much about the caption. I can create a headline block under the image and insert dynamically any caption I want, no problem with that. So ignore the caption issue.

But the Alt text is important to me.
So I only want to understand if there is an option to add Alt Text to an image dynamically from a custom field (ACF), exactly how I add an image from a custom field (ACF) using dynamic data.
If it’s not possible, I can live with that, but need your confirmation :))
David
June 5, 2024 at 5:44 am

Theres not an option built in.
It might be possible with some PHP to filter the value in place of the ALT tag… not sure though. Want to pursue that ? I can take a look if you want
Marcel
June 7, 2024 at 12:43 am

Hi David,

I hope I’m not overstepping by asking for your assistance, but it would be incredibly helpful if you could take a look at this matter for me.

I’ve done some research and found an article on the ACF forum that might be relevant: Get image alt text and write it to a custom field.

According to the article, I can use an acf/prepare_field or acf/load_value filter.

Based on this information, do you think this approach would work? If so, can you help me with the necessary steps and the code snippet I should use?

Thank you!
David
June 7, 2024 at 1:35 am

Just to be clear.
You have an image in a post.
And the post has a custom field containing some text.
And the image alt attribute should contain the custom fields text

Is that correct?
And if so, is it just one image on the post that requires this ?
Marcel
June 7, 2024 at 2:45 am

At this moment the post contains a Group Field, consisting of:

– a GenerateBlocks image, dynamically generated using an ACF field (Field Type – Image, Field Label – eoimg, Field Name – eoimg, Return Format – Image URL, Library – All);
– a custom field containing some text.

The image alt attribute should contain the custom fields text.

But I would like to have more images / posts to which the same principle applies. I don’t know if this aspect could complicate things.

David

June 7, 2024 at 4:24 am

Hmmm…tricky one, especially with the additional inmages. And you may want to ask ACF for a solution to do the whole thing.

The most i can currently offer is a render block option:


add_filter( 'render_block', function( $block_content, $block ) {
    if ( 
        !is_admin() && 
        ! empty( $block['attrs']['className'] ) && 
        strpos( $block['attrs']['className'], 'add-custom-alt' ) !== false 
    ) {
        $custom_alt = get_field('your_custom_field');
        if ($custom_alt) {
            $myreplace = 'alt';
            $myinsert = 'alt="' . $custom_alt . '" ';
            $block_content = str_replace( $myreplace, $myinsert , $block_content );
        }
    }
    return $block_content;
}, 10, 2 );

This snippet looks for an image block with a CSS class of: add-custom-alt
And assumes that it has NO alt attribute , which means GB will output an empty alt
It then swaps that for an alt tag containing a field set here: get_field('your_custom_field');

Marcel
June 7, 2024 at 1:55 pm

It’s perfect. Thank you, David!
David
June 8, 2024 at 12:58 am

Awesome – glad to hear that!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to add alt text and caption to an image that uses dynamic data?