How to place different image for mobile and web into my slide show (home page).

Highlighted
New Member
1 0 0

Hi, Basically i'm trying to place different image (with different resolution) for web view and mobile for the slide show. I figured i need to to this in my home.slideshow.liquid. And here s the code for slideshow:

Could anyone help me with a tip where the code need to be changed?

 

<div class="home-module {{ slideLayout }} {% if sectionBorder %}has-border{% endif %}">
<div class="home-module-content {{ slideLayout }} {% if section.settings.title != blank %}home-module-has-heading{% endif %}">

{%
include 'home-section-title',
sectionTitle: section.settings.title,
%}

<div class="home-slideshow {{ slideLayout }} {{ slideTransition }}"
data-slideshow-autoplay="{{ slideAutoplay }}">

<div class="slideshow-slides">
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% assign alignment = block.settings.content-alignment %}
{% assign textShadow = block.settings.text-shadow %}
{% assign textColor = block.settings.text-color %}
{% assign textAbove = block.settings.text-above | escape %}
{% assign slideImage = block.settings.image %}
{% assign heading = block.settings.title-heading | escape %}
{% assign textBelow = block.settings.text-below | escape %}
{% assign linkUrl = block.settings.url %}
{% assign position = forloop.index %}
{% assign slide = 'slide-' | append: position %}

{%- capture image_html -%}
<div class="slide-image">
{% if slideImage %}
{%
include 'rimg',
img: slideImage,
size: '1440x640',
lazy: true
%}
{% else %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
{%- endcapture -%}

<div id="{{ slide }}"
class="
slideshow-slide
{{ slide }}
text-shadows-{{ textShadow }}
content-aligned-{{ alignment }}
{% if forloop.first %}active{% endif %}
"
data-slide-id="{{slide}}"
{{ block.shopify_attributes }}
>

{% if linkUrl != blank %}
<a class="slide-link" href="{{ linkUrl }}"></a>
{% endif %}

{{- image_html -}}

{% if textAbove != blank or heading != blank or textBelow != blank %}
<div class="slide-content" style="color: {{ textColor }};">
{% if textAbove != blank %}
<p>{{ textAbove }}</p>
{% endif %}

{% if heading != blank %}
<h3 class="slide-title">{{ heading }}</h3>
{% endif %}

{% if textBelow != blank %}
<p>{{ textBelow }}</p>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
{% else %}
{% for i in (1..2) %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}

<div
id="slide-{{ current }}"
class="
slideshow-slide
slide-{{ current }}
content-aligned-center
{% if forloop.first %}active{% endif %}
"
>
<div class="slide-image">
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>

<div class="slide-content" style="color: {{ textColor }};">
<p>{{ 'onboarding.slideshow.text_above' | t }}</p>
<h3 class="slide-title">{{ 'onboarding.slideshow.slide_title' | t }}</h3>
<p>{{ 'onboarding.slideshow.text_below' | t }}</p>
</div>
</div>
{% endfor %}
{% endif %}
</div>

{% if slideCount > 1 %}
<div class="slideshow-navigation previous-slide"><span>&#57361;</span></div>
<div class="slideshow-navigation next-slide"><span>&#57362;</span></div>

<div class="slideshow-pagination">
{% for block in section.blocks %}
{% assign position = forloop.index %}
{% assign slide = 'slide-' | append: position %}

<span class="{% if slide == 'slide-1' %}active{% endif %}" data-slide-id="{{slide}}"><span></span></span>
{% endfor %}
</div>
{% endif %}
</div>

</div>
</div>

</div>

0 Likes