One problem with wordpress is that it doesn’t allow HTML encoded strings in image alternate text. Even if you provide your image alternate text as a HTML string, wordpress will covert it down to plaintext, removing any HTML attributes and the image will then have only plaintext of your alternate text.
i.e even if you write your image alternate section such as this
Hey, I am <i> italic text </i>
this would output in frontend as
Hey, I am italic text
This is not cool. Sometimes, you rely on some plugins which reads image alternate text and display below the images in pretty cool style.
One option which came to my mind is to leave alternate text blank and provide the image caption in HTML format. For ex, check below image:
Wordpres has this feature where if you leave the alternate text blank, it would fill the caption text in alternate text. I thought it would work since I can provide HTML in captions. But again, the same problem. Captions were turned back into plaintext.
Thus, for the above image, the output was something like this:
<img src="http://yourwebsite.com/path/to/image/image.jpg" alt="Hello, this is sample caption. This text is in bold" />
Luckily, WordPress provides image hooks which you can use to modify image attributes on the fly. The one which I want to use is wp_get_attachment_image_attributes
We can use this hook to see what image attribute we want to change, read its value, format it in HTML and return back our new value.
Hence, open up your theme’s
functions.php and create a new function where you want to attach this hook. I am calling the function
What we did above is attaching
wp_get_attachment_image_attributes to our custom defined function
custom_filter_gallery_img_atts inside which we read the image caption and stored the value in image alternate text.
Hope you enjoyed the article. If you have any doubts, please comment below. See you soon.