-
Hello!
It seems that when I use the image block with dynamic data enabled, the block correctly includes the alt text in the img HTML but not the image title attribute?
Thus, none of my dynamically generated images are displaying image titles when I hover over them. Only my static images do.
Is there a way to add the image title to dynamic images using code snippets or some other method?
I tried using the “title” custom attribute, but I was only able to add a static title.
Thanks in advance for your help!
-
Hi there,
I tried using the “title” custom attribute, but I was only able to add a static title.
What do you mean by “a static title”? It should be pulling the title you added to the image in the media library.
Let me know 🙂
-
Under block settings, custom attributes: if I add a new attribute for title (one of the allowed attributes) and leave the value blank – the title displays as “1” when I hover over the image in the front end. So it’s not dynamically grabbing the image title for that image, if I leave it blank.
Otherwise, if I enter anything as a value, it applies that text as the title, no matter what image is dynamically displayed. It’s a static title, in that case.
Is there a way to dynamically apply the image title?
-
Hi there,
Is this dynamic image inside a query loop block?
-
In some cases, yes. But I see the same issue with dynamic images in template parts, as well.
-
Okay, so for this issue we can try this approach.
Add this PHP snippet:
add_filter( 'render_block', function( $block_content, $block ) { if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'add-img-title' ) !== false ) { $myreplace = '<img'; $myinsert = '<img title="' . get_the_title() . '"'; $block_content = str_replace( $myreplace, $myinsert , $block_content ); } return $block_content; }, 10, 2 );Then, on every dynamic image block, add this class:
add-img-title
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/ -
That did the trick, thank you!
-
Scratch that – I spoke too soon! I just realized that it’s pulling the POST title and displaying it as the image title when I hover over the image.
That’s fine as a fallback, but.
If the image has a title set, how do I make sure that’s displayed dynamically?
-
Ah yes, I missed that part. Replace the snippet with this one:
add_filter( 'render_block', function( $block_content, $block ) { if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'add-img-title' ) !== false ) { $image_id = get_post_thumbnail_id(); $myreplace = '<img'; $myinsert = '<img title="' . ( get_the_title($image_id) ? get_the_title($image_id) : get_the_title() ) . '"'; $block_content = str_replace( $myreplace, $myinsert , $block_content ); } return $block_content; }, 10, 2 ); -
There we go! Thank you so much!
-
You’re welcome!
- You must be logged in to reply to this topic.