Slider Images for Mobile and Desktop -Minimal them

CreateEst
Tourist
8 0 1

I want to be able to upload different image sizes for my home page slider (minimal theme). This is the current code, can anyone tell me what needs to be changed to enable this? 

 

Our website is www.createestate.com.au and I currently have the slide show turned off until I figure this one out.

 

{% if settings.enable_wide_layout %}
{%- assign max_width = 1280 -%}
{% else %}
{%- assign max_width = 970 -%}
{% endif %}
{%- assign slide_width = max_width -%}

{% if section.blocks.size > 0 %}
<div class="index-section">
<div class="flexslider" id="flexslider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-transition="{{ section.settings.slider_home_transition }}" data-autoplay="{{ section.settings.slider_home_auto }}" data-speed="{{ section.settings.slider_home_rate }}" data-show-dots="{{ section.settings.slider_home_show_dots }}">
<ul class="slides supports-js">
{% for block in section.blocks %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if block.settings.image.width < max_width %}
{%- assign slide_width = block.settings.image.width -%}
{% endif %}

{% if block.settings.image != blank %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>

{% comment %} Modified by Joey S @ Shopify | 29 March 2021 {% endcomment %}
{% if block.settings.slide_text != blank or block.settings.button_text != blank %}
<div class="slider-text-overlay">
<h2 class="h1 slider-text" style="color: {{ block.settings.slide_text_color }}">{{ block.settings.slide_text }}</h2>
<p class="slider-text"><a href="{{ block.settings.link }}" class="btn">{{ block.settings.button_text }}</a></p>
</div>
{% endif %}
{% comment %} End of Modified Code {% endcomment %}

<img class="lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{% if slide_width <= max_width %}{%- assign min_width = slide_width | times: 1.0 | divided_by: max_width -%}{%- assign min_width = min_width | times: 100 -%}min-width: {{ min_width }}%; {% endif %}"
alt="{{ block.settings.image.alt | escape }}">

{% comment %} Removed by Joey S @ Shopify | 29 March 2021 {% endcomment %}
{% comment %}
{% if block.settings.link != blank %}</a>{% endif %}
{% endcomment %}
{% comment %} End of Modified Code {% endcomment %}

</li>
{% else %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
<span class="slide-link slide-link--{{ block.id }}">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
<noscript>
{{ section.blocks[0].settings.image | img_url: '1280x', scale: 2 | img_tag: block.settings.image.alt }}
</noscript>
</div>
</div>
{% endif %}

{% comment %} Added by Joey S @ Shopify | 29 March 2021 {% endcomment %}

KetanKumar
Shopify Partner
20662 2144 7829

@CreateEst 

your code is somothinkg is missing but can you please try this way

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes