Different images for mobile than desktop web

Solved
mhkh
Excursionist
18 0 2

@Ninthony 

Hi, I wondered if you're able to help out here?

I tried following your instructions and have run into a problem implementing the second part. I was able to implement the first part which enables me to add a secondary image, however, I could not follow from <style>. Therefore, I am not able to apply one image to the desktop version and the second to the mobile version.

 

This is the code I currently have showing in index-hero.liquid section:

<!-- /sections/index-hero.liquid -->

{%- if section.settings.image -%}
{%- assign img_object = section.settings.image -%}
{%- assign img_small = section.settings.image | img_url: '18x' -%}
{%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- else -%}
{%- assign img_object = 'blank.svg' | asset_url -%}
{%- assign img_small = 'blank.svg' | asset_url -%}
{%- assign img_api = 'blank.svg' | asset_url -%}
{%- endif -%}
{%- assign transparency_class = '' -%}
{%- if section.settings.transparent or section.settings.button_image -%}
{%- assign transparency_class = 'hero__content--transparent' -%}
{%- endif -%}

<div class="index-hero wide-image {{ section.settings.text_color }} {{ section.settings.height }}"
data-section-id="{{ section.id }}"
data-section-type="hero"
id="FeaturedImage-{{ section.id }}"
{%- if section.settings.parallax -%}
data-parallax-src="{{ img_small }}"
data-parallax-alt="{{ section.settings.image.alt | default: section.settings.title }}"
data-src="{{ img_api }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
{%- endif -%}>
{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
<a href="{{ section.settings.link }}">
{% endif %}
<div class="hero__content__wrapper {{ section.settings.flex_align }} {{ transparency_class }}">
<div class="hero__content" data-aos="fade-up">
{% if section.settings.button_image %}
{%- assign img_button = section.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ section.settings.link }}" class="button-image">
<img class="lazyload image--flex"
alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}"
src="{{ section.settings.button_image | img_url: '180x' }}"
data-src="{{ img_button }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.button_image.aspect_ratio }}"
data-sizes="auto"/>
</a>
{% else %}
{% unless section.settings.title == '' %}
<h1 class="hero__title"
data-aos-duration="500"
data-aos="fade-up">
{{ section.settings.title | escape }}</h1>{% endunless %}
{% unless section.settings.description == '' %}
<p class="hero__description h5--body"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="100">
{{ section.settings.description }}
</p>
{% endunless %}
{% unless section.settings.link_text == '' %}
<a class="hero__btn btn btn--large btn--secondary caps"
href="{{ section.settings.link }}"
data-aos="fade-up"
data-aos-duration="700"
data-aos-delay="200">
{{ section.settings.link_text | escape }}
</a>
{% endunless %}
{% endif %}
</div>
</div>
{% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>

{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
alt="{{ section.settings.image.alt | default: section.settings.title }}"
src="{{ img_small }}"
data-src="{{ img_api }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% endif %}

{% if section.settings.parallax == false and section.settings.height != 'image-height' %}
<div class="background-size-cover lazyload" data-bgset="{% render 'bgset', image: img_object %}"></div>
{% endif %}

{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
</a>
{% endif %}

<noscript>
<img src="{{ section.settings.image | img_url: '1440x' }}" alt="{{ section.settings.image.alt | default: section.settings.title }}" class="responsive-wide-image"/>
</noscript>
{% if section.settings.button_image %}
<noscript>
<div class="flex--centered"><a href="{{ section.settings.link }}" class="button-image"><img src="{{ section.settings.button_image | img_url: '540x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" /></a></div>
</noscript>
{% endif %}
</div>

{% schema %}
{
"name": "Image with text overlay",
"class": "section-fullscreen",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Image mobile"
},
{
"type": "checkbox",
"id": "parallax",
"default": false,
"label": "Enable parallax scroll"
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-two-thirds",
"options": [
{ "value": "screen-height-full", "label": "Full screen height"},
{ "value": "screen-height-three-quarters", "label": "3/4 of screen"},
{ "value": "screen-height-two-thirds", "label": "2/3 of screen"},
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "seven-fifty-height-hero", "label": "750px" },
{ "value": "sixty-fifty-height-hero", "label": "650px" },
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"min": 0,
"max": 90,
"step": 5,
"unit": "%",
"default":15
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text overlay"
},
{
"type": "textarea",
"id": "description",
"label": "Subheading",
"default": "Tell your brand's story through images."
},
{
"type": "select",
"id": "flex_align",
"label": "Block alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-light",
"options": [
{ "value": "text-light", "label": "White"},
{ "value": "text-dark", "label": "Dark"}
]
},
{
"type": "checkbox",
"id": "transparent",
"label": "Transparent background",
"default": true
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products",
"info": "Leave blank to link entire image"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "header",
"content": "Button image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Button image",
"info": "Transparent .png recommended "
}
],
"presets": [
{
"name": "Image with text overlay",
"category": "Image"
}
]
}
{% endschema %}

 

With my current theme settings, I am able to set the image to full screen, 3/4 screen, 2/3 screen, 1/2 screen, 1/3 screen. I would like to be able to apply the same options to the second image for mobile.

I understand that I will also need to amend the second part of the code from <style> to correlate with my theme and wondered if you can help?

Any help here would be greatly appreciated - thanks in advance!

0 Likes
AlixTB
New Member
1 0 0

Hi There

This is super useful! Where did you paste this code to remove the padding? Just at the end of the code listed above?

Thanks

Alix

0 Likes
mhkh
Excursionist
18 0 2

Hi Alix,

This code is pasted in the 'section'. In my case, the section is called 'index-hero.liquid'.

Not sure if this answers your question?

K

 

 

0 Likes
Joshua28
Excursionist
13 0 6

Hi this code for for me!!

How to add text and button on the image for both desktop and mobile?

0 Likes
imado
New Member
2 0 0

Just a quick question, Where did you put this code?

0 Likes
imado
New Member
2 0 0

@KrazyGear just a quick question, where exactly did you put this code? 

.template-index main.main-content{
margin-top: -100px;

0 Likes
mhkh
Excursionist
18 0 2

Hi @imado,

I added the code I shared in the hero section.

In my case the section is called "index-hero.liquid"

 

I hope this helps!

0 Likes
rhino-direct
New Member
1 0 0

Anyone could help me?  I do not know how to change to the mobile version with my code. 

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




<div class="index-section" data-section-id="{{ section.id }}">

  {% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row">{% endif %}
  <div class="homepage-section gallery row no-fouc">
    {% for block in section.blocks %}
    {% case block.settings.image_width %}
    {% when '25%' %}
    {%- assign image_size = '500x' -%}
    {%- assign image_width = 'desktop-3 tablet-fourth' -%}
    {% when '33%' %}
    {%- assign image_size = '500x' -%}
    {%- assign image_width = 'desktop-4 tablet-2' -%}
    {% when '50%' %}
    {%- assign image_size = '800x' -%}
    {%- assign image_width = 'desktop-6 tablet-3' -%}
    {% when '66%' %}
    {%- assign image_size = '1200x' -%}
    {%- assign image_width = 'desktop-8 tablet-two-thirds' -%}
    {% when '75%' %}
    {%- assign image_size = '1200x' -%}
    {%- assign image_width = 'desktop-9 tablet-three-quarter' -%}
    {% when '100%' %}
    {%- assign image_size = '1920x' -%}
    {%- assign image_width = 'desktop-12 tablet-6' -%}
    {% endcase %}

    {%- assign img_url = block.settings.image | img_url: image_size -%}
    <div class="homepage-promo {% if section.settings.full_width and block.settings[image_size] == '100%' %} centered{% endif %} {{ image_width }} mobile-3 promo-{{ block.id }}" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
        {% if block.settings.image != blank %}
          {% include 'basic-responsive-image', type: block.settings.image %}
          <noscript>
            <img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}">
          </noscript>
        {% else %}
        <div class="onboard">
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
        {% endif %}
        <div class="caption">
          {% if block.settings.heading_text != blank %}
          <h3>{{ block.settings.heading_text | escape }}</h3>
          {% endif %}
          {% if block.settings.hidden_text != blank %}
          <p>{{ block.settings.hidden_text | escape }}</p>
          {% endif %}
        </div>
      {% if block.settings.link != blank %}</a>{% endif %}
    </div>

    <style>
      .homepage-promo.promo-{{ block.id }} .caption h3 {
        color: {{ block.settings.promo_color }};
        font-size: {{ section.settings.promo_size }}px;
      }
      .homepage-promo.promo-{{ block.id }} .caption p {
        color: {{ block.settings.hidden_color }};
        font-size: {{ section.settings.hidden_size }}px;
      }
      #shopify-section-{{ section.id }} .homepage-promo .promo-inner h3 {
        font-size: {{ section.settings.promo_size }}px;
      }

      #shopify-section-{{ section.id }} .homepage-promo .promo-inner p {
        font-size: {{ section.settings.hidden_size }}px;
      }
    </style>

    <style>
      .promo-{{ block.id }} .promo-inner { float: none; }
    </style>

    {% endfor %}
  </div>
  {% if section.settings.full_width %}</div></div>{% endif %}

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}

</div>


<div class="clear"></div>

{% schema %}
{
    "name": "Gallery",
	   "max_blocks": 6,
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Enable full width",
        "default": false
	  },
    {
      "type": "range",
      "id": "promo_size",
      "min": 0,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 20
    },
    {
      "type": "range",
      "id": "hidden_size",
      "min": 0,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Subheading size",
      "default": 13
    }
  ],
	"blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "image_picker",
          "id": "mobile-image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "image_width",
          "label": "Container width",
          "default": "33%",
          "options": [
		        {
               "value":"25%",
               "label":"25%"
            },
            {
               "value":"33%",
               "label":"33%"
            },
            {
               "value":"50%",
               "label":"50%"
            },
            {
               "value":"66%",
               "label":"66%"
            },
            {
               "value":"75%",
               "label":"75%"
            },
            {
               "value":"100%",
               "label":"100%"
            }
          ]
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        },
       {
        "type": "text",
        "id": "heading_text",
        "label": "Heading",
        "default": "Our collections"
       },
       {
        "type": "text",
        "id": "hidden_text",
        "label": "Subheading",
        "default": "Shop now",
        "info": "Shown on hover"
       },
      {
        "type": "color",
        "id": "promo_color",
        "label": "Heading color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "hidden_color",
        "label": "Subheading color",
        "default": "#ffffff"
      }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
  }
{% endschema %}

 

 

