Different images for mobile than desktop web

Solved
Highlighted
Excursionist
26 0 4

Hi @Ninthony ,

I am also trying to do this, but the instructions below do not work, as it will not allow me to save the slideshow.liquid. Can you please help me do this for my website? 

my website is: midnight-fantasy.co.uk and password is: seucau

Kind regards

0 Likes
Highlighted
New Member
3 0 0

Hey ninthony 

wondering if I can hire you to do this for me and how much it would cost? I’m using Atlantic theme 

0 Likes
Highlighted
New Member
1 0 0

Hi Ninthony,

I'm also completely lost about where to place the HTML code. 

Can you please help

Thanks,

Chintan 

0 Likes
Highlighted
New Member
1 0 0

Hi the code worked well for me. I use a slideshow however, would you be able to give me modified code for it? 

It is not clear to me how to send a private message in this forum.

 

Thanks

0 Likes
Highlighted
New Member
1 0 0

Hi @Ninthony 

I was just wondering if you found a solution for using different slideshow images for mobile and desktop for the Minimal theme as mentioned here for @chugsy and @narrawatches. I tried to figure out how to edit the code based on what you gave for other themes in this thread but I couldn't for the life of me figure out where to change the code. I know you've been bombarded with questions on this but any help would be much appreciated. 

0 Likes
Highlighted
Tourist
10 0 2

hi ....

It's the code of the slide show of parallax theme ,,,,, i couldn't bring the mobile version image in the page

{% comment %}
** Slideshow - dynamic **
- Draggable section
- Uses blocks
{% endcomment %}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = section.blocks -%}
{% comment %} End content settings {% endcomment %}

{% if blocks.size > 0 %}
  <section id="homepage_slider-{{ section.id }}" class="flexslider homepage_slider animation--fade {% if section.settings.image_stretch == false %}sixteen columns{% endif %} slider-loading mobile-parallax-enabled--{{ settings.enable_mobile_parallax }} mobile-image-crop-enabled--{{ settings.slideshow_images_crop }}" data-slider-id="homepage_slider-{{ section.id }}" data-slideshow-animation="fade" data-slideshow-speed="{{ section.settings.slideshow_speed}}">
    <ul class="slides">
      {% for block in blocks %}
        {% comment %} Content settings {% endcomment %}
        {%- assign image = block.settings.image -%}
        {% comment %} End content settings {% endcomment %}

        {%- assign text_position = block.settings.text_position | split: ' ' -%}

        <li {{ block.shopify_attributes }} data-block-id="{{ block.id }}">
          <div id="slider-{{ block.id }}" class="slide">
            {% comment %} Overwrite background-position values set by parallax library {% endcomment %}
            {% style %}
              #slider-{{ block.id }} .parallax__container .parallax {
                background-position: {{ block.settings.image_focal_point}} !important;
              }

              #slider-{{ block.id }} .banner__wrap img {
                object-position: {{ block.settings.image_focal_point }};
                -o-object-position: {{ block.settings.image_focal_point }};
              }
            {% endstyle %}

            {% capture i %}{% cycle "1", "2" %}{% endcapture %}

            {% if section.settings.parallax_effect %}
              <div class="parallax__wrap horizontal-text-position--{{ text_position[0] }} vertical-text-position--{{ text_position[1] }}">
                <div class="container banner__text text-align--{{ text_position[0] }}">
                  {% if block.settings.link != blank and block.settings.button_label == blank %}
                    <a href="{{ block.settings.link }}" class="full-link">{{ block.settings.link }}</a>
                  {% endif %}

                  <div class="banner__inner-text">
                    {% if forloop.first == true and block.settings.title != blank %}
                      <h1 class="headline">{{ block.settings.title | escape }}</h1>
                    {% elsif block.settings.title != blank %}
                      <p class="headline">{{ block.settings.title | escape }}</p>
                    {% endif %}

                    {% if block.settings.subtitle != blank %}
                      <div class="subtitle">
                        <p>{{ block.settings.subtitle }}</p>
                      </div>
                    {% endif %}

                    {% if block.settings.button_label != blank %}
                      <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="action_button">{{ block.settings.button_label | escape }}</a>
                    {% endif %}
                  </div>
                </div>

                <div class="parallax" {% if block.settings.image != blank %}data-parallax-image="{{ block.settings.image | img_url: '2048x' }}"{% else %}style="background-image:url({{ 'placeholder.svg' | asset_url  }})"{% endif %}>
                  <noscript>
                    <img src="{{ block.settings.image | img_url: '2000x' }}" alt="{{ alt | escape }}" class="image__fallback">
                  </noscript>
               
                </div>
                   
                <img alt class="mobile-placeholder-svg" src="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ block.settings.image.width }}'%20height='{{ block.settings.image.height }}'></svg>"/>
              </div>
            {% else %}
              <div class="banner__wrap">
                <div class="banner horizontal-text-position--{{ text_position[0] }} vertical-text-position--{{ text_position[1] }}">
                  <div class="container banner__text text-align--{{ text_position[0] }}">
                    {% if block.settings.link != blank and block.settings.button_label == blank %}
                      <a href="{{ block.settings.link }}" class="full-link">{{ block.settings.link }}</a>
                    {% endif %}

                    <div class="banner__inner-text">
                      {% if forloop.first == true and block.settings.title != blank %}
                        <h1 class="headline">{{ block.settings.title | escape }}</h1>
                      {% elsif block.settings.title != blank %}
                        <p class="headline">{{ block.settings.title | escape }}</p>
                      {% endif %}

                      {% if block.settings.subtitle != blank %}
                        <div class="subtitle">
                          <p>{{ block.settings.subtitle }}</p>
                        </div>
                      {% endif %}

                      {% if block.settings.button_label != blank %}
                        <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="action_button">{{ block.settings.button_label | escape }}</a>
                      {% endif %}
                    </div>
                  </div>
                </div>

                {% if block.settings.image != blank %}
                  <div class="banner__image-wrapper">
                    {% render 'image-element',
                            image: block.settings.image,
                            alt: block.settings.image.alt,
                            stretch_width: true
                    %}
                  </div>
                {% else %}
                  <img src="{{ 'placeholder.svg' | asset_url }}"/>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

