Overlay Alt-Text on product image in Dawn 15

Shopify Discussion
1

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!

community_image.jpg
community_image.jpg1342×906 145 KB

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!

1 Like
2

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
%}

{{ media.alt | escape }}

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

1 Like
3

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

1 Like
4

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!

1 Like