Shopify / liquid

Liquid markup language. Safe, customer facing template language for flexible web apps.

Home Page:https://shopify.github.io/liquid/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

alt attribute not set for media.preview_image with image_tag filter

mh-zwave opened this issue · comments

Hello
I have found an bug when using the media.preview_image
with the filter image_tag. If no alternative text is set for the image, the fallback does not work as described in the documentation.

{{ media.preview_image | image_url: width: 200 | image_tag: loading: 'lazy' }}

output:
<img src="<url>.jpg?v=1706541167&amp;width=200" alt srcset=<url>.jpg?v=1706541167&amp;width=200 200w" width="200" height="200">

expected output:
<img src="<url>.jpg?v=1706541167&amp;width=200" alt="fallback text" srcset=<url>.jpg?v=1706541167&amp;width=200 200w" width="200" height="200">

workaround:
{{ media.preview_image | image_url: width: 200 | image_tag: loading: 'lazy', alt: media.tag }}

Hi [mh-zwave],

For documentation purposes, you can utilize the “alt” attribute as follows:

{{ product | image_url: width: 200 | image_tag: alt: "My image's alt text" }}

If you prefer to add the alt attribute without using a Liquid filter, you can follow this method:

  1. Go to your dashboard.
  2. Navigate to content.
  3. Select Files.
  4. Locate your image.
  5. Click on view.
    Here, you can add the “alt text” for that image.

alt