DAWN Theme: different picture for PC and Mobile

[okw_mamba]

There is one really good solution by @LitCommerce available but unfortunately the quality of the banner declines after implementing it. Does someone have a fix?

[LitCommerce]

Hi @okw_mamba,

Can you describe it, I will help you check it

[LitCommerce]

Hi @okw_mamba,

Go to sections > image-banner.liquid file and change code here:

Code for image 1:

<img
        srcset="{{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
        src="{{ section.settings.image | img_url: 'master' }}"
        loading="lazy"
        alt="{{ section.settings.image.alt | escape }}"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
        {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
      >

Code for image 2:

<img
        srcset="{{ section.settings.image_2 | img_url: 'master' }} {{ section.settings.image_2.width }}w"
        src="{{ section.settings.image_2 | img_url: 'master' }}"
        loading="lazy"
        alt="{{ section.settings.image_2.alt | escape }}"
        width="{{ section.settings.image_2.width }}"
        height="{{ section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio }}"
        {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}
      >

Hope it helps!

[okw_mamba]

Hi, thanks for the code. Is that to be combined with the code from your previous answer?

[LitCommerce]

Hi @okw_mamba,

Yes, it will combine with my previous answer.