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
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.
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 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
Appreciate any further help!
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 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.
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.
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.
Thank you again Ninthony, I will have a go using these guidelines this evening. I’ll let you know how I get on 
Idk how to delete a post but this one had an error in the code. Reposted updated version
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
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 -%}
Hi Ninthony,
I managed to get the schema edits showing up correctly in the customizer however can’t get the html portion to show the mobile image.
I’m editing slideshow.liquid in the Debut theme - i’m guessing the code required is slightly different.
Any thoughts?
{%- if section.settings.slideshow_height == 'adapt' -%}
{% comment %}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'slideshow_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{% endcomment %}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}
{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{%- if section.blocks.size > 0 -%}
<div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
id="Slideshow-{{ section.id }}"
data-autorotate="{{ section.settings.autorotate }}"
data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
{% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height: {{- wrapper_height -}}vw"{% endif %}>
{%- for block in section.blocks -%}
<div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};
background-image: url('{{ block.settings.image | img_url: '300x300' }}');">
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap slideshow__text-wrap--desktop">
<div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
<div class="page-width">
{% unless block.settings.slide_title == blank and block.settings.subheading == blank %}
<ul class="slideshow__text-content-list">
{%- unless block.settings.slide_title == blank -%}
<li>
<h2 class="h1 mega-title slideshow__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.slide_title }}
</h2>
</li>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<li>
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading }}
</span>
</li>
{%- endunless -%}
</ul>
{% endunless %}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_link_button -%}
<div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}">
<a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
{{ block.settings.button_label | escape }}
</a>
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
<div class="slideshow__controls">
{%- if section.blocks.size > 1 -%}
{%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%}
<div class="slideshow__arrows"
style="width: {{- arrows_width -}}px">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
</div>
{%- if section.settings.autorotate -%}
<button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-rotate">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
</span>
</button>
{%- endif -%}
{%- endif -%}
</div>
</div>
<div class="slideshow__text-wrap slideshow__text-wrap--mobile">
{% if section.blocks.size > 1 %}
<div class="slideshow__arrows slideshow__arrows--mobile">
<button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
<button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
</div>
{% endif %}
{%- for block in section.blocks -%}
{%- assign show_text = false -%}
{%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
{%- assign show_text = true -%}
{%- endunless -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_text or show_link_button -%}
<div class="slideshow__text-content slideshow__text-content--mobile slideshow__text-content--mobile-{{ forloop.index0 }} text-center">
<div class="page-width">
{%- unless block.settings.slide_title == blank -%}
<h2 class="h1 mega-title slideshow__title slideshow__title--mobile{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.slide_title | escape }}
</h2>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="btn slideshow__btn slideshow__btn--mobile">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
Hi Ninthony (or anyone listening). I am trying to follow your instructions on this post for having different banner images for desktop and mobile viewing of my home page, but I can’t figure out where to place the actual html portion in my theme.
Just posting this for Venture theme, had another user contact me about it so I looked into it and it was fairly easy. Everyone backup your themes before you attempt it. Used on the “Snowboarding” option of Venture, not sure if it matters. Here’s the section code for slideshow.liquid:
{%- if section.settings.hero_home_height == 'adapt' -%}
{%- comment -%}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'hero_home_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{%- endcomment -%}
{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}
{% if section.blocks.size > 0 %}
<div class="hero-wrapper hero-wrapper--{{ section.settings.hero_home_height }}"
role="region"
aria-label="slideshow"
aria-describedby="a11y-slideshow-info">
<div class="hero hero--{{ section.settings.hero_home_height }}{% if section.settings.hero_home_height == 'adapt' %} hero--adapt-height page-width{% endif %}"
id="Slideshow-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="slideshow"
data-autoplay="{{ section.settings.hero_home_auto }}"
data-adapt-height="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
data-speed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
{% if section.settings.hero_home_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
style="height: {{- wrapper_height -}}vw"{% endif %}>
{%- for block in section.blocks -%}
<div class="hero__slide hero__slide--{{ block.id }}" {{ block.shopify_attributes }}>
<div class="hero__image-content">
{%- if block.settings.image != blank -%}
<noscript>
<div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
</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 {% 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"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
<img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop"
{% if forloop.first == true %}
src="{{ block.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"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- else -%}
{%- if block.settings.image == blank -%}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
<div class="hero-content">
<div class="page-width">
<div class="hero-content__title-wrapper">
{%- if section.settings.hero_home_height == 'adapt' -%}
<div class="hero-content__inner-text">
{%- endif -%}
{%- for block in section.blocks -%}
{%- unless block.settings.title == blank -%}
<h2 data-slide-id="{{ forloop.index }}" class="hero-content__title h1{% if section.blocks.size == 1 %} hero-title-active{% endif %}">
{{ block.settings.title | escape }}
</h2>
{%- endunless -%}
{%- endfor -%}
{%- if section.settings.hero_home_height == 'adapt' -%}
</div>
{%- endif -%}
</div>
{%- if section.settings.hero_home_height == 'adapt' -%}
<div class="hero-content__inner-controls">
{%- endif -%}
<div class="hero-content__controls">
{%- if section.blocks.size > 1 -%}
<div class="hero-content__controls-item hero-content__controls-item--count" aria-label="{{ 'homepage.hero.slide_number' | t: slide_number: '[slide_number]' }}">
<span class="slide-counter" aria-hidden="true">1/{{ section.blocks.size }}</span>
</div>
{%- if section.settings.hero_home_auto -%}
<div class="hero-content__controls-item hero-content__controls-item--pause">
<button type="button" class="hero__pause"
aria-live="polite"
aria-label="{{ 'homepage.hero.pause_slideshow' | t }}"
aria-pressed="false"
data-label-pause="{{ 'homepage.hero.pause_slideshow' | t }}"
data-label-play="{{ 'homepage.hero.play_slideshow' | t }}">
<span class="hero-toggle-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'homepage.hero.pause_slideshow' | t }}</span>
</span>
<span class="hero-toggle-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'homepage.hero.play_slideshow' | t }}</span>
</span>
</button>
</div>
{%- endif -%}
<ul class="hero-content-navigation">
<li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
<button class="text"
type="button"
data-control="previous"
aria-label="{{ 'homepage.hero.previous_slide' | t }}">
{% include 'icon-arrow-left' %}
<span class="icon__fallback-text">{{ 'homepage.hero.previous_slide' | t }}</span>
</button>
</li>
<li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
<button class="text"
type="button"
data-control="next"
aria-label="{{ 'homepage.hero.next_slide' | t }}">
{% include 'icon-arrow-right' %}
<span class="icon__fallback-text">{{ 'homepage.hero.next_slide' | t }}</span>
</button>
</li>
</ul>
{%- endif -%}
{%- for block in section.blocks -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
<a data-slide-id="{{ forloop.index }}"
href="{{ block.settings.button_link }}"
class="hero-content__controls-item hero-content__controls-item--text{% if section.blocks.size == 1 %} hero-link-active{% endif %}">
{{ block.settings.button_label | escape }} <span aria-hidden="true">→</span>
</a>
{%- endif -%}
{%- endfor -%}
{%- if section.settings.hero_home_height == 'adapt' -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% schema %}
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"ms": "Tayangan slaid",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"zh-CN": "幻灯片",
"zh-TW": "投影片輪播"
},
"class": "shopify-section--slideshow",
"max_blocks": 4,
"settings": [
{
"type": "select",
"id": "hero_home_height",
"label": {
"da": "Diashøjde",
"de": "Diahöhe",
"en": "Slide height",
"es": "Altura de diapositiva",
"fi": "Dian korkeus",
"fr": "Hauteur de la diapositive",
"hi": "स्लाइड ऊंचाई",
"it": "Altezza slide",
"ja": "スライドの高さ",
"ko": "슬라이드 높이",
"ms": "Ketinggian slaid",
"nb": "Lysbildehøyde",
"nl": "Diahoogte",
"pt-BR": "Altura do slide",
"pt-PT": "Altura do diapositivo",
"sv": "Bildhöjd",
"th": "ความสูงของสไลด์",
"zh-CN": "幻灯片高度",
"zh-TW": "投影片高度"
},
"default": "small",
"info": {
"da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"de": "Erfahren Sie mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"fi": "Lisätietoja [diaesitysohjeet](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"hi": "[स्लाइड शो दिशानिर्देश](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific) के बारे में अधिक जानें.",
"it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)に関する詳細情報はこちら。",
"ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"ms": "Ketahui lebih lanjut tentang [garis panduan tayangan slaid](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"zh-CN": "详细了解 [幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
"zh-TW": "深入瞭解 [投影片輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)。"
},
"options": [
{
"value": "small",
"label": {
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fi": "Pieni",
"fr": "Petite",
"hi": "छोटा",
"it": "Piccolo",
"ja": "小",
"ko": "스몰",
"ms": "Kecil",
"nb": "Liten",
"nl": "Klein",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "large",
"label": {
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"hi": "बड़ा",
"it": "Grande",
"ja": "大",
"ko": "라지",
"ms": "Besar",
"nb": "Stor",
"nl": "Groot",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"zh-CN": "大",
"zh-TW": "大型"
}
},
{
"value": "adapt",
"label": {
"da": "Tilpas til første side",
"de": "An erstes Bild anpassen",
"en": "Adapt to first image",
"es": "Adaptar a la primera imagen",
"fi": "Mukauta ensimmäisen kuvan mukaan",
"fr": "Adapter à la première image",
"hi": "पहली इमेज को अनुकूल बनाएं",
"it": "Adatta alla prima immagine",
"ja": "最初の画像に適応する",
"ko": "첫 번째 이미지에 맞춤",
"ms": "Menyesuaikan kepada imej pertama",
"nb": "Tilpass etter første bilde",
"nl": "Aanpassen aan eerste afbeelding",
"pt-BR": "Adaptar à primeira imagem",
"pt-PT": "Adaptar à primeira imagem",
"sv": "Anpassa efter första bilden",
"th": "ปรับให้เข้ากับรูปภาพแรก",
"zh-CN": "适应第一张图片",
"zh-TW": "配合第一張圖片"
}
}
]
},
{
"type": "checkbox",
"id": "hero_home_auto",
"label": {
"da": "Roter automatisk slides",
"de": "Auto-rotieren der Slides",
"en": "Auto-rotate slides",
"es": "Rotar las diapositivas automáticamente",
"fi": "Käännä diat automaattisesti",
"fr": "Rotation automatique des diapositives",
"hi": "ऑटो-रोटेट स्लाइड",
"it": "Ruota slide automaticamente",
"ja": "スライドの自動切り替え",
"ko": "슬라이드 자동 회전",
"ms": "Slaid auto putar",
"nb": "Autoroter lysbildene",
"nl": "Dia's automatisch draaien",
"pt-BR": "Rodar os slides automaticamente",
"pt-PT": "Reprodução automática de diapositivos",
"sv": "Auto-rotera bilder",
"th": "หมุนสไลด์อัตโนมัติ",
"zh-CN": "自动旋转幻灯片",
"zh-TW": "自動旋轉投影片"
},
"default": false
},
{
"type": "range",
"id": "hero_home_auto_speed",
"label": {
"da": "Skift slide hver",
"de": "Slides überall ändern",
"en": "Change slides every",
"es": "Cambiar diapositivas cada",
"fi": "Vaihda diat joka",
"fr": "Changer de diapositive toutes les",
"hi": "प्रत्येक स्लाइड बदलें",
"it": "Cambia slide ogni",
"ja": "スライドを変更する間隔",
"ko": "슬라이드를 매번 변경",
"ms": "Ubah slaid setiap",
"nb": "Endre lysbilde hvert",
"nl": "Wijzig dia's elke",
"pt-BR": "Mudar os slides a cada",
"pt-PT": "Mudar diapositivos a cada",
"sv": "Byt bilder varje",
"th": "เปลี่ยนสไลด์ทุก",
"zh-CN": "幻灯片更改时间间隔",
"zh-TW": "每過以下時間即變更投影片"
},
"max": 9,
"min": 3,
"step": 2,
"unit": {
"da": " s",
"de": " s",
"en": " s",
"es": " s",
"fi": " s",
"fr": " s",
"hi": " s",
"it": " s",
"ja": " s",
"ko": " s",
"ms": " s",
"nb": " s",
"nl": " s",
"pt-BR": " s",
"pt-PT": " s",
"sv": " s",
"th": " s",
"zh-CN": " s",
"zh-TW": " s"
},
"default": 5
}
],
"presets": [
{
"name": {
"da": "Diasshow",
"de": "Slideshow",
"en": "Slideshow",
"es": "Diapositivas",
"fi": "Diaesitys",
"fr": "Diaporama",
"hi": "स्लाइडशो",
"it": "Presentazione",
"ja": "スライドショー",
"ko": "슬라이드 쇼",
"ms": "Tayangan slaid",
"nb": "Lysbildefremvisning",
"nl": "Diavoorstelling",
"pt-BR": "Apresentação de slides",
"pt-PT": "Apresentação de diapositivos",
"sv": "Bildspel",
"th": "สไลด์โชว์",
"zh-CN": "幻灯片",
"zh-TW": "投影片輪播"
},
"category": {
"da": "Billede",
"de": "Bild",
"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": "圖片"
},
"settings": {
"hero_home_auto": false,
"hero_home_auto_speed": 5
},
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
],
"blocks": [
{
"type": "slide",
"name": {
"da": "Slide",
"de": "Folie",
"en": "Slide",
"es": "Diapositiva",
"fi": "Dia",
"fr": "Diapositive",
"hi": "स्लाइड",
"it": "Scorrimento",
"ja": "スライド",
"ko": "슬라이드",
"ms": "Slaid",
"nb": "Lysbilde",
"nl": "Dia",
"pt-BR": "Slide",
"pt-PT": "Diapositivo",
"sv": "Bild",
"th": "สไลด์",
"zh-CN": "幻灯片",
"zh-TW": "投影片"
},
"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": "Mobile 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": "select",
"id": "image_position",
"label": {
"da": "Placering af billede",
"de": "Bildposition",
"en": "Image position",
"es": "Posición de la imagen",
"fi": "Kuvan sijainti",
"fr": "Position de l'image",
"hi": "इमेज स्थिति",
"it": "Posizione Immagine",
"ja": "画像の位置",
"ko": "이미지 위치",
"ms": "Kedudukan imej",
"nb": "Bildeposisjon",
"nl": "Afbeeldingspositie",
"pt-BR": "Posição da imagem",
"pt-PT": "Posição da imagem",
"sv": "Bildposition",
"th": "ตำแหน่งรูปภาพ",
"zh-CN": "图片位置",
"zh-TW": "圖片位置"
},
"default": "center center",
"options": [
{
"label": {
"da": "Øverst til venstre",
"de": "Oben links",
"en": "Top left",
"es": "Arriba a la izquierda",
"fi": "Ylhäällä vasemmalla",
"fr": "En haut à gauche",
"hi": "शीर्ष पर बाईं ओर",
"it": "In alto a sinistra",
"ja": "左上",
"ko": "왼쪽 상단",
"ms": "Kiri atas",
"nb": "Øverst til venstre",
"nl": "Linksboven",
"pt-BR": "Superior esquerdo",
"pt-PT": "Canto superior esquerdo",
"sv": "Överst till vänster",
"th": "ซ้ายบน",
"zh-CN": "左上方",
"zh-TW": "左上角"
},
"value": "left top"
},
{
"label": {
"da": "Øverst i midten",
"de": "Oben zentriert",
"en": "Top center",
"es": "Centrar arriba",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"hi": "शीर्ष केंद्र",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"ms": "Tengah-tengah atas",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
},
"value": "center top"
},
{
"label": {
"da": "Øverst til højre",
"de": "Oben rechts",
"en": "Top right",
"es": "Arriba a la derecha",
"fi": "Ylhäällä oikealla",
"fr": "En haut à droite",
"hi": "शीर्ष पर दाईं ओर",
"it": "In alto a destra",
"ja": "右上",
"ko": "오른쪽 상단",
"ms": "Kanan atas",
"nb": "Øverst til høyre",
"nl": "Rechtsboven",
"pt-BR": "Superior direito",
"pt-PT": "Canto superior direito",
"sv": "Överst till höger",
"th": "ขวาบน",
"zh-CN": "右上方",
"zh-TW": "右上角"
},
"value": "right top"
},
{
"label": {
"da": "Midt på til venstre",
"de": "Mittig links",
"en": "Middle left",
"es": "Centro a la izquierda",
"fi": "Keskellä vasemmalla",
"fr": "Au milieu à gauche",
"hi": "मध्य में बाईं ओर",
"it": "Centrale a sinistra",
"ja": "中央左",
"ko": "왼쪽 중간",
"ms": "Kiri tengah",
"nb": "Midt til venstre",
"nl": "Midden links",
"pt-BR": "Meio esquerdo",
"pt-PT": "Intermédio à esquerda",
"sv": "Mitten till vänster",
"th": "ซ้ายกลาง",
"zh-CN": "中间居左",
"zh-TW": "中央左方"
},
"value": "left center"
},
{
"label": {
"da": "Midt på centreret",
"de": "Mittig zentriert",
"en": "Middle center",
"es": "Centro",
"fi": "Keskellä keskellä",
"fr": "Centré au milieu",
"hi": "मध्य केंद्र",
"it": "Al centro",
"ja": "中央中",
"ko": "가운데 중간",
"ms": "Tengah-tengah",
"nb": "Midt i senter",
"nl": "Midden centrum",
"pt-BR": "Meio centro",
"pt-PT": "Intermédio ao centro",
"sv": "Mitten centrerat",
"th": "กึ่งกลาง",
"zh-CN": "中间居中",
"zh-TW": "正中央"
},
"value": "center center"
},
{
"label": {
"da": "Midt på til højre",
"de": "Mittig rechts",
"en": "Middle right",
"es": "Centro a la derecha",
"fi": "Keskellä oikealla",
"fr": "Au milieu à droite",
"hi": "मध्य में दाईं ओर",
"it": "Centrale a destra",
"ja": "中央右",
"ko": "오른쪽 중간",
"ms": "Kanan tengah",
"nb": "Midt til høyre",
"nl": "Midden rechts",
"pt-BR": "Meio direito",
"pt-PT": "Intermédio à direita",
"sv": "Mitten till höger",
"th": "ขวากลาง",
"zh-CN": "中间居右",
"zh-TW": "中央右方"
},
"value": "right center"
},
{
"label": {
"da": "Nederst til venstre",
"de": "Unten links",
"en": "Bottom left",
"es": "Abajo a la izquierda",
"fi": "Alhaalla vasemmalla",
"fr": "En bas à gauche",
"hi": "सबसे नीचे बाईं ओर",
"it": "In basso a sinistra",
"ja": "左下",
"ko": "왼쪽 하단",
"ms": "Kiri bawah",
"nb": "Nederst til venstre",
"nl": "Linksonder",
"pt-BR": "Inferior esquerdo",
"pt-PT": "Canto inferior esquerdo",
"sv": "Nere till vänster",
"th": "ซ้ายล่าง",
"zh-CN": "左下方",
"zh-TW": "左下角"
},
"value": "left bottom"
},
{
"label": {
"da": "Nederst i midten",
"de": "Unten zentriert",
"en": "Bottom center",
"es": "Centro abajo",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"hi": "निचला केंद्र",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"ms": "Tengah bawah",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
},
"value": "center bottom"
},
{
"label": {
"da": "Nederst til højre",
"de": "Unten rechts",
"en": "Bottom right",
"es": "Abajo a la derecha",
"fi": "Alhaalla oikealla",
"fr": "En bas à droite",
"hi": "सबसे नीचे दाईं ओर",
"it": "In basso a destra",
"ja": "右下",
"ko": "오른쪽 아래",
"ms": "Kanan bawah",
"nb": "Nederst til høyre",
"nl": "Rechtsonder",
"pt-BR": "Inferior direito",
"pt-PT": "Canto inferior direito",
"sv": "Nere till höger",
"th": "ขวาล่าง",
"zh-CN": "右下方",
"zh-TW": "右下角"
},
"value": "right bottom"
}
]
},
{
"type": "header",
"content": {
"da": "Tekst",
"de": "Textfarbe",
"en": "Text",
"es": "texto",
"fi": "Teksti",
"fr": "Couleur du texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
}
},
{
"type": "text",
"id": "title",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"ms": "Tajuk",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Slide",
"de": "Folie",
"en": "Slide",
"es": "Diapositiva",
"fi": "Dia",
"fr": "Diapositive",
"hi": "स्लाइड",
"it": "Scorrimento",
"ja": "スライド",
"ko": "슬라이드",
"ms": "Slaid",
"nb": "Lysbilde",
"nl": "Dia",
"pt-BR": "Slide",
"pt-PT": "Diapositivo",
"sv": "Bild",
"th": "สไลด์",
"zh-CN": "幻灯片",
"zh-TW": "投影片"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"da": "Knapetiket",
"de": "Schaltflächenbezeichnung",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Painikkeen merkintä",
"fr": "Texte du bouton",
"hi": "बटन लेबल",
"it": "Etichetta pulsante",
"ja": "ボタンラベル",
"ko": "버튼 레이블",
"ms": "Label butang",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pt-BR": "Etiqueta do botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
},
"default": {
"da": "Se alle produkter",
"de": "Alle Produkte ansehen",
"en": "View all products",
"es": "Ver todos los productos",
"fi": "Näytä kaikki tuotteet",
"fr": "Afficher tous les résultats de produits",
"hi": "सभी उत्पाद देखें",
"it": "Visualizza tutti i prodotti",
"ja": "すべての商品を表示する",
"ko": "모든 제품보기",
"ms": "Lihat semua produk",
"nb": "Vis alle produktene",
"nl": "Alle producten bekijken",
"pt-BR": "Exibir todos os produtos",
"pt-PT": "Mostrar todos os produtos",
"sv": "Visa alla produkter",
"th": "ดูสินค้าทั้งหมด",
"zh-CN": "查看所有产品",
"zh-TW": "檢視所有產品"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"da": "Knaplink",
"de": "Schaltflächenlink",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikkeen linkki",
"fr": "Lien du bouton",
"hi": "बटन लिंक",
"it": "Link pulsante",
"ja": "ボタンリンク",
"ko": "버튼 링크",
"ms": "Pautan butang",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pt-BR": "Link do botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ของปุ่ม",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}
]
}
]
}
{% endschema %}
Then add this to bottom of your theme.scss.liquid file in your assets folder:
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
display: block;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
display: none;
}
.hero {
height: auto;
}
@media (max-width:750px){
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
display: none;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
display: block;
}
}
Now in each of your slides you should be able to pick a separate mobile image.
Hi @Ninthony ,
I’m using the theme Minimal with Flexslider with my website www.narrawatches.com, and I’m also a beginner at liquid and coding in general. I think I was able to mostly follow the code logic for Slickslider in Debut, wherein I was able to show the mobile image picker on theme customizer and I was able to except for the last part in the theme.scss, particularly this part
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
display: block;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
display: none;
}
.hero {
height: auto;
}
@media (max-width:750px){
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
display: none;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
display: block;
}
}
I can’t seem to replicate this in Flexslider or figure out the necessary code that would hide the second slideshow banner for flexslider.
Basically the current end result is me having one slideshow directly below the other slideshow, with the main image showing on all formats, including mobile view as I haven’t been able to bring out the mobile view on mobile screens or hide the other slideshow in the assets theme.
Any help would be greatly appreciated! Thank you and I also learned quite a lot reading this thread.
Yeah the class names are likely not the same in any other theme other than Venture. You can send me a private message with your site and password if password protected so I can inspect and see what class names you need.
Hey @Ninthony , hope you don’t mind me jumping in on this but i’ve been looking for a solution to this also and noticed this thread is still active. Not sure if you’ve had a PM yet but could I ping you mine to have a look also? (Running Minimal theme too!)
Since @chugsy and @narrawatches are both using Minimal, I’ll take a look at the slideshow section for minimal and see how much trouble it’ll be to get the swap working for the default Minimal theme. I’ll report back when I get the time as I currently have something pressing to deal with, probably going to take up a good chunk of my week. I will let you both know by direct message when I take a look and if I find a solution I’ll post it here as well.
Thanks @Ninthony much appreciated. Take as much time as you need understand you have other things on your plate! Can manage in the meantime
Awesome! Take your time and hope that everything’s going well for you too.
Really appreciate you taking the time to help out others in need
How would you handle it @DariusWS ? Typically on my website’s I’ll use the picture element and source elements to swap out my images, but due to having a fallback for older browsers the fallback is always downloaded anyway, so two images are still downloaded:
<picture>
<source media="(min-width: 767px)" srcset="/path-for-double-resolution-desktop-image.jpg 2x,
/path-for-normal-resolution-desktop-image.jpg">
<source media="(min-width: 320px)" srcset="/path-for-double-resolution-mobile-image.jpg 2x,
/path-for-normal-resolution-mobile-image.jpg">
<img src="/path-for-fallback-image.jpg" alt="Some alt text for SEO">
</picture>
In this case on screens larger than 767px would download the normal resolution desktop image as well as the fallback image. The only way I really know around this is to have a parent div of an element and set a background image for the child and set the parent div to display none:
<style>
.child {
background-image: url('/path-to-image.jpg')
}
.parent {
display: none;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Personally I find working with background images irritating because you always have to give them a width and height, and for my general use I want the image to define the dimensions of the container.
I know there are some way to avoid the image loading with the picture element by using or instead of , but it’s hacky. I would like to hear your approach though if it can make me a better developer.
Most of all, these solutions are an attempt to make it as easy as possible for the users who aren’t too familiar with HTML or CSS to achieve what they want to do and arent too concerned with the background processes, as well as easier on myself by not having to rewrite theme code to work with picture elements or background images if they don’t already use them.