Overlay Alt-Text on product image in Dawn 15

[AndyGoble]

Hi - I'm looking to dynamically overlay text on the product pictures on my product page as per the mock up image below. Ideally I'm going to pick the text up from the Alt Text of the image so that each image can have unique text. My theme is Dawn 13. I've been scouring all the community questions & answers all day but I can't find an ideal solution. Presumably I need some code on main-product.liquid incorporating {{ media.alt | escape }}. Beyond that I'm lost!

You can see this page at https://publicdomainimagelibrary.dev/products/butterfly-babies-1914-ross-marion-t-penny-1881-1937 Password is pdilstuff

Thanks for looking!

[AndyGoble · Accepted solution]

Thanks for your help. The code that you suggest I look for in main-product.liquid doesn't exist however I found something similar in product-media-gallery.liquid. I added your suggested  overlay-text div under the second render 'product-thumbnail' and it works great!

{% render 'product-thumbnail',
media: media,
media_count: media_count,
position: media_position,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: lazy_load
%}
<div class="overlay-text" style="position: absolute; bottom: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 3px;">
{{ media.alt | escape }}
</div>

Thanks for your help - you got me most of the way!

[AndyGoble · Accepted solution]

Thanks for your help. The code that you suggest I look for in main-product.liquid doesn't exist however I found something similar in product-media-gallery.liquid. I added your suggested  overlay-text div under the second render 'product-thumbnail' and it works great!

{% render 'product-thumbnail',
media: media,
media_count: media_count,
position: media_position,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: lazy_load
%}
<div class="overlay-text" style="position: absolute; bottom: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 3px;">
{{ media.alt | escape }}
</div>

Thanks for your help - you got me most of the way!

[AndyGoble]

Unfortunately it's not so good on mobile. All the Alt tags appear on the first image!

[AndyGoble · Accepted solution]

Thanks for your help (again). It didn't quite work, however the following did...

@media screen and (max-width:768px)
li.product__media-item {
position: relative !important;
}}

You saved me twice today!