0 Likes
db1991
New Member
2 0 0

@Ninthony not sure which code to switch for the hidden images can you help. I am using mr. parker theme

<div class="index-section custom-section" data-section-id="{{ section.id }}">
{% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row" style="width: 100%;">{% endif %}
<div class="row">
{% if section.settings.title != blank %}
{% include 'section-headings', type: section.settings.title %}
{% endif %}

{% for block in section.blocks %}
{% case block.settings.container_width %}
{% when '25%' %}
{%- assign cont_width = 'desktop-3' -%}
{% when '33%' %}
{%- assign cont_width = 'desktop-4' -%}
{% when '40%' %}
{%- assign cont_width = 'desktop-5' -%}
{% when '50%' %}
{%- assign cont_width = 'desktop-6' -%}
{% when '60%' %}
{%- assign cont_width = 'desktop-7' -%}
{% when '66%' %}
{%- assign cont_width = 'desktop-8' -%}
{% when '75%' %}
{%- assign cont_width = 'desktop-9' -%}
{% when '100%' %}
{%- assign cont_width = 'desktop-12' -%}
{% endcase %}

<div class="{% if section.settings.no_spaces %}contained {% endif %}staggered-image-wrapper {{ cont_width }} tablet-half mobile-3 float-{{ block.settings.alignment }} section-{{ section.id }}" data-aos="{{ settings.scroll_animation }}">

<div class="image-layout image_gallery-{{ block.id }}" {{ block.shopify_attributes }}>

{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
{% endif %}

{% if block.settings.image != blank %}
{% include 'basic-responsive-image' | type: block.settings.image %}
<noscript>
<img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}">
</noscript>
{% else %}
<div class="onboard">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}

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

{% unless block.settings.title == 'blank' and block.settins.text == 'blank' %}
<div class="custom-content-featured-text-{{ block.settings.align_text }} gallery_text">
{% if block.settings.title != blank %}
<h2>{{ block.settings.title | escape }}</h2>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.link != blank and block.settings.button_text != blank %}
<a href="{{ block.settings.link }}" class="button">
{{ block.settings.button_text }}
</a>
{% endif %}
</div>
{% endunless %}

