Custom Html Slideshow with Images and text on top of them (Supply)

[GregoryKika]

Good morning everyone,

I'm trying to replace the standard Slideshow in the Supply theme with the same one, except I would need the pictures and the text to be separate (in order to save money with translation apps).

Does anyone know of a simple code that would help me achieve what I need to do.

Basically I would like to know:

1) How to add a text OVER an image

2) How to have multiple texts and image in a slideshow

It would also work if I could do something similar using the slideshow option.

Thanks to anyone who can help me

[oscprofessional · Accepted solution]

okay,
I can see the {%schema%} and {%endschema%} this two word repeating.

{
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }

directly add this code in your existing schema in block section.

[Ajay-app-dev]

@GregoryKika , kindly share the store url, share password as well if password protected. 

[GregoryKika]

Here you go

https://kikaonline.com/

[Ajay-app-dev]

Let me check 

[Ajay-app-dev]

Hi @GregoryKika , well  you can use default slider of supply theme or shopify provide slideshow. 

Also, in default shopify slider, you can add multiple slides with text and images.

And regarding your custom requirements like ,you wants to add the text over image and have multiple slides as per your requirement. I can help you out.

At this point,  kindly add default shopify slider , and get back to me. Will do text over image. 

Thanks 

[GregoryKika]

Good morning, 

I changed the slider to have pictures without text, the text that need to be added on each image is in the Image Description

Could you also provide me a code to have an image with text on the side, plus a text on top of the image like this one (I would like to be able to edit them by myself in case I need to add/remove sections)

Hope that helps.

Thank you for your help

[oscprofessional]

Hello @GregoryKika 

You have to do some custom code in slideshow file to dyanamically add the text and subtext

You just have to create a schema for richtext .
Please refer the following code to create schema  shown below

<section>
  {%- if section.settings.title != blank -%}
    <h2>{{ section.settings.title | escape }}</h2>
  {%- endif -%}
  {%- if section.settings.text != blank -%}
    <div class="rte">
      {{ section.settings.text }}
    </div>
  {%- endif -%}
</section>

{% schema %}
  {
    "name": "Rich text",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }
    ],
    "presets": [{
        "name": "Rich text",
        "category": "Text"
    }]
  }
{% endschema %}

[GregoryKika]

Hey @oscprofessional , where exactly should I copy that code?

[oscprofessional]

You have to add the schema in slideshow.liquid file

[GregoryKika]

I get this error message when I try to add it

• Line 433 — Liquid syntax error: Duplicate entries for tag: schema

[oscprofessional · Accepted solution]

okay,
I can see the {%schema%} and {%endschema%} this two word repeating.

{
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }

directly add this code in your existing schema in block section.

[GregoryKika]

I get another error

[oscprofessional]

You have to add it like this

 

[GregoryKika]

Oh, perfect. Now it's working.

And what I'll add will appear in the slideshow editing options, right?

[oscprofessional]

Yes, absolutely correct.

[GregoryKika]

So, the options panel changed in the Shopify editing part, but I cannot see what's in the text box over the image.

[oscprofessional]

Can you show me the HTML code for Heading and text?

[GregoryKika]

This is the whole code for the Slideshow part. I added the <section> part before closing the <div> tag

In the editor I just wrote the Word "Cuidado de la piel" for checking if it worked.

<hr>
<div class="flexslider" id="heroSlider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-slider-home-auto="{{ section.settings.slider_home_auto }}" data-slider-home-rate="{{ section.settings.slider_home_rate }}">
  <ul class="slides">
    {% for block in section.blocks %}
      <li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
        {% if block.settings.slide != blank %}
          {% if block.settings.link %}
            <a href="{{ block.settings.link }}" class="slide-link">
          {% endif %}
            {%- assign image = block.settings.slide -%}
            {%- capture img_wrapper_id -%}slideShowImageWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = 1000 -%}
            {%- assign max_height = 1500 -%}

            {%- include 'image-logic' with width: max_width, height: max_height -%}

            {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
              <div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                <img
                  class="lazyload js {% if forloop.index > 1%}lazypreload{% endif %}"
                  src="{{ image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}">
              </div>
            </div>

            <noscript>
              <img src="{{ image | img_url: '580x' }}"
                srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                alt="{{ image.alt }}" style="opacity:1;">
            </noscript>
            {% comment %}<img src="{{ image | img_url: '1024x' }}"
            srcset="{{ image | img_url: '1024x' }} 1x, {{ image | img_url: '1024x', scale: 2 }} 2x" alt="{{ image.alt }}">{% endcomment %}

          {% if block.settings.link %}
            </a>
          {% endif %}

        {% else %}
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {% capture svg_tag_class %}placeholder-noblocks slide-link slide-link--{{ block.id }}{% endcapture %}
          {%- assign placeholder = 'placeholder-lifestyle-' | append: current -%}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: svg_tag_class }}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
  <section>
  {%- if section.settings.title != blank -%}
    <h2>{{ section.settings.title | escape }}</h2>
  {%- endif -%}
  {%- if section.settings.text != blank -%}
    <div class="rte">
      {{ section.settings.text }}
    </div>
  {%- endif -%}
</section>
</div>



{% schema %}
{
  "name": {
    "cs": "Prezentace",
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "hi": "स्लाइडशो",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pl": "Pokaz slajdów",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "tr": "Slayt gösterisi",
    "vi": "Bản trình chiếu",
    "zh-CN": "幻灯片",
    "zh-TW": "素材輪播"
  },
  "class": "slider-section",
  "max_blocks": 6,
  "settings": [
    {
      "type": "checkbox",
      "id": "slider_home_auto",
      "label": {
        "cs": "Automaticky otočit snímky",
        "da": "Roter automatisk slides",
        "de": "Auto-rotieren der Slides",
        "en": "Auto-rotate slides",
        "es": "Rotar las diapositivas automáticamente",
        "fi": "Käännä diat automaattisesti",
        "fr": "Rotation automatique des diapositives",
        "hi": "ऑटो-रोटेट स्लाइड",
        "it": "Ruota slide automaticamente",
        "ja": "スライドの自動切り替え",
        "ko": "슬라이드 자동 회전",
        "nb": "Autoroter lysbildene",
        "nl": "Dia's automatisch draaien",
        "pl": "Automatycznie obracaj slajdy",
        "pt-BR": "Rodar os slides automaticamente",
        "pt-PT": "Reprodução automática de diapositivos",
        "sv": "Auto-rotera bilder",
        "th": "หมุนสไลด์อัตโนมัติ",
        "tr": "Slaytları otomatik olarak döndür",
        "vi": "Tự động xoay vòng trang chiếu",
        "zh-CN": "自动旋转幻灯片",
        "zh-TW": "自動旋轉投影片"
      }
    },
    {
      "type": "select",
      "id": "slider_home_rate",
      "label": {
        "cs": "Doba trvání přechodu",
        "da": "Overførselstid",
        "de": "Übergangszeit",
        "en": "Transition time",
        "es": "Tiempo de transición",
        "fi": "Siirtymäaika",
        "fr": "Temps de transition",
        "hi": "हस्तांतरण का समय",
        "it": "Tempo transizione",
        "ja": "トランジション時間",
        "ko": "전환 시간",
        "nb": "Overgangstid",
        "nl": "Overgangstijd",
        "pl": "Czas przejścia",
        "pt-BR": "Tempo da transição",
        "pt-PT": "Tempo da transição",
        "sv": "Övergångstid",
        "th": "เวลาเปลี่ยน",
        "tr": "Geçiş süresi",
        "vi": "Thời gian chuyển",
        "zh-CN": "过渡时间",
        "zh-TW": "轉場時間"
      },
      "options": [
        {
          "value": "5000",
          "label": {
            "cs": "5 s",
            "da": "5 sekunder",
            "de": "5 Sekunden",
            "en": "5 seconds",
            "es": "5 segundos",
            "fi": "5 sekuntia",
            "fr": "5 secondes",
            "hi": "5 सेकंड",
            "it": "5 secondi",
            "ja": "5秒",
            "ko": "5초",
            "nb": "5 sekunder",
            "nl": "5 seconden",
            "pl": "5 sekund",
            "pt-BR": "5 segundos",
            "pt-PT": "5 segundos",
            "sv": "5 sekunder",
            "th": "5 วินาที",
            "tr": "5 saniye",
            "vi": "5 giây",
            "zh-CN": "5 秒",
            "zh-TW": "5 秒"
          }
        },
        {
          "value": "7000",
          "label": {
            "cs": "7 s",
            "da": "7 sekunder",
            "de": "7 Sekunden",
            "en": "7 seconds",
            "es": "7 segundos",
            "fi": "7 sekuntia",
            "fr": "7 secondes",
            "hi": "7 सेकंड",
            "it": "7 secondi",
            "ja": "7秒",
            "ko": "7초",
            "nb": "7 sekunder",
            "nl": "7 seconden",
            "pl": "7 sekund",
            "pt-BR": "7 segundos",
            "pt-PT": "7 segundos",
            "sv": "7 sekunder",
            "th": "7 วินาที",
            "tr": "7 saniye",
            "vi": "7 giây",
            "zh-CN": "7 秒",
            "zh-TW": "7 秒"
          }
        },
        {
          "value": "10000",
          "label": {
            "cs": "10 s",
            "da": "10 sekunder",
            "de": "10 Sekunden",
            "en": "10 seconds",
            "es": "10 segundos",
            "fi": "10 sekuntia",
            "fr": "10 secondes",
            "hi": "10 सेकंड",
            "it": "10 secondi",
            "ja": "10秒",
            "ko": "10초",
            "nb": "10 sekunder",
            "nl": "10 seconden",
            "pl": "10 sekund",
            "pt-BR": "10 segundos",
            "pt-PT": "10 segundos",
            "sv": "10 sekunder",
            "th": "10 วินาที",
            "tr": "10 saniye",
            "vi": "10 giây",
            "zh-CN": "10 秒",
            "zh-TW": "10 秒"
          }
        },
        {
          "value": "15000",
          "label": {
            "cs": "15 s",
            "da": "15 sekunder",
            "de": "15 Sekunden",
            "en": "15 seconds",
            "es": "15 segundos",
            "fi": "15 sekuntia",
            "fr": "15 secondes",
            "hi": "15 सेकंड",
            "it": "15 secondi",
            "ja": "15秒",
            "ko": "15초",
            "nb": "15 sekunder",
            "nl": "15 seconden",
            "pl": "15 sekund",
            "pt-BR": "15 segundos",
            "pt-PT": "15 segundos",
            "sv": "15 sekunder",
            "th": "15 วินาที",
            "tr": "15 saniye",
            "vi": "15 giây",
            "zh-CN": "15 秒",
            "zh-TW": "15 秒"
          }
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Prezentace",
        "da": "Diasshow",
        "de": "Slideshow",
        "en": "Slideshow",
        "es": "Diapositivas",
        "fi": "Diaesitys",
        "fr": "Diaporama",
        "hi": "स्लाइडशो",
        "it": "Presentazione",
        "ja": "スライドショー",
        "ko": "슬라이드 쇼",
        "nb": "Lysbildefremvisning",
        "nl": "Diavoorstelling",
        "pl": "Pokaz slajdów",
        "pt-BR": "Apresentação de slides",
        "pt-PT": "Apresentação de diapositivos",
        "sv": "Bildspel",
        "th": "สไลด์โชว์",
        "tr": "Slayt gösterisi",
        "vi": "Bản trình chiếu",
        "zh-CN": "幻灯片",
        "zh-TW": "素材輪播"
      },
      "category": {
        "cs": "Obrázek",
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pl": "Obraz",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "tr": "Görsel",
        "vi": "Hình ảnh",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "blocks": [
        {
          "type": "image"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "cs": "Obrázek",
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pl": "Obraz",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "tr": "Görsel",
        "vi": "Hình ảnh",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": [
{
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Talk about your brand"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      },
        {
          "type": "image_picker",
          "id": "slide",
          "label": {
            "cs": "Obrázek",
            "da": "Billede",
            "de": "Foto",
            "en": "Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "hi": "इमेज",
            "it": "Immagine",
            "ja": "画像",
            "ko": "이미지",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pl": "Obraz",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "tr": "Görsel",
            "vi": "Hình ảnh",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          },
          "info": {
            "cs": "Doporučujeme 1 000 × 800 pixelů",
            "da": "1.000 x 500 px anbefales",
            "de": "1000 x 500px empfohlen",
            "en": "1000 x 500px recommended",
            "es": "1000 x 500px recomendado",
            "fi": "Suositus 1000 x 500 px",
            "fr": "1000 x 500 px recommandé",
            "hi": "1000 x 500px की अनुशंसा की जाती है",
            "it": "Dimensione consigliata: 1000 x 500 pixel",
            "ja": "1000 x 500ピクセルを推奨",
            "ko": "1280 x 800 픽셀 권장",
            "nb": "1000 x 500 piksler anbefales",
            "nl": "1000 x 500px aanbevolen",
            "pl": "Zalecane 1000 x 500 px",
            "pt-BR": "1.000 x 500 px recomendado",
            "pt-PT": "1000 x 500 px recomendado",
            "sv": "1 280 x 800px rekommenderas",
            "th": "แนะนำขนาด 1000 x 500px พิกเซล",
            "tr": "1000 x 500 piksel önerilir",
            "vi": "Đề xuất 1000 x 500px",
            "zh-CN": "推荐使用 1000 x 500 px 大小",
            "zh-TW": "建議使用 1000 x 500px"
          }
        },
        {
          "type": "url",
          "id": "link",
          "label": {
            "cs": "URL odkazu",
            "da": "Link-webadresse",
            "de": "Link URL",
            "en": "Link URL",
            "es": "URL del enlace",
            "fi": "Linkin URL",
            "fr": "Lien URL",
            "hi": "URL लिंक करें",
            "it": "Link URL",
            "ja": "リンクURL",
            "ko": "링크 URL",
            "nb": "Nettadresse for kobling",
            "nl": "URL van link",
            "pl": "Adres URL linku",
            "pt-BR": "URL do link",
            "pt-PT": "URL da ligação",
            "sv": "Länk-URL",
            "th": "ลิงก์ URL",
            "tr": "Bağlantı URL'si",
            "vi": "URL liên kết",
            "zh-CN": "链接 URL",
            "zh-TW": "連結 URL"
          }
        }

      ]
    }
  ]
}
{% endschema %}

[GregoryKika]

With the code you sent me, the text is now showing on the bottom of the picture.

I would like it to be above the picture and in the center, where the white line is

[oscprofessional]

@GregoryKika,

You have to set this via CSS code. Now only need to apply basic CSS just like to set position and width height that's it.

Also please You can mark it as an accepted solution. So other should know there are no action required for this thread.

[GregoryKika]

Perfect, thank you so much!

[GregoryKika]

Should I set the CSS in the slideshow.liquid file?

[oscprofessional]

There is a theme.scss.liquid file inside Asset folder.
Add a css inside this file.

[GregoryKika]

Should I add a css style in that part of the theme.scss.liquid file?

I can't figure out how to make it move to the top part of the image.

[oscprofessional]

You can add it at the end of file

[GregoryKika]

Sorry to bother you again, I can't seem to find the proper way to have it go where I want it.

I tried different position properties but I see no changes in the website.

[oscprofessional · Accepted solution]

Hi

Please add the code in theme.scss.css file

.flex-viewport .slides li h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: red;/*just to highlight the text. change it as per requirement*/
}
.flex-viewport .slides li {
    position: relative;
}

[GregoryKika]

Thank you very much. Should I accept that as a solution too since it's a part of what I needed to do?

[oscprofessional]

Please Accept it again