Different images for mobile than desktop web

Solved
Tourist
5 0 0

Hello,

 

I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?

 

I currently am using a custom theme - does this determine where I need to be looking to add the code?

 

Thanks in advance!

Nooreen

 

0 Likes
Astronaut
765 80 155

Your question is a little vague. You'll need to have both of the images coded into wherever you want to add them, give them class names, and then use media queries to hide them and show them based on the screen width. For instance:

 

<style>
.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="path-to-your-mobile-image.jpg">
</div>
<div class="desktop-image">
<img src="path-to-your-desktop-image.jpg">
</div>
</div>

This is a mobile first approach, mobile styles will load before the media queries that are looking at screen widths above 992 pixels. If it's less than 992px, mobile is displayed and desktop is hidden, if greater desktop is displayed and mobile is hidden.

 

As for where you add the code, that depends on where you want it to show up. Home page, collection page, blog page, a page, product page, etc. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
5 0 0

Thank you very much for your response - I am understanding the basic concept of this but just figuring out where to place code. 

 

Would that first bit (within the <style> </style> section)  be entered into the theme.liquid file? In the theme I am using, the images that I'm trying to apply this too are called 'banners' and there is also two 'banner-liquid' files (one within Sections, and one within Snippets), so I'm unsure if it should go within one of those. 

 

I have a feeling I need to add in the Sections banner-liquid file, is this right? The code for this currently is:

<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "Vela Banner",
"class": "velaFramework",
"settings": [
{
"type": "header",
"content": "Design Block"
},
{
"type": "checkbox",
"id": "full_with",
"label": "Enabel Full Width?"
},
{
"type": "text",
"id": "margin_block",
"label": "Margin",
"placeholder": "0px 0px"
},
{
"type": "text",
"id": "padding_block",
"label": "Padding",
"placeholder": "0px 0px"
},
{
"type": "header",
"content": "General Settings"
},
{
"type": "text",
"id": "image_size",
"label": "Image Size",
"info": "Image Size is required."
},
{
"type": "text",
"id": "link",
"label": "Image Link"
},
{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "select",
"id": "effect",
"label": "Effect",
"default": "effectOne",
"options": [
{
"value": "effectOne",
"label": "Effect one"
},
{
"value": "effectTwo",
"label": "Effect two"
}
]
}
],
"presets": [
{
"name": "Vela Banner",
"category": "4. Vela Image"
}
]
}
{% endschema %}

 

 

 

 

And then the other bit you mentioned (starting with <div class="image container">) - should that be entered in the locations where I want the specific images to be placed? If so, I'm struggling to find the 'homepage' within the 'Edit Code' section in my code where the 'banners' are currently.... is it normally in the 'templates', 'sections' .?

 

 

Appreciate any further help!

0 Likes

Success.

Astronaut
765 80 155

It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.

 

Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:

{{ section.settings.link }}

 stuff is referring to all the options in your customize editor.  All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.

 

First go into your {% schema %} tags and look for this portion:

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},

Copy that and paste it below it and change the ID to "mobile_image":

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

Be sure to keep the comma after the closing curly bracket. 

 

Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags  a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:

 

<style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>

Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot.  Let me know how it turns out.

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
5 0 0

Oh my gosh, Ninthony - this has worked even better than I hoped! I thought I'd have to manually add the alternative images in the code each time, but the way you've done it is I can do it via the Customize visual editor - which makes it so simple. Also your explanations have helped me to make sense of it and learn. THANK YOU for your kind help and effort in answering my question, it's really appreciated.

At the risk of being 'greedy', would I be able to ask how you would suggest to add a similar configurable item to the 'Customize visual editor' where I can add text over an image? Right now I've basically written my text into the images before uploading, which I totally know is not the right way to handle it! If it's complicated, no worries, you've helped me already a lot.

0 Likes
Astronaut
765 80 155

It's not a problem, Im glad it helped. The logic for words over text depends on the element's "position" as defined in CSS. Take for instance:

 

https://codepen.io/ninthony/pen/arrrEz

 

You have a container element, an image, and some content. You set the image-content-container's position to relative and display: inline-block, and the content's position to absolute. Since the content is a CHILD of the container, when content's position is set to absolute it's position is RELATIVE to it's container. So you see in the css the styles "top: 20px", "right: 10px" -- That means 20px from the top of the container, and 10px from the right. Also, the container is set to inline-block. If you change this to block you can see the difference. Block level elements span the entire width of their screen (or their container, if they are inside one smaller than the screen), where as inline-block will match their content. 

 

You can apply similar logic to what we did earlier to your {% schema %} by adding another text field with a different id like "banner-content" and changing it's type to text instead of image picker. Then do something like:

 

{% if section.settings.banner-content != blank %}
<div class="banner-content">{{ section.settings.banner-content }}</div>
{% endif %}

Give the banner-content similar style and it's container similar styles to the codepen. Try making a couple examples in codepen yourself with the relative and absolute positioning to get a hang on how you do it. If you have any questions you can send me a direct message on here, but you'll have to enable it in your profile.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
5 0 0
Thank you again Ninthony, I will have a go using these guidelines this evening. I’ll let you know how I get on :)
0 Likes
New Member
7 0 0

Idk how to delete a post but this one had an error in the code. Reposted updated version

0 Likes
New Member
7 0 0

Hi. I'm trying to implement this in my theme (Debut). The only issue I'm having is on mobile I want a portrait image and on desktop a landscape image. But I can't figure out how to make the mobile image resize to portrait.

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}">
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             src="{{ section.settings.image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hidden_mobile hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="hidden_mobile placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
        {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
      
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
      
<div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.mobile_image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}">
      {%- assign img_url = section.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.mobile_image.width < max_width -%}
        {%- assign slide_width = section.settings.mobile_image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      {%- if section.settings.mobile_image != blank -%}
        <img class="hero-fixed-width__image lazyload lazypreload"
             src="{{ section.settings.mobile_image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.mobile_image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.mobile_image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hidden_desktop hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.mobile_image -%}
         data-bgset="{% include 'bgset', mobile_image: section.settings.mobile_image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.mobile_image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.mobile_image == blank -%}
      <div class="hidden_desktop placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": {
    "da": "Billede med tekstoverlejring",
    "de": "Foto mit überlegtem Text",
    "en": "Image with text overlay",
    "es": "Imagen con texto",
    "fi": "Kuva päällä olevalla tekstillä",
    "fr": "Image avec texte",
    "hi": "पाठ ओवरले के साथ इमेज",
    "it": "Immagine con testo",
    "ja": "テキストオーバーレイ付き画像",
    "ko": "텍스트 오버레이 포함 이미지",
    "ms": "Imej dengan tindanan teks",
    "nb": "Bilde med tekstoverlegg",
    "nl": "Foto met tekstoverlay",
    "pt-BR": "Imagem com texto",
    "pt-PT": "Imagem com sobreposição de texto",
    "sv": "Bild med textöverlagring",
    "th": "การวางซ้อนรูปภาพพร้อมข้อความ",
    "zh-CN": "带文本叠加的图片",
    "zh-TW": "附文字疊加的圖片"
  },
  "class": "index-section index-section--flush",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": {
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      }
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": {
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      }
    },

I've learned a lot reading this thread. Thank you so much for your thorough help

0 Likes
New Member
7 0 0

I also added this to my bgset.liquid file. (not sure if it matters, just trying everything I can think of)

{%- if image != blank -%}
    {% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {% if image.width > 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %}
    {{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h
{%- endif -%}
{%- if mobile_image != blank -%}
    {% if mobile_image.width > 180 %}{{ mobile_image | img_url: '180x' }} 180w {{ 180 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 360 %}{{ mobile_image | img_url: '360x' }} 360w {{ 360 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 540 %}{{ mobile_image | img_url: '540x' }} 540w {{ 540 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 720 %}{{ mobile_image | img_url: '720x' }} 720w {{ 720 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 900 %}{{ mobile_image | img_url: '900x' }} 900w {{ 900 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 1080 %}{{ mobile_image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 1296 %}{{ mobile_image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 1512 %}{{ mobile_image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 1728 %}{{ mobile_image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 1950 %}{{ mobile_image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 2100 %}{{ mobile_image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 2260 %}{{ mobile_image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 2450 %}{{ mobile_image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 2700 %}{{ mobile_image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 3000 %}{{ mobile_image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 3350 %}{{ mobile_image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 3750 %}{{ mobile_image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {% if mobile_image.width > 4100 %}{{ mobile_image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %}
    {{ mobile_image | img_url: 'master' }} {{ mobile_image.width }}w {{ mobile_image.height }}h
{%- endif -%}

And I {think} I've narrowed it down to the top portion of the hero.liquid file. Whenever I remove the middle if's it helps with sizing, but not completely. Also, I added the style to the theme.scss.liquid file instead of the html.

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
0 Likes