Jump to content

Display Product Image Title/Alt text as a Caption?

Recommended Posts

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

Link to comment
  • Replies 1
  • Views 424
  • Created
  • Last Reply

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.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.