I want to add two different images to display on mobile and desktop. After a lot of testing with the available help documents, I've failed to add one properly.
Can anyone help me to set it up!
Here's the code on my theme's slideshow.liquid -
<div class="homepage-section no-fouc index-section slideshow-section" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% unless section.settings.full-width %}
<div class="row">
<div class="desktop-12 tablet-6 mobile-3">
{% endunless %}
{% if section.blocks.size > 0 %}
<div class="flexslider index_Slider" id="Slideshow-{{ section.id }}" data-speed="{{ section.settings.slider_speed }}">
<ul class="slides">
{%- assign image_size = '2000x' -%}
{% for block in section.blocks %}
{%- assign img_url = block.settings.image | img_url: image_size -%}
<li id="slide--{{ block.id }}" data-block-id="{{ block.id }}" class="slide--{{ block.id }} slide_image" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.image != blank %}
{% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
<img class="lazyload lazyload-fade" data-src="{{ img_url }}" data-sizes="auto"/>
{% if block.settings.link != blank %}</a>{% endif %}
{% endif %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{%- assign placeholder = 'lifestyle-' | append: current -%}
{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
<div class="flex-caption slide-{{ block.id }}">
<div class="caption-inners">
{% if block.settings.title != 'blank' %}
<h2 class="slide-title">{{ block.settings.title }}</h2>
{% endif %}
{% if block.settings.subheading != 'blank' %}
<p class="caption">{{ block.settings.subheading }}</p>
{% endif %}
{% if block.settings_link != 'blank' %}
<div class="cta">
{% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
{{ block.settings.button_text }}
{% if block.settings.link != blank %}</a>{% endif %}
</div>
{% endif %}
</div>
</div>
</li>
<style>
.flex-caption.slide-{{ block.id }} {
top: {{ block.settings.caption_vertical }};
text-align: {{ block.settings.caption_horizontal }};
}
.flex-caption.slide-{{ block.id }} .caption-inners {
{% if block.settings.caption_rgba %}
background: rgba({{ block.settings.caption_rgba_color }});
{% else %}
background: {{ block.settings.caption_background }};
{% endif %}
}
.flex-caption.slide-{{ block.id }} h2.slide-title {
color: {{ block.settings.slide_text_color }};
text-align: {{ block.settings.caption_horizontal }};
}
.flex-caption.slide-{{ block.id }} p {
color: {{ block.settings.slide_text_color }};
}
.flex-caption.slide-{{ block.id }} .cta a {
color: {{ block.settings.cta_color }};
background: {{ block.settings.cta_background }};
}
.cta a, .cta {
font-size: {{ section.settings.cta_size }};
font-weight: {{ section.settings.cta_weight }};
}
.flex-caption h2.slide-title {
font-size: {{ section.settings.slide-title-size }};
font-family: {{ settings.headings_font }};
font-weight:{{ section.settings.slide-title-weight }};
}
.flex-caption p {
font-size: {{ section.settings.caption-size }};
}
</style>
{% endfor %}
</ul>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
{% unless section.settings.full-width %}
</div>
</div>
{% endunless %}
</div>
<div class="clear"></div>
{% schema %}
{
"name": "Slideshow",
"max_blocks": 5,
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Add a title to your image"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your brand's story through images"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Add a call to action"
},
{
"type": "url",
"id": "link",
"label": "Slide link"
},
{
"type": "select",
"id": "caption_horizontal",
"label": "Caption horizontal alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "text",
"id": "caption_vertical",
"label": "Caption vertical position (% or px)",
"default": "45%",
"info": "Vertically align the caption and button. % values are recommended, do not exceed 100%."
},
{
"type": "color",
"id": "slide_text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "color",
"id": "cta_color",
"label": "Button text color",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_background",
"label": "Button background",
"default": "#000000"
}
]
}
],
"settings": [
{
"type": "checkbox",
"id": "full-width",
"label": "Enable full width"
},
{
"type": "select",
"id": "slider_speed",
"label": "Slideshow speed",
"default": "6000",
"options": [
{
"value": "5000",
"label": "5 seconds"
},
{
"value": "6000",
"label": "6 seconds"
},
{
"value": "7000",
"label": "7 seconds"
},
{
"value": "8000",
"label": "8 seconds"
},
{
"value": "9000",
"label": "9 seconds"
},
{
"value": "10000",
"label": "10 seconds"
}
]
},
{
"type": "header",
"content": "Slideshow text"
},
{
"type": "select",
"id": "slide-title-size",
"label": "Slide title Size",
"default": "24px",
"options": [
{
"value": "12px",
"label": "12px"
},
{
"value": "13px",
"label": "13px"
},
{
"value": "14px",
"label": "14px"
},
{
"value": "16px",
"label": "16px"
},
{
"value": "18px",
"label": "18px"
},
{
"value": "20px",
"label": "20px"
},
{
"value": "24px",
"label": "24px"
},
{
"value": "28px",
"label": "28px"
},
{
"value": "32px",
"label": "32px"
},
{
"value": "36px",
"label": "36px"
}
]
},
{
"type": "select",
"id": "slide-title-weight",
"label": "Slide title weight",
"default": "700",
"options": [
{
"value": "400",
"label": "Normal"
},
{
"value": "300",
"label": "Light"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "select",
"id": "caption-size",
"label": "Slide caption size",
"default": "14px",
"options": [
{
"value": "12px",
"label": "12px"
},
{
"value": "13px",
"label": "13px"
},
{
"value": "14px",
"label": "14px"
},
{
"value": "16px",
"label": "16px"
},
{
"value": "18px",
"label": "18px"
},
{
"value": "20px",
"label": "20px"
},
{
"value": "24px",
"label": "24px"
},
{
"value": "28px",
"label": "28px"
},
{
"value": "32px",
"label": "32px"
},
{
"value": "36px",
"label": "36px"
}
]
},
{
"type": "select",
"id": "cta_size",
"label": "Slide button size",
"default": "14px",
"options": [
{
"value": "12px",
"label": "12px"
},
{
"value": "13px",
"label": "13px"
},
{
"value": "14px",
"label": "14px"
},
{
"value": "16px",
"label": "16px"
},
{
"value": "18px",
"label": "18px"
},
{
"value": "20px",
"label": "20px"
},
{
"value": "24px",
"label": "24px"
},
{
"value": "28px",
"label": "28px"
},
{
"value": "32px",
"label": "32px"
},
{
"value": "36px",
"label": "36px"
}
]
},
{
"type": "select",
"id": "cta_weight",
"label": "Slide button weight",
"default": "400",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Normal"
},
{
"value": "700",
"label": "Bold"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
Thanks in advance.
