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&width=200" alt srcset=<url>.jpg?v=1706541167&width=200 200w" width="200" height="200">
expected output:
<img src="<url>.jpg?v=1706541167&width=200" alt="fallback text" srcset=<url>.jpg?v=1706541167&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:
- Go to your dashboard.
- Navigate to content.
- Select Files.
- Locate your image.
- Click on view.
Here, you can add the “alt text” for that image.