Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
christyweber

Display Product Image Title/Alt text as a Caption?

Question

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

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

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


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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...