How to set different images in slideshow for mobile & desktop in Supply theme?

NielsSchutte
Explorer
167 2 9

Hi,

I'm looking to set 2 different images in my slideshow, one for mobile and one for desktop. Currently is as follows:

Desktop:

 

Naamloos.png

 

Mobile:


Naamloos.png

 

As you can see the resolution is fine for desktop version but not good for mobile version, therefore I'm trying to set different images for mobile/desktop. Is there a easy way to do this? My website url: smartsnutrition.myshopify.com and pass is plazay.

Hope someone can help!

Niels

0 Likes

Hello @NielsSchutte,

If you want to set different images in slideshow for mobile & desktop,You have to add schema in slideshow.liquid file.

You cann refer below link

https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522... 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
NielsSchutte
Explorer
167 2 9

Hey,

I've followed the tutorial and I've finished the JSON part. After this I need to give classes to my "img" tags but I dont know which ones, heres my liquid code of slider:

<hr>
<div class="flexslider" id="heroSlider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-slider-home-auto="{{ section.settings.slider_home_auto }}" data-slider-home-rate="{{ section.settings.slider_home_rate }}">
  <ul class="slides">
    {% for block in section.blocks %}
      <li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
        {% if block.settings.slide != blank %}
          {% if block.settings.link %}
            <a href="{{ block.settings.link }}" class="slide-link">
          {% endif %}
            {%- assign image = block.settings.slide -%}
            {%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = 2000 -%}
            {%- assign max_height = 1500 -%}

            {%- include 'image-logic' with width: max_width, height: max_height -%}

            {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
              <div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                <img
                  class="lazyload js {% if forloop.index > 1%}lazypreload{% endif %}"
                  src="{{ image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}">
              </div>
            </div>

            <noscript>
               <img src="{{ image | img_url: '580x' }}"
                srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                alt="{{ image.alt }}" style="opacity:1;">
            </noscript>
            {% comment %}<img src="{{ image | img_url: '1024x' }}"
            srcset="{{ image | img_url: '1024x' }} 1x, {{ image | img_url: '1024x', scale: 2 }} 2x" alt="{{ image.alt }}">{% endcomment %}

          {% if block.settings.link %}
            </a>
          {% endif %}

        {% else %}
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {% capture svg_tag_class %}placeholder-noblocks slide-link slide-link--{{ block.id }}{% endcapture %}
          {%- assign placeholder = 'placeholder-lifestyle-' | append: current -%}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: svg_tag_class }}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>

 

 

Where do I need to set "img-responsive hidden_mobile" and "img-responsive hidden_desktop"?

Niels

0 Likes
FX2000
Tourist
9 0 3

Hi, I need to insert a different image only on my mobile version in turbo theme slideshow, can you help me? 

This is my website, you can see that in the mobile version the slideshow is small and you cant see what it says!

sprintmama.com 

I tried to use various tips in the community, but since i dont have the asset theme.scsss.liquid I dont know where to put my new code or the pieces the online tips given to me.

Can you help me please?

0 Likes