Display Product Image Title/Alt text as a Caption?

Hey forum, can anyone tell me if it's possible to display the image title/alt text as a caption below the selected image on a product page? I'm having trouble coming up with the correct CSS to make this happen. My client has a number of editorial style images where multiple variants of a bag are show together and she wants to annotate which style is which. Example: https://ahomesummit.com/shop/andrea-jewelry-case

Hi Christy.

This is one of those times where, if the <img> element supported pseudo-elements, then we could leverage the att() function to solve this problem relatively easily (albeit with some compromises). But alas, it does not.

Therefore, I think the only way would be via JavaScript. On page init, an element (div, span, p, etc.) would be created within each .productItem-gallery-slides-item that contains a caption based on the sibling <img> element's alt attribute. The visibility may be able to be controlled simply via the .sqs-active-slide class on the parent, though it's possible it'd need to be more tightly controlled via a mutation observer or event listener. At that point, it's a matter of using CSS to style the caption as desired. It may be necessary to use JavaScript for reliable positioning/scaling, but CSS may be adequate for most viewport widths.

So yes, it's possible. To get something that is adequate for most devices and widths might take a developer an hour. To get it to something that is ultra-reliable might take another hour or two, but that might not be entirely necessary.

Alternatively, you may be able to find an acceptable compromise using product variant images.

I hope this helps.

-Brandon