[Mobile/PC] Customizing Liquid Theme To Display Different Photos for Mobile and PC (in a Slideshow)

[KaiKitayama]

Dear Shopify Community

I am trying to display two different images for a slideshow, depending on if it is mobile or PC.
My site is greencbd.jp with password "kaikai".

I am trying to display a square image for mobile, and a banner rectangle image for PC. I am benchmarking the site https://www.paperplanestore.com/.

Looking at other posts, Ive been able to create custom menus for the visual editor, but am totally lost on how to display them according to user's screen size.
Please help out! I will put in the code I have currently below:

<script
  type="application/json"
  data-section-type="dynamic-slideshow"
  data-section-id="{{ section.id }}"
  data-section-data
>
{
    "autoplay": {{ section.settings.autoplay }},
    "autoplayDelay": {{ section.settings.autoplay_delay }},
    "autoplayHoverPause": {{ section.settings.autoplay-hover-pause }}
  }
</script>

{%- assign slideIndex = 0 -%}
{%- assign slide_count = section.blocks.size -%}

{%- if slide_count == 0 -%}
  {%- assign slide_count = 3 -%}
{%- endif -%}

<section
  class="home-slideshow home-slideshow-layout-{{ section.settings.layout }}"
  data-slideshow
  data-slideshow-layout="{{ section.settings.layout }}"
  data-slideshow-slides="{{ slide_count }}"
>
  {%- unless section.blocks.size == 0 -%}
    {%- for block in section.blocks -%}
      {%- case block.type -%}
      {%- when 'slide' -%}
        {%- assign slideIndex = slideIndex | plus: 1 -%}
        {%- assign lifestyleIndex = slideIndex | modulo: 2 | plus: 1 -%}
        {%- assign lifestyleImage = 'lifestyle-' | append: lifestyleIndex -%}
          {%- capture image -%}
            {{ lifestyleImage | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endcapture -%}

        {%-
          render 'home-slideshow-slide',
          block: block,
          slideIndex: slideIndex,
          onboard_image: image,
        -%}
      {%- endcase -%}
    {%- endfor -%}
  {%- else -%}
    {%- for i in (1..slide_count) -%}
      {%- assign slideIndex = slideIndex | plus: 1 -%}
      {%- assign lifestyleIndex = slideIndex | modulo: 2 | plus: 1 -%}
      {%- assign lifestyleImage = 'lifestyle-' | append: lifestyleIndex -%}
      {%- capture image -%}
          <canvas class="home-slideshow-svg-ie11-fix" width="50" height="19"></canvas>
          {{ lifestyleImage | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endcapture -%}
      {%- capture contentAlignment -%}
        {%- cycle 'left', 'center', 'right' -%}
      {%- endcapture -%}

      {%-
        render 'home-slideshow-slide',
        slideIndex: slideIndex,
        contentAlignment: contentAlignment,
        onboard_image: image,
      -%}
    {%- endfor -%}
  {%- endunless -%}

  <style>
    #shopify-section-{{ section.id }} .home-slideshow .flickity-prev-next-button .arrow {
      fill: {{ section.settings.controls-color | default: '#000' }};
    }

    #shopify-section-{{ section.id }} .home-slideshow .flickity-page-dots .dot {
      background: {{ section.settings.controls-color | default: '#000' }};
    }
  </style>
</section>

