Help displaying Image alt text on a product gallery image

Highlighted
New Member
3 0 0

Hi, I would like to use the product image Alt text to display a caption over the product image.

Here is the code I have in my product-images.liquid file
<div class="image_alt_text"> {{product.title}} - {{image.alt}} </div>

The product title is being displayed perfectly, but I can not seem to get the alt tag to display. I tried a number of other placeholder objects, with some working, and others not.

Can someone enlighten me on what I may be doing wrong? Am i missing something crucial to make this work?

I will post the full page code below....

Thanks for your help!!!

---------------------------------------------------------------------

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%- unless product.empty? -%}
<div
data-product-images
data-zoom="{{ settings.product_zoom_enable }}"
data-has-slideshow="true">
<div class="product__photos product__photos-{{ section_id }} product__photos--{{ thumbnail_position }}">

<div class="product__main-photos" data-aos data-product-single-media-group>
<div id="ProductPhotos-{{ section_id }}">
{%- for media in product.media -%}
{%- include 'media',
media: media,
featured_media: featured_media,
isModal: isModal,
video_looping: video_looping,
video_style: video_style
-%}
{%- endfor -%}
</div>

{% assign first_3d_model = product.media | where: 'media_type', 'model' | first %}

{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title }}"
data-shopify-xr-hidden
>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-3d" viewBox="18.24 17.35 24.52 28.3"><path fill="#3A3A3A" d="M30.5 17.35l-12.26 7.07v14.16l12.26 7.07 12.26-7.08V24.42L30.5 17.35zM20.24 37.42V25.58l10.26-5.93 10.13 5.85-10.13 5.88v12l-10.26-5.96z"/></svg>
<span class='product-single__view-in-space-text'>
{{ 'products.product.view_in_space' | t }}
</span>
</button>
{%- endif -%}

<div class="product__photo-dots product__photo-dots--{{ section_id }}"></div>
</div>
<div class="image_alt_text"> {{product.title}} - {{image.alt}} </div>
<div
id="ProductThumbs-{{ section_id }}"
class="product__thumbs product__thumbs--{{ thumbnail_position }} product__thumbs-placement--{{ image_position }} {% if product.media.size == 1 %} medium-up--hide{% endif %} small--hide"
data-position="{{ thumbnail_position }}"
data-arrows="{{ thumbnail_arrows }}"
data-aos>

{%- if product.media.size > 1 -%}
{%- for media in product.media -%}
<div class="product__thumb-item"
data-index="{{ forloop.index0 }}">
<div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: media.preview_image.aspect_ratio }}%;">
<a
href="{{ media.preview_image | img_url: product_zoom_size }}"
class="product__thumb product__thumb-{{ section_id }} js-no-transition"
data-index="{{ forloop.index0 }}"
data-id="{{ media.id }}">
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__thumb-icon">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
</span>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<span class="product__thumb-icon">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-3d" viewBox="18.24 17.35 24.52 28.3"><path fill="#3A3A3A" d="M30.5 17.35l-12.26 7.07v14.16l12.26 7.07 12.26-7.08V24.42L30.5 17.35zM20.24 37.42V25.58l10.26-5.93 10.13 5.85-10.13 5.88v12l-10.26-5.96z"/></svg>
</span>
{%- endif -%}

{%- assign img_url = media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="animation-delay-{{ forloop.index | times: 3 }} lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ media.preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ media.alt | escape }}">
</a>
</div>
</div>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</div>

<script type="application/json" id="ModelJson-{{ section_id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{%- else -%}
<div class="product__photos product__photos-{{ section_id }}">
<div class="product__main-photos" style="width: 100%">
<div id="ProductPhotos-{{ section_id }}">
<div data-index="{{ forloop.index0 }}">
<a href="#">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</a>
</div>
</div>
</div>
</div>
{%- endunless -%}



0 Likes
Highlighted
Shopify Partner
7 1 0

try adding |  t to the img alt.

{{ image.alt | t }}

https://shopify.dev/tutorials/develop-theme-localization-use-translation-keys

0 Likes
Highlighted
New Member
3 0 0

Unfortunately this didnt work.

0 Likes