Shopify / Shopify/liquid

alt attribute not set for media.preview_image with image_tag filter

Open
#1,786 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied Liquid template using media.preview_image with image_tag and no explicit alt value. Trace the image_tag filter implementation to find why the documented fallback is omitted, then verify that the output contains alt="fallback text" rather than a valueless alt attribute.

Written by the indexing model from the issue text.

Assessment

Tech stack
ruby
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.