{% schema %}
{
  "name": "Slideshow",
  "class": "section-slideshow",
  "max_blocks": 6,
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "content-width",
          "label": "Content width"
        },
        {
          "value": "full-width",
          "label": "Full width"
        }
      ],
      "default": "full-width"
    },
    {
      "type": "color",
      "id": "controls-color",
      "label": "Slideshow controls"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Auto-rotate slides",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_delay",
      "label": "Rotation interval",
      "min": 2,
      "max": 10,
      "step": 1,
      "unit": "sec",
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "autoplay-hover-pause",
      "label": "Pause auto-rotate on hover",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "2880 x 1280px recommended"
        },
        {
          "type": "select",
          "id": "content-alignment",
          "label": "Align text",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "color",
          "id": "overlay-color",
          "label": "Overlay text",
          "default": "#262626"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Slide"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Introduce customers to your shop with lifestyle imagery and product photography"
        },
        {
          "type": "text",
          "id": "cta",
          "label": "Button",
          "default": "Button"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Link"
        },
        {
          "type": "image_picker",
          "id": "image-mobile",
          "label": "Mobile Image",
          "info": "1280 x 1280px recommended"
        },
        {
          "type": "select",
          "id": "content-alignment-mobile",
          "label": "Align text",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "color",
          "id": "overlay-color-mobile",
          "label": "Overlay text",
          "default": "#262626"
        },
        {
          "type": "text",
          "id": "title-mobile",
          "label": "Heading",
          "default": "Slide"
        },
        {
          "type": "text",
          "id": "subheading-mobile",
          "label": "Subheading",
          "default": "Introduce customers to your shop with lifestyle imagery and product photography"
        },
        {
          "type": "text",
          "id": "cta-mobile",
          "label": "Button",
          "default": "Button"
        },
        {
          "type": "url",
          "id": "url-mobile",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Image",
      "name": "Slideshow",
      "blocks": [
        { "type": "slide" },
        { "type": "slide" },
        { "type": "slide" }
      ]
    }
  ]
}

{% endschema %}

The id's with "-mobile" are the ones I would like to display on Mobile.
I would like to make it exactly like https://www.paperplanestore.com/ header slide show!

Thanks!

Kai

[KaiKitayama]

I also found another code in Snippets, that may help to figure this out:

{% assign block = block | default: nil %}
{% assign image = onboard_image %}
{% assign contentAlignment = contentAlignment %}
{%- assign url = '' -%}
{%- assign heading = 'onboarding.slideshow.title' | t -%}
{%- assign subheading = 'onboarding.slideshow.subtitle' | t -%}
{%- assign cta = 'onboarding.slideshow.cta' | t -%}

{% if block %}
  {%- assign contentAlignment = block.settings.content-alignment -%}
  {%- assign overlayColor = block.settings.overlay-color -%}
  {%- assign heading = block.settings.title | escape -%}
  {%- assign subheading = block.settings.subheading | escape -%}
  {%- assign cta = block.settings.cta | escape -%}
  {%- assign url = block.settings.url -%}
  {%- if block.settings.image -%}
    {%- capture image -%}
        {%
          render 'rimg',
          img: block.settings.image,
          size: '1440x640',
          lazy: true
        %}
    {%- endcapture -%}
    {%- endif -%}
{%- endif -%}



<article
  class="home-slideshow-slide home-slideshow-slide-{{ slideIndex }} home-slideshow-slide-alignment-{{ contentAlignment }}"
  data-slideshow-slide data-slide-index="{{ slideIndex | minus: 1 }}" {{ block.shopify_attributes }}>
    <figure class="home-slideshow-slide-image">
      {%- if url != blank -%}
        <a href="{{ url }}">
          {{ image }}
        </a>
      {%- else -%}
        {{ image }}
      {%- endif -%}
    </figure>

    {% if heading != blank or subheading != blank or cta != blank %}
      <div class="home-slideshow-slide-content">
        <div class="home-slideshow-slide-content-inner">
          {% if heading != blank %}
            <h1 class="home-slideshow-slide-heading" style="{%- if overlayColor -%}color: {{ overlayColor }};{%- endif -%}">{{ heading }}</h1>
          {% endif %}

          {% if subheading != blank %}
            <p class="home-slideshow-slide-subheading" style="{%- if overlayColor -%}color: {{ overlayColor }};{%- endif -%}">{{ subheading }}</p>
          {% endif %}

          {% if cta != blank %}
            <a class="home-slideshow-slide-cta button" href="{{ url }}">{{ cta }}</a>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </figure>
</article>

Please help out!