Shopify / Shopify/theme-tools

Check the width against the srcset values

Open
#406 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:theme-check enhancement good first issue
Dominant language
TypeScript
Stars
234
Forks
92
Avg merge
1d 3h
Merged PRs (30d)
6

Description

Is your feature request related to a problem? Please describe.

When you output an image like this:

{{ section.settings.image_2 | image_url: width: 3840 | image_tag:
      loading: 'lazy',
      width: section.settings.image_2.width,
      height: image_height_2,
      class: image_class_2,
      sizes: sizes,
      widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
      alt: section.settings.image_2.alt | escape
 }}

The image_url: width: value is going to limit the what widths you can output/generate. So ideally the image_url: width: value should be similar to the highest value declared in the widths:.

Describe the solution you'd like

There could be a warning showing up when the value is different or lower 🤔

Describe alternatives you've considered

Manual checking 😅

Additional context

This is something we ran into in Dawn. We realized we were using 1500 on the image banner image and it would never output an image bigger than 1500 despite having some widths set up to 3840.

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

No files, tests, or entry points are named in the issue. Start by locating the validation for image_url and image_tag arguments, then determine how warnings are surfaced; done means warning when image_url width is lower than the largest declared widths value.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.