[FIXED] How to add image attributes on .liquid (shopify)

Issue

Hi there community i'm fixing code from my theme, and i have some issues with it, wish anyone can help me,

this code shows that fail:

Missing width and height attributestheme-checkImgWidthAndHeight

https://github.com/Shopify/theme-check/blob/main/docs/checks/img_width_and_height.md

How can i add this attributes to that part of code?

<div class="about-banner__image-2">
                {% if block.settings.image_2 != blank %}
                <noscript>
                  <img src="{{ block.settings.image_2 | img_url: '600x' }}" loading="lazy" alt="{{ block.settings.image_2.alt }}" class="image-content__image">
                </noscript>
                <div class="image-content__image-container">
                  <div class="image-content__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_2.aspect_ratio | times: 100}}%;">
                    {% assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="image-content__image"
                         loading="lazy"
                         src="{{ block.settings.image_2 | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                         data-aspectratio="{{ block.settings.image_2.aspect_ratio }}"
                         data-sizes="auto"
                         alt="{{ block.settings.image_2.alt | escape }}">
                  </div>
                </div>
                {% else %}
                <div class="image-content__image">
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
                {% endif %}
              </div>

thanks to anyone!

Solution

It is not necessary to use liquid, but you can simply add a filter attributes like this:

{{ settings.favicon | image_url: width: 200 | image_tag: alt: 'My favicon', srcset: nil, class: 'css-class-1 css-class-2' }}

Notice the last filter syntax is ... | image_tag: att1: 'value1', att2: 'value2' Here, you can use attribute names like width and height, just like you would do in HTML.

don't confuse '| image_url width: 200'filter, this is how you tell Shopify to render an image in a certain resolution.

Learn more about the liquid image tag here

Answered By - k-million

Answer Checked By - Robin (PHPFixing Admin)