Custom mobile only and desktop only slideshows - Debut theme

Tourist
3 0 1

Hi, so after looking for solution online I managed to edit the code by myself and created 2 new slides (one for mobile and one for desktop), I used the basic slideshow code to define the new ones.

Basically this is crated to allow load different images when your website is loaded on mobile phone.

The dimensions I use for my images are:

Mobile 800X800

Desktop 1900X1188

 

Go to Edit code on your website and in the Sections folder, choose Create new section:

Call the file: index-slideshow-mobile

Use the Create section button to complete. 

Erase all the default code that's generated.

Replace with all the code:

<div class="slideshow-mobile" data-section-id="{{ section.id }}" data-section-type="slideshow-section">

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
        <span class="slideshow__pause-stop">
          {% include 'icon-pause' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
        </span>
        <span class="slideshow__pause-play">
          {% include 'icon-play' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
        </span>
      </button>

      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
        {% for block in section.blocks %}
          {%- assign is_background_video = false -%}
          {% if block.type == 'video' %}
            {% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
              {%- assign is_background_video = true -%}
            {% endif %}
          {% endif %}

          <div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="slideshow__link">
            {% endif %}

            {% if block.type == 'video' %}
              {% if block.settings.video_url != blank %}
                <div class="video-loader"></div>
              {% endif %}
              {% unless block.settings.video_type == 'background' %}
                <button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
                  {% include 'icon-close' %}
                  <span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
                </button>
              {% endunless %}
              {% if block.settings.video_url != blank %}
                <div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
                  data-id="{{ block.settings.video_url.id }}"
                  data-type="{{ block.settings.video_type }}"
                  data-slideshow="Slideshow-{{ section.id }}"></div>
              {% endif %}
            {% endif %}

            {% 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>
              </div>
            {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% 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">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>
            <div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
              <div class="slideshow__text-content">
                <div class="page-width">
                  {% unless block.settings.title == blank %}
                    <h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                      {{ block.settings.title | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.subheading == blank %}
                    <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                      {{ block.settings.subheading | escape }}
                    </span>
                  {% endunless %}
                  {% if block.type == 'video' %}
                    {% unless block.settings.video_type == 'background' %}
                      <div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
                        <button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
                          {% include 'icon-play-video' %}
                          <span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
                        </button>
                      </div>
                    {% endunless %}
                  {% endif %}
                </div>
              </div>
            </div>

            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": {
      "en": "Slideshow Mobile",
      "de": "Slideshow Mobile",
      "fr": "Slideshow Mobile"
    },
    "class": "index-section index-section--flush",
    "max_blocks": 8,
    "settings": [
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": {
          "en": "Auto-rotate slides",
          "de": "Auto-rotieren der Slides",
          "fr": "Rotation automatique des diapositives"
        },
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": {
          "en": "Change slides every",
          "de": "Slides überall ändern",
          "fr": "Changer de diapositive toutes les"
        },
        "max": 10,
        "min": 5,
        "step": 1,
        "unit": {
          "en": "sec",
          "de": "sek",
          "fr": "sec"
        },
        "default": 7
      },
      {
        "type": "select",
        "id": "slideshow_height",
        "label": {
          "en": "Section height",
          "de": "Höhe des Bereichs",
          "fr": "Taille de la section"
        },
        "default": "small",
        "options": [
          {
            "label": {
              "en": "Small",
              "de": "Klein",
              "fr": "Petite"
            },
            "value": "small"
          },
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      },
      {
        "type": "select",
        "id": "text_size",
        "label": {
          "en": "Text size",
          "de": "Textgröße",
          "fr": "Taille du texte"
        },
        "default": "medium",
        "options": [
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": {
          "en": "Image slide",
          "de": "Foto-Slide",
          "fr": "Diapositive (image)"
        },
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            }
          },
          {
            "type": "select",
            "id": "alignment",
            "label": {
              "en": "Image alignment",
              "de": "Fotoausrichtung",
              "fr": "Alignement de l'image"
            },
            "default": "top",
            "options": [
              {
                "value": "top",
                "label": {
                  "en": "Top",
                  "de": "Oben",
                  "fr": "Haut"
                }
              },
              {
                "value": "center",
                "label": {
                  "en": "Middle",
                  "de": "Mitte",
                  "fr": "Milieu"
                }
              },
              {
                "value": "bottom",
                "label": {
                  "en": "Bottom",
                  "de": "Unten",
                  "fr": "Bas"
                }
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Image slide",
              "de": "Foto-Slide",
              "fr": "Diapositive (image)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          },
          {
            "type": "url",
            "id": "link",
            "label": {
              "en": "Slide link",
              "de": "Slide-Link",
              "fr": "Lien de la diapositive"
            }
          }
        ]
      },
      {
        "type": "video",
        "name": {
          "en": "Video slide",
          "de": "Video-Slide",
          "fr": "Diapositive (vidéo)"
        },
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": {
              "en": "Video link",
              "de": "Video-Link",
              "fr": "Lien de la vidéo"
            },
            "accept": ["youtube"],
            "default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
          },
          {
            "type": "select",
            "id": "video_type",
            "label": {
              "en": "Style",
              "de": "Stil",
              "fr": "Style"
            },
            "options": [
              {
                "value": "chrome",
                "label": {
                  "en": "Image with play button",
                  "de": "Foto mit Play Button",
                  "fr": "Image avec bouton de lecture"
                }
              },
              {
                "value": "background-chrome",
                "label": {
                  "en": "Background video with play button",
                  "de": "Hintergrund-Video mit Play Button",
                  "fr": "Vidéo d'arrière-plan avec bouton de lecture"
                }
              },
              {
                "value": "background",
                "label": {
                  "en": "Background video",
                  "de": "Hintergrund-Video",
                  "fr": "Vidéo d'arrière-plan"
                }
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            },
            "info": {
              "en": "Fallback when autoplaying video is not supported on mobile devices",
              "de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
              "fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
            }
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Video slide",
              "de": "Video-Slide",
              "fr": "Diapositive (vidéo)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          }
        ]
      }
    ],
    "presets": [{
      "name": {
        "en": "Slideshow Mobile",
        "de": "Slideshow Mobile",
        "fr": "Slideshow Mobile"
      },
      "category": {
        "en": "Image",
        "de": "Foto",
        "fr": "Image"
      },
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }]
  }
{% endschema %}

 

Save the file.

Next, create a second section file:

In the Sections folder, choose Create new section:

Call the file: index-slideshow-desktop

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code:

<div class="slideshow-desktop" data-section-id="{{ section.id }}" data-section-type="slideshow-section">

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
        <span class="slideshow__pause-stop">
          {% include 'icon-pause' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
        </span>
        <span class="slideshow__pause-play">
          {% include 'icon-play' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
        </span>
      </button>

      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
        {% for block in section.blocks %}
          {%- assign is_background_video = false -%}
          {% if block.type == 'video' %}
            {% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
              {%- assign is_background_video = true -%}
            {% endif %}
          {% endif %}

          <div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="slideshow__link">
            {% endif %}

            {% if block.type == 'video' %}
              {% if block.settings.video_url != blank %}
                <div class="video-loader"></div>
              {% endif %}
              {% unless block.settings.video_type == 'background' %}
                <button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
                  {% include 'icon-close' %}
                  <span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
                </button>
              {% endunless %}
              {% if block.settings.video_url != blank %}
                <div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
                  data-id="{{ block.settings.video_url.id }}"
                  data-type="{{ block.settings.video_type }}"
                  data-slideshow="Slideshow-{{ section.id }}"></div>
              {% endif %}
            {% endif %}

            {% 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>
              </div>
            {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% 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">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>
            <div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
              <div class="slideshow__text-content">
                <div class="page-width">
                  {% unless block.settings.title == blank %}
                    <h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                      {{ block.settings.title | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.subheading == blank %}
                    <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                      {{ block.settings.subheading | escape }}
                    </span>
                  {% endunless %}
                  {% if block.type == 'video' %}
                    {% unless block.settings.video_type == 'background' %}
                      <div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
                        <button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
                          {% include 'icon-play-video' %}
                          <span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
                        </button>
                      </div>
                    {% endunless %}
                  {% endif %}
                </div>
              </div>
            </div>

            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": {
      "en": "Slideshow Desktop",
      "de": "Slideshow Desktop",
      "fr": "Slideshow Desktop"
    },
    "class": "index-section index-section--flush",
    "max_blocks": 8,
    "settings": [
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": {
          "en": "Auto-rotate slides",
          "de": "Auto-rotieren der Slides",
          "fr": "Rotation automatique des diapositives"
        },
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": {
          "en": "Change slides every",
          "de": "Slides überall ändern",
          "fr": "Changer de diapositive toutes les"
        },
        "max": 10,
        "min": 5,
        "step": 1,
        "unit": {
          "en": "sec",
          "de": "sek",
          "fr": "sec"
        },
        "default": 7
      },
      {
        "type": "select",
        "id": "slideshow_height",
        "label": {
          "en": "Section height",
          "de": "Höhe des Bereichs",
          "fr": "Taille de la section"
        },
        "default": "small",
        "options": [
          {
            "label": {
              "en": "Small",
              "de": "Klein",
              "fr": "Petite"
            },
            "value": "small"
          },
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      },
      {
        "type": "select",
        "id": "text_size",
        "label": {
          "en": "Text size",
          "de": "Textgröße",
          "fr": "Taille du texte"
        },
        "default": "medium",
        "options": [
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": {
          "en": "Image slide",
          "de": "Foto-Slide",
          "fr": "Diapositive (image)"
        },
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            }
          },
          {
            "type": "select",
            "id": "alignment",
            "label": {
              "en": "Image alignment",
              "de": "Fotoausrichtung",
              "fr": "Alignement de l'image"
            },
            "default": "top",
            "options": [
              {
                "value": "top",
                "label": {
                  "en": "Top",
                  "de": "Oben",
                  "fr": "Haut"
                }
              },
              {
                "value": "center",
                "label": {
                  "en": "Middle",
                  "de": "Mitte",
                  "fr": "Milieu"
                }
              },
              {
                "value": "bottom",
                "label": {
                  "en": "Bottom",
                  "de": "Unten",
                  "fr": "Bas"
                }
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Image slide",
              "de": "Foto-Slide",
              "fr": "Diapositive (image)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          },
          {
            "type": "url",
            "id": "link",
            "label": {
              "en": "Slide link",
              "de": "Slide-Link",
              "fr": "Lien de la diapositive"
            }
          }
        ]
      },
      {
        "type": "video",
        "name": {
          "en": "Video slide",
          "de": "Video-Slide",
          "fr": "Diapositive (vidéo)"
        },
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": {
              "en": "Video link",
              "de": "Video-Link",
              "fr": "Lien de la vidéo"
            },
            "accept": ["youtube"],
            "default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
          },
          {
            "type": "select",
            "id": "video_type",
            "label": {
              "en": "Style",
              "de": "Stil",
              "fr": "Style"
            },
            "options": [
              {
                "value": "chrome",
                "label": {
                  "en": "Image with play button",
                  "de": "Foto mit Play Button",
                  "fr": "Image avec bouton de lecture"
                }
              },
              {
                "value": "background-chrome",
                "label": {
                  "en": "Background video with play button",
                  "de": "Hintergrund-Video mit Play Button",
                  "fr": "Vidéo d'arrière-plan avec bouton de lecture"
                }
              },
              {
                "value": "background",
                "label": {
                  "en": "Background video",
                  "de": "Hintergrund-Video",
                  "fr": "Vidéo d'arrière-plan"
                }
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            },
            "info": {
              "en": "Fallback when autoplaying video is not supported on mobile devices",
              "de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
              "fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
            }
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Video slide",
              "de": "Video-Slide",
              "fr": "Diapositive (vidéo)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          }
        ]
      }
    ],
    "presets": [{
      "name": {
        "en": "Slideshow Desktop",
        "de": "Slideshow Desktop",
        "fr": "Slideshow Desktop"
      },
      "category": {
        "en": "Image",
        "de": "Foto",
        "fr": "Image"
      },
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }]
  }
{% endschema %}

 

Open your theme.scss.liquid file

at the end add the following code:

@media screen and (max-width:749px){
    .slideshow-desktop {display:none;
        display: none;
    }
}

@media screen and (min-width:750px){
    .slideshow-mobile {display:none;
        display: none;
    }
}

 

Thats it, now do to "Customize" on your theme and you will see under "Sections":

  • Slideshow Desktop
  • Slideshow Mobile

Add both of them to your website and load 800X800 images on Mobile slideshow and 1900X1188 on Desktop slideshow.

:)

Want to hire me to help with your Debut theme? Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal
1 Like
Excursionist
39 1 8

Hi Valeria,

So you don't want to show the mobile image section on desktop and Desktop image section on the mobile right?

Please let me know.

Thanks.

Regards,
Priyanka.

0 Likes
New Member
2 0 0

This is great! do you have the same code for the Brooklyn theme??

0 Likes
New Member
1 0 0

Hi Valeria,

 

first of all, I would like to thank you for taking your time with this. It works perfect for me but I have one additional question. Is there any possible way to add "Adapt to first image" option in slide/section height like it is in original theme under "slideshow" element/section?

 

Thanks!

I hope it's clear what I want :)

Vasja

0 Likes
New Member
1 0 0

Hello, it is not working and followed the instructions properly. any thing I'm missing?

0 Likes
Highlighted
New Member
1 0 0

Hey! Thank you for this!

 

I've followed the steps you posted but I'm still having some issues. Both slideshows (mobile and desktop version) elements seem to load into the page, and I can see they are pulling images but nothing is displayed. Basically, I can see the space where the slideshow should be, and I can see it loading if I inspect it but the slideshow itself doesn't seem to be working. Any ideas?

These are the errors I get in Console:

 

Screen Shot 2019-08-14 at 12.44.52.png

0 Likes