</div>
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
<style>
{% if block.settings.text_options == 'on_image' %}
.image_gallery-{{ block.id }} .gallery_text { position: absolute; bottom: {{ block.settings.vertical_position }}%; left: {{ block.settings.horizontal_position }}%; }
{% endif %}
.image_gallery-{{ block.id }} .gallery_text h2 { font-size: {{ block.settings.heading_size }}px; }

@media screen and (max-width: 980px) {
.image_gallery-{{ block.id }} .gallery_text h2 { font-size: 18px; }
.image_gallery-{{ block.id }} .gallery_text p { font-size: 14px; line-height: 20px; }
}
.image_gallery-{{ block.id }} .gallery_text h2, .image_gallery-{{ block.id }} .gallery_text p { color: {{ block.settings.caption_color }}; }
</style>

{% endfor %}
</div>
{% if section.settings.full_width %}</div></div>{% endif %}
</div>

<div class="clear"></div>

<style>
.section-{{ section.id }}.contained.staggered-image-wrapper, .section-{{ section.id }}.contained.staggered-image-wrapper .image-layout {
margin-bottom: 0;
}
.index-section .staggered-image-wrapper.section-{{ section.id }} h2 { margin-left: 0; margin-right: 0; width: 100%; padding: 10px 0;}
.staggered-image-wrapper.float-left { float: left; display: inline !important; }
.staggered-image-wrapper.float-right { float: right !important; display: inline !important; }
{% if section.settings.title == blank %}
.custom-section { margin-top: 20px; }
{% endif %}

.image-layout { position: relative; }
.gallery_text h2, .gallery_text p { margin-bottom: 0; }
.gallery_text a.button { margin-top: 15px; }
.custom-content-featured-text-left, .custom-content-featured-text-left h2.sections, .custom-content-featured-text-left h2.sections span { text-align: left; padding-left: 0; }
.custom-content-featured-text-center, .custom-content-featured-text-center h2.sections, .custom-content-featured-text-center h2.sections span { text-align: center; }
.custom-content-featured-text-right, .custom-content-featured-text-right h2.sections, .custom-content-featured-text-right h2.sections span { text-align: right; padding-right: 0; }
.custom-section a.button { text-align: center !important; }
</style>

{% schema %}
{
"name":"Gallery",
"max_blocks":7,
"settings":[
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width",
"default":true
},
{
"type": "checkbox",
"id": "no_spaces",
"label": "Remove spaces",
"default":false
},
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Gallery"
}
],
"blocks":[
{
"type":"image",
"name":"Image",
"settings":[
{
"type": "header",
"content": "Image Settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image"
},
{
"type":"select",
"id":"container_width",
"label":"Width",
"default":"33%",
"options":[
{
"value":"25%",
"label":"25%"
},
{
"value":"33%",
"label":"33%"
},
{
"value":"40%",
"label":"40%"
},
{
"value":"50%",
"label":"50%"
},
{
"value":"60%",
"label":"60%"
},
{
"value":"66%",
"label":"66%"
},
{
"value":"75%",
"label":"75%"
},
{
"value":"100%",
"label":"100%"
}
]
},
{
"type":"select",
"id":"alignment",
"label":"Position",
"default":"left",
"options":[
{
"value":"left",
"label":"Left"
},
{
"value":"right",
"label":"Right"
}
]
},
{
"type":"url",
"id":"link",
"label":"Link",
"info":"Optional"
},
{
"type": "header",
"content": "Text Settings"
},
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Our Collections"
},
{
"type": "range",
"id": "heading_size",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 22
},
{
"id": "text",
"type": "richtext",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"type": "color",
"id": "caption_color",
"label": "Text color",
"default": "#000000"
},
{
"type":"select",
"id":"align_text",
"label":"Text alignment",
"default":"left",
"options":[
{
"value":"left",
"label":"Left"
},
{
"value":"center",
"label":"Centered"
},
{
"value":"right",
"label":"Right"
}
]
},
{
"type": "select",
"id": "text_options",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
}
]
}
],
"presets":[
{
"name":"Gallery",
"category":"Image",
"blocks":[
{
"type":"image"
},
{
"type":"image"
},
{
"type":"image"
}
]
}
]
}
{% endschema %}

 

0 Likes
jarmen
New Member
1 0 0

Does anyone know how to make these images clickable?

0 Likes