<style>
  {% if section.settings.parallax_effect %}
    #homepage_slider-{{ section.id }} .parallax__wrap,
    #homepage_slider-{{ section.id }} .parallax__container .parallax {
      height: {{ section.settings.parallax_image_height }}px;
    }
    .flexslider.parallax_effect--true .parallax--mobile img {
      display: block;
    }
  {% endif %}

  @media only screen and (max-width: 798px) {
    {% if settings.slideshow_images_crop or section.settings.parallax_effect and settings.enable_mobile_parallax %}
      #homepage_slider-{{ section.id }} .banner__wrap,
      #homepage_slider-{{ section.id }} .parallax__wrap,
      #homepage_slider-{{ section.id }} .parallax__container .parallax {
        height: {{ section.settings.parallax_image_height | divided_by: 2 }}px;
      }
    {% else %}
      #homepage_slider-{{ section.id }} .banner__wrap,
      #homepage_slider-{{ section.id }} .parallax__wrap {
        height: auto;
      }
    {% endif %}
  }
  .flexslider, .slides, .banner_warp img{
 
    height : 100vh !important;
 
  }
  @media only screen and (max-width: 376px) {
 
    .flexslider, .slides, .banner_warp img {
   
    height: 80vh !important;
     
    }
  }
 
</style>

{% schema %}
  {
    "name": "Slideshow",
    "class": "shopify-section--slideshow slideshow-section under-menu jsSlideshow parallax-banner",
    "max_blocks": 12,
    "settings": [
      {
        "type": "range",
        "id": "slideshow_speed",
        "label": "Change slides every",
        "min": 4,
        "max": 12,
        "step": 1,
        "default": 6,
        "unit": "sec"
      },
      {
        "type": "header",
        "content": "Parallax"
      },
      {
        "type": "checkbox",
        "id": "parallax_effect",
        "label": "Enable parallax scrolling",
        "default": true
      },
      {
        "type": "range",
        "id": "parallax_image_height",
        "label": "Parallax section height",
        "min": 300,
        "max": 1000,
        "step": 20,
        "default": 600,
        "unit": "px"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "1600 x 1000px recommended"
          },
 
{
"type" : "image_picker",
            "id" : "mobile_image",
            "label" : "Mobile Image",
            "info" : "400 x 600px is recommended"
          },

          {
            "type": "select",
            "id": "image_focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view. On mobile, only applies to cropped images.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Your headline here"
          },
          {
            "type": "text",
            "id": "subtitle",
            "label": "Subheading",
            "default": "This is a short subheading for your slideshow image"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "select",
            "id": "text_position",
            "label": "Text position",
            "default": "center center",
            "options": [
              {
                "value": "left top",
                "label": "Top left"
              },
              {
                "value": "center top",
                "label": "Top center"
              },
              {
                "value": "right top",
                "label": "Top right"
              },
              {
                "value": "left center",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "right center",
                "label": "Right"
              },
              {
                "value": "left bottom",
                "label": "Bottom left"
              },
              {
                "value": "center bottom",
                "label": "Bottom center"
              },
              {
                "value": "right bottom",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "image": "",
            "title": "Parallax Shopify Theme",
            "subtitle": "",
            "text_position": "center center",
            "button_label": "",
            "link": ""
          }
        },
        {
          "type": "image",
            "settings": {
            "image": "",
            "title": "",
            "subtitle": "",
            "text_position": "center center",
            "button_label": "",
            "link": ""
          }
        }
      ]
    }]
  }
{% endschema %}

<script data-theme-editor-load-script src="{{ 'jsSlideshow.js' | asset_url }}"></script>

slideshow of parallax theme and i want to add different images for mobile than desktop web can anyone help me.....

0 Likes
Highlighted
New Member
2 0 1
Highlighted
New Member
2 0 0

Hi @Ninthony please could you help? I tried the custom code and it showed in my theme customiser but after I added the images nothing appeared, not even on preview. I am using Debut theme. Please could you provide an updated custom css? My url is mustardinkstudios.myshopify.com, password: beoflo        Thank you!

 

0 Likes
Highlighted
New Member
2 0 0

hello i am trying to do the same thing on the Debut Theme I cant understand where to put what code can you help me?

0 Likes
Highlighted
Tourist
13 0 0

@Ninthony I am trying to add just a mobile or desktop image that would link to a page, I do not need text overlay or slides.

The newest version of Debut uses lazyload to load the image,

 

 {%- if section.settings.image != blank -%}
<img class="hero-fixed-width__image lazyload lazypreload"
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 %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
</div>
{%- else -%}
<div class="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 -%}
{% unless section.settings.image.alt == blank %}
role="img"
aria-label="{{ section.settings.image.alt | escape }}"
data-alt="{{ section.settings.image.alt | escape }}"
{% endunless %}
data-bg="{{ section.settings.image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.alignment }};"
data-image-loading-animation
{%- endif -%}>

 

I tried using code from a previous reply:

 

<style>
.hidden_desktop{
display:block;
}
.hidden_mobile {
display: none;
}
@media (min-width:992px){
.hidden_desktop{
display:none;
}
.hidden_mobile {
display: block;
}
}
</style>

<div class=" hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
data-hero-slide
{{ block.shopify_attributes }}>
{%- if block.settings.image == blank -%}
<div class="placeholder-background">
{%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- else -%}
<noscript>
{%- if forloop.first == true -%}
<div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile"
{%- if forloop.first == true -%}
src="{{ block.settings.image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop"
{%- if forloop.first == true -%}
src="{{ section.settings.mobile_image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ mobile_img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}

{% schema %}


{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

but the images dont show up......

 

I tried 

 

<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</div>
{% endif %}

{% schema %}


{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

Which doesnt use lazy load and for some reason desktop image doesnt show up and mobile shows up for both.

In my case I think my best option is to add an additional section that is very simple, but can't seem to figure it out. Any ideas?

  

 

0 Likes