Shopify Display Alt Image for each Variant

Question

I have variant images in a shopify account, each image has its own alt tag. I want to have the individual alt tags display under each image. If I use the {{ image.alt | escape }}, it just displays one alt name for all the variant images. So if image 01 has "alt 01", and image 02 has "alt 02", and I try to display them on the page, both display "alt 01". Any things on utilizing the images alt fields?

  {% for image in product.images %}
    <li data-thumb="{{ image | product_img_url: 'large' }}" data-title="{{ image.alt | escape }}">
      <a href="{{ image | product_img_url: '1024x1024' }}" class="fancybox" rel="group" title="{{ image.alt | escape }}">
        <img src="{{ image | product_img_url: 'large' }}" alt="{{ image.alt | escape }}" itemprop="image" data-cloudzoom="zoomImage: '{{ image | product_img_url: '1024x1024' }}', tintColor: '{{ settings.shop_bg_color }}'" class="cloudzoom" /><br />
        {{ image.alt | escape }}
      </a>
    </li>
  {% endfor %}

Answer 1

Make sure you have provided alt tags for each of the images in the Products page of the Admin.

See here:

I tested your code, and when alt tags are not set it outputs the product title under each image. After entering alt text for each image (from the Products page in the Admin area), your snippet worked as expected and outputted the corresponding alt tag under each product image.