Captions on SFNT images (in ReadyTheme Images area)

[habreu]

More baby questions.

On our site at http://www.allfrom1supply.com SFNT page we 9 category buttons. I would like to find a way to add a text overlay something like the 'footer' on this image

http://www.allfrom1supply.com/merchant2/graphics/00000001/storefront--sub-template-roll-door.jpg

I first looked for a way to add a field/column to the existing ReadyTheme\Images area but not sure where to do that - or if possible
I tried some Jquery examples I found online to add generate the caption overlay using the alt tag contents but got nothing.

https://davemcmillan.net/use-jquery-to-display-an-image-alt-tag-as-a-caption-overlay/

I also found a cool looking https://captionjs.com/ but not sure how to work that into the ReadyTheme and limit it to those images.

Hopefully someone has a suggestion.

[Matt Zimmermann]

Are the category buttons ReadyTheme images with a link or are you using a navigation set?

[habreu]

ReadyTheme Images with a link.

[Matt Zimmermann]

Since you have access to the ALT tag on the image, with some manipulation, something like this should do the trick: https://codepen.io/influxweb/pen/qpVWNG

[Bruce - PhosphorMedia]

The 'davemcmillan' method (or variant) would be the best way to go in my opinion. What happened when you tried it. It should work with minor tweaks (specifically the id'ing the target "#content img". You'd probably need to add the script to each ReadyTheme container with a unique ID.

Or maybe one of the Mivians could provide a modified version that looped through any image with a class (i.e., .captionMe).

[habreu]

Thank you both. The odd thing is that nothing happens. I tried each of the script solutions script to the head first and then tried it at the bottom of the page but jquery doesn't add the wrap/add/or append html in any test. I just tried wrapping the html like so which works and it is what I'll probably do since it is only 9 buttons. Easy enough to edit the template but mystified on the why.

< figure >< mvt:item name="readytheme" param="image( 'sfnt_promo_left' )" />< figcaption class="caption" >High-Performance Paint & Coatings for Self-Storage< /figcaption >< /figure >

Thanks again.

[Bruce - PhosphorMedia]

That script was made to work with '1' specific entity identified by an ID tag. To do multiples, you'd have to rewrite the script for a foreach loop and use a class tag.

[habreu]

Ah, okay. Thanks. The template edit works works fine but would have been useful to be able to change the text on the fly from the readytheme/images tab.