How can I modify code for different desktop and mobile images?

[patrykp08]

Hey,

so I need some help with amending a piece of code. I’m trying to add an option to upload a different image to desktop and mobile versions of the site in the “Refresh” theme.

I sort of found a solution by @Ninthony in a separate thread - https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/m-p/523193#M133531 but it was to a different section and I cannot find a way to make the styling correct.

I’m trying to amend the image-with-text.liquid section:

I’ve added this part to the {% schema %} tags:

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

And now I should add the below piece of code to the html part

<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>

The problem is that this was meant for a banner and I’m having difficulties amending it so that it matches my section. Here is the original code from my section.

{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
  <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
      <div
        class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %}
          style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
        {% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}
            (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
            (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
          {%- endcapture -%}
          {{
            section.settings.image
            | image_url: width: 1500
            | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="image-with-text__text-item grid__item">
      <div
        id="ImageWithText--{{ section.id }}"
        class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} content-container"
      >
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="image-with-text__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'caption' -%}
              <p
                class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.caption | escape }}
              </p>
            {%- when 'text' -%}
              <div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a
                  {% if block.settings.button_link == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

I would really appreciate it if anyone could provide me with some help on how to amend it correctly to match my section.

[EcomGraduates]

Hello there!

To amend the “image-with-text.liquid” section in your Shopify theme, you’ll need to follow these steps:

1. From your Shopify dashboard, go to “Online Store” and click “Themes”.

2. Click “Actions” and select “Edit Code” to access your theme’s code files.

3. In the left-hand side menu, click on “Sections” to locate the “image-with-text.liquid” file.

4. Click on the “image-with-text.liquid” file to open it in the code editor.

5. Make the desired changes to the code. The “image-with-text.liquid” section typically contains HTML and Liquid code that defines the layout and content of the section, as well as any relevant CSS styles.

6. Preview your changes by clicking “Preview” in the top right corner of the code editor. This will allow you to see how your changes will look on your website before you publish them.

7. Once you’re satisfied with your changes, click “Save” to apply them to your theme.

8. Finally, click “Back to Themes” to return to your theme editor, where you can further customize and configure your theme.

[patrykp08]

I know where to edit the source file, but since the code I’ve provided has been created for a different theme and a different element, I’m having difficulties with matching it to my section.

[Ninthony]

In your code this part is outputting the image:

{{ section.settings.image
  | image_url: width: 1500
  | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
}}

In the image_tag portion of that liquid output you can append a class to it so that you can basically do the same thing as the thread you read. So lets assume you’ve already updated the {% schema %} to add a new mobile image picker and changed the id to mobile_image. You could output it underneath and append the classes like:

{{ section.settings.image
  | image_url: width: 1500
  | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500', class: "hidden_mobile"
}}
{{ section.settings.mobile_image
  | image_url: width: 1500
  | image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500', class: "hidden_desktop"
}}

Then you can show/hide them with css just like in the previous thread