theme-check-disable does not work for ImgWidthAndHeight

[dzschille]

In snippets/product-card-list.liquid i have

<div class="list-view-item__image-wrapper product-card__image-wrapper">
      {% comment %}theme-check-disable{% endcomment %}       <--- works
      {% unless product.featured_media == null%}
      {% comment %}theme-check-enable{% endcomment %}
        {% comment %}theme-check-disable{% endcomment %}     <---- does not work
        <img class="list-view-item__image" src="{{ product.featured_media | img_url: '95x95', scale: 2 }}" alt="{{ product.featured_media.alt }}">
        {% comment %}theme-check-enable{% endcomment %}
      {%endunless%}
</div>

When i run theme-check . i still get for this file this error:

snippets/product-card-list.liquid:23: error: ImgWidthAndHeight: Missing width and height attributes.
	<img class="list-view-item__image" src="{{ product.featured_media | img_url: '95x95', scale: 2 }}" alt="{{ product.fe...

[charlespwd]

Thanks for the bug report! Looks like a bug in the disable/enable logic for regex based checks.

In the meantime, you should be able to do the following to prevent layout shift in your theme:

<img 
  class="list-view-item__image" 
  src="{{ product.featured_media | img_url: '95x95', scale: 2 }}" 
  alt="{{ product.featured_media.alt }}"
  width="95" 
  height="95"
/>

[dzschille]

Thank @charlespwd , but hardcode the width and height in this case seems risky to me because img_url preserves the original aspect ratio. So when the original image is not a square the result would look distorted. Or am i missing something?

[charlespwd]

In this case, I believe featured_media.width + height would do!

<img 
  class="list-view-item__image" 
  src="{{ product.featured_media | img_url: '95x95', scale: 2 }}" 
  alt="{{ product.featured_media.alt }}"
  width="{{ product.featured_media.width }}" 
  height="{{ product.featured_media.height }}"
/>

Side note: That's what I actually put in before the edit 😅. I saw 95x95 and forgot about that the AR is maintained. I'm more used to the img_url: '95x' syntax when you want to maintain the aspect-ratio.

[charlespwd]

Fixed in 0.8.1.

brew update
brew upgrade theme-check