Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

alt attribute not set for media.preview_image with image_tag filter #1786

Open
mh-zwave opened this issue Feb 6, 2024 · 1 comment
Open

Comments

@mh-zwave
Copy link

mh-zwave commented Feb 6, 2024

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

@yamunaprasath
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants