⚙️ Image Captions II
A couple days ago I mentioned adopting a cool javascript caption hack that Ruby had come up with to append captions to images on Bear Blog. Originally I was storing that kind of information in the title element of my images and it was easy to just switch a lot of that information over to the alt text in my posts. Today it occurred to me that I had done a lot of unnecessary work because the title element is the best place to store caption text for a given image. From an accessibility standpoint images should always have alt text (and I need to do a better job of describing all my images), but they don't always need a caption or a title1. So I updated the original code to create the caption based on an image's title element like so:
document.querySelectorAll("img").forEach(function (n) {
n.outerHTML = "<figure>" + n.outerHTML
+ "<figcaption>" + n.title + "</figcaption></figure>";
});
This worked exactly the way I wanted and I made another pass through my recent post images to take advantage of this setup.
Additionally, I often like my captions to be a little joke about the image while the alt text should really be conveying in text what the image is supposed to be.↩