Image (Logo Lockup) Overlay on Slideshow - Symmetry Theme

Store Design
1

I would like to add a slideshow section with an image overlay (design lockup/logo). Here is the code for slideshow:


    {% style %}
      {%- if section.settings.height == 'fixed' -%}
      #section-id-{{ section.id }} .fixed-height-item {
        height: {{ section.settings.height_mobile }}px;
      }
      {%- endif -%}

      {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          font-size: {{ block.settings.title_size_mobile }}px;
          {%- if block.settings.title_size_mobile >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
      {%- endfor -%}

      @media (min-width: 768px) {
        {%- if section.settings.height == 'fixed' -%}
        #section-id-{{ section.id }} .fixed-height-item {
          height: {{ section.settings.height_desktop }}px;
        }
        {%- endif -%}

        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          {%- assign title_size_medium = block.settings.title_size | times: 0.7 | at_least: block.settings.title_size_mobile -%}
          font-size: {{ title_size_medium }}px;
          {%- if title_size_medium >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }

      @media (min-width: 1100px) {
        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          font-size: {{ block.settings.title_size }}px;
          {%- if block.settings.title_size >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }
    {% endstyle %}

  {%- unless section.settings.full_width -%}
{%- endunless -%}
  

    {%- for block in section.blocks -%}
      {%- liquid
        assign show_overlay_text = false
        if block.settings.title != blank or block.settings.subheading != blank or block.settings.text != blank or block.settings.button_label_1 != blank or block.settings.button_label_2 != blank
          assign show_overlay_text = true
          assign wrap_slide_with_link = true
          if block.settings.slide_link == blank or block.settings.text contains '' or block.settings.button_url_1 != blank or block.settings.button_url_2 != blank
            assign wrap_slide_with_link = false
          endif
        endif
      -%}
      

        {%- if wrap_slide_with_link -%}
          
        {%- endif -%}

        {%- if block.settings.image == blank -%}
          

            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
            {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
          

        {%- else -%}
          
            

              {%- if section.settings.height == 'adapt' -%}
                {%- assign aspect_ratio = section.blocks.first.settings.image.aspect_ratio | default: 2.0 -%}
                

              {%- endif -%}
              
            

          

          {% if block.settings.mobile_image != blank %}
            
              {%- if section.settings.height == 'adapt' -%}
                {%- assign aspect_ratio = section.blocks.first.settings.mobile_image.aspect_ratio | default: 2.0 -%}
                

              {%- endif -%}
              
            

          {% endif %}
        {%- endif -%}

        {%- if show_overlay_text -%}
          

            

              

                {%- if block.settings.subheading != blank -%}
                  

{{ block.settings.subheading | escape }}

                {%- endif -%}
                {%- if block.settings.title != blank -%}
                  ## {{ block.settings.title | newline_to_br }}

                {%- endif -%}
                {%- if block.settings.text != blank -%}
                  
{{ block.settings.text }}

                {%- endif -%}
                {%- if block.settings.button_label_1 != blank or block.settings.button_label_2 != blank -%}
                  

                    {%- if wrap_slide_with_link -%}
                      {%- if block.settings.button_label_1 != blank -%}
                        {{ block.settings.button_label_1 }}
                      {%- endif -%}
                      {%- if block.settings.button_label_2 != blank -%}
                        {{ block.settings.button_label_2 }}
                      {%- endif -%}
                    {%- else -%}
                      {%- if block.settings.button_label_1 != blank -%}
                        {{ block.settings.button_label_1 }}
                      {%- endif -%}
                      {%- if block.settings.button_label_2 != blank -%}
                        {{ block.settings.button_label_2 }}
                      {%- endif -%}
                    {%- endif -%}
                  

                {%- endif -%}
              

            

          

        {%- endif -%}

        {%- if wrap_slide_with_link -%}
          
        {%- endif -%}
      

    {%- endfor -%}
  

  {%- unless section.settings.full_width -%}
{%- endunless -%}

{% schema %}
  {
    "name": "Slideshow",
    "class": "section-slideshow",
    "max_blocks": 8,
    "settings": [
      {
        "type": "radio",
        "id": "height",
        "label": "Slide height",
        "options": [
          {
            "value": "adapt",
            "label": "Adapt to first image"
          },
          {
            "value": "full",
            "label": "Full screen"
          },
          {
            "value": "fixed",
            "label": "Fixed height"
          }
        ],
        "default": "fixed"
      },
      {
        "type": "range",
        "id": "height_desktop",
        "min": 200,
        "max": 1000,
        "step": 20,
        "unit": "px",
        "label": "Desktop fixed height",
        "default": 600
      },
      {
        "type": "range",
        "id": "height_mobile",
        "min": 100,
        "max": 1000,
        "step": 20,
        "unit": "px",
        "label": "Mobile fixed height",
        "default": 460
      },
      {
        "id": "full_width",
        "type": "checkbox",
        "label": "Full page width",
        "default": true
      },
      {
        "id": "mobile_overlay_under",
        "type": "checkbox",
        "label": "Show text below image on mobile",
        "default": false
      },
      {
        "id": "overlay_style",
        "type": "select",
        "label": "Overlay style",
        "default": "shadow",
        "options": [
          {
            "value": "full",
            "label": "Tint"
          },
          {
            "value": "box",
            "label": "Box"
          },
          {
            "value": "shadow",
            "label": "Text shadow"
          },
          {
            "value": "full image-overlay--bg-shadow",
            "label": "Text shadow and tint"
          },
          {
            "value": "no_background",
            "label": "No background"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slideshow navigation"
      },
      {
        "type": "select",
        "id": "slide_transition",
        "label": "Transition",
        "options": [
          {
            "value": "zoom",
            "label": "Zoom"
          },
          {
            "value": "fade",
            "label": "Fade"
          },
          {
            "value": "slide",
            "label": "Slide"
          },
          {
            "value": "slide_fade",
            "label": "Slide & Fade"
          },
          {
            "value": "instant",
            "label": "Instant"
          }
        ],
        "default": "fade"
      },
      {
        "id": "slide_navigation",
        "type": "select",
        "label": "Slide navigation style",
        "default": "arrows",
        "options": [
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "dots",
            "label": "Dots"
          },
          {
            "value": "none",
            "label": "None"
          }
        ]
      },
      {
        "id": "autoplay",
        "type": "checkbox",
        "label": "Auto-rotate slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "min": 1,
        "max": 20,
        "step": 1,
        "unit": "s",
        "label": "Change slides every",
        "default": 7
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "2048 x 1024px recommended"
          },
          {
            "type": "image_picker",
            "id": "mobile_image",
            "label": "Mobile image",
            "info": "1024px x 1024px recommended"
          },
          {
            "type": "select",
            "id": "image_position",
            "label": "Desktop image alignment",
            "info": "Used to keep the subject of your image in view",
            "default": "center center",
            "options": [
              {
                "value": "top left",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "top right",
                "label": "Top right"
              },
              {
                "value": "center left",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "center right",
                "label": "Middle right"
              },
              {
                "value": "bottom left",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "bottom right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "select",
            "id": "mobile_image_position",
            "label": "Mobile image alignment",
            "options": [
              {
                "value": "left top",
                "label": "Top left"
              },
              {
                "value": "center top",
                "label": "Top center"
              },
              {
                "value": "right top",
                "label": "Top right"
              },
              {
                "value": "left center",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "right center",
                "label": "Middle right"
              },
              {
                "value": "left bottom",
                "label": "Bottom left"
              },
              {
                "value": "center bottom",
                "label": "Bottom center"
              },
              {
                "value": "right bottom",
                "label": "Bottom right"
              }
            ],
            "default": "center center"
          },
          {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link",
            "info": "Not used if buttons or text contain links"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "Tell your story"
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\nslide heading"
          },
          {
            "type": "range",
            "id": "title_size",
            "min": 20,
            "max": 150,
            "step": 2,
            "unit": "px",
            "label": "Desktop heading text size",
            "default": 84
          },
          {
            "type": "range",
            "id": "title_size_mobile",
            "min": 20,
            "max": 150,
            "step": 2,
            "unit": "px",
            "label": "Mobile heading text size",
            "default": 46
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "

And optional subtext

"
          },
          {
            "type": "checkbox",
            "id": "enlarge_text",
            "label": "Enlarge text",
            "default": true
          },
          {
            "type": "text",
            "id": "button_label_1",
            "label": "Button 1 label",
            "default": "Shop this"
          },
          {
            "type": "url",
            "id": "button_url_1",
            "label": "Button 1 link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "label": "Button 2 label",
            "default": "Shop all"
          },
          {
            "type": "url",
            "id": "button_url_2",
            "label": "Button 2 link"
          },
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text overlay position",
            "options": [
              {
                "value": "top left",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "top right",
                "label": "Top right"
              },
              {
                "value": "center left",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "center right",
                "label": "Middle right"
              },
              {
                "value": "bottom left",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "bottom right",
                "label": "Bottom right"
              }
            ],
            "default": "center center"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "settings": {
        },
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}
2

@LitExtension

3

are you able to help with this? @LitExtension

4

Hi @sheadooleyco ,

Please change code:


    {% style %}
      {%- if section.settings.height == 'fixed' -%}
      #section-id-{{ section.id }} .fixed-height-item {
        height: {{ section.settings.height_mobile }}px;
      }
      {%- endif -%}

      {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          font-size: {{ block.settings.title_size_mobile }}px;
          {%- if block.settings.title_size_mobile >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
      {%- endfor -%}

      @media (min-width: 768px) {
        {%- if section.settings.height == 'fixed' -%}
        #section-id-{{ section.id }} .fixed-height-item {
          height: {{ section.settings.height_desktop }}px;
        }
        {%- endif -%}

        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          {%- assign title_size_medium = block.settings.title_size | times: 0.7 | at_least: block.settings.title_size_mobile -%}
          font-size: {{ title_size_medium }}px;
          {%- if title_size_medium >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }

      @media (min-width: 1100px) {
        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
          font-size: {{ block.settings.title_size }}px;
          {%- if block.settings.title_size >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }
    {% endstyle %}

  {%- unless section.settings.full_width -%}
{%- endunless -%}
  

    {%- for block in section.blocks -%}
      {%- liquid
        assign show_overlay_text = false
        if block.settings.title != blank or block.settings.subheading != blank or block.settings.text != blank or block.settings.button_label_1 != blank or block.settings.button_label_2 != blank
          assign show_overlay_text = true
          assign wrap_slide_with_link = true
          if block.settings.slide_link == blank or block.settings.text contains '' or block.settings.button_url_1 != blank or block.settings.button_url_2 != blank
            assign wrap_slide_with_link = false
          endif
        endif
      -%}
      

        {%- if wrap_slide_with_link -%}
          
        {%- endif -%}

        {%- if block.settings.image == blank -%}
          

            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
            {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
          

        {%- else -%}
          
            

              {%- if section.settings.height == 'adapt' -%}
                {%- assign aspect_ratio = section.blocks.first.settings.image.aspect_ratio | default: 2.0 -%}
                

              {%- endif -%}
              
            

          

          {% if block.settings.mobile_image != blank %}
            
              {%- if section.settings.height == 'adapt' -%}
                {%- assign aspect_ratio = section.blocks.first.settings.mobile_image.aspect_ratio | default: 2.0 -%}
                

              {%- endif -%}
              
            

          {% endif %}
        {%- endif -%}

        {%- if show_overlay_text -%}
          

            

              

                {%- if block.settings.caption != blank -%}
                  

                    ## 
                      
                    
                  

                {%- else -%}
                  {%- if block.settings.subheading != blank -%}
                    
{{ block.settings.subheading | escape }}

                  {%- endif -%}
                  {%- if block.settings.title != blank -%}
                    ## {{ block.settings.title | newline_to_br }}

                  {%- endif -%}
                  {%- if block.settings.text != blank -%}
                    
{{ block.settings.text }}

                  {%- endif -%}
                  {%- if block.settings.button_label_1 != blank or block.settings.button_label_2 != blank -%}
                    

                      {%- if wrap_slide_with_link -%}
                        {%- if block.settings.button_label_1 != blank -%}
                          {{ block.settings.button_label_1 }}
                        {%- endif -%}
                        {%- if block.settings.button_label_2 != blank -%}
                          {{ block.settings.button_label_2 }}
                        {%- endif -%}
                      {%- else -%}
                        {%- if block.settings.button_label_1 != blank -%}
                          {{ block.settings.button_label_1 }}
                        {%- endif -%}
                        {%- if block.settings.button_label_2 != blank -%}
                          {{ block.settings.button_label_2 }}
                        {%- endif -%}
                      {%- endif -%}
                    

                  {%- endif -%}
                {%- endif -%}
              

            

          

        {%- endif -%}

        {%- if wrap_slide_with_link -%}
          
        {%- endif -%}
      

    {%- endfor -%}
  

  {%- unless section.settings.full_width -%}
{%- endunless -%}

{% schema %}
  {
    "name": "Slideshow",
    "class": "section-slideshow",
    "max_blocks": 8,
    "settings": [
      {
        "type": "radio",
        "id": "height",
        "label": "Slide height",
        "options": [
          {
            "value": "adapt",
            "label": "Adapt to first image"
          },
          {
            "value": "full",
            "label": "Full screen"
          },
          {
            "value": "fixed",
            "label": "Fixed height"
          }
        ],
        "default": "fixed"
      },
      {
        "type": "range",
        "id": "height_desktop",
        "min": 200,
        "max": 1000,
        "step": 20,
        "unit": "px",
        "label": "Desktop fixed height",
        "default": 600
      },
      {
        "type": "range",
        "id": "height_mobile",
        "min": 100,
        "max": 1000,
        "step": 20,
        "unit": "px",
        "label": "Mobile fixed height",
        "default": 460
      },
      {
        "id": "full_width",
        "type": "checkbox",
        "label": "Full page width",
        "default": true
      },
      {
        "id": "mobile_overlay_under",
        "type": "checkbox",
        "label": "Show text below image on mobile",
        "default": false
      },
      {
        "id": "overlay_style",
        "type": "select",
        "label": "Overlay style",
        "default": "shadow",
        "options": [
          {
            "value": "full",
            "label": "Tint"
          },
          {
            "value": "box",
            "label": "Box"
          },
          {
            "value": "shadow",
            "label": "Text shadow"
          },
          {
            "value": "full image-overlay--bg-shadow",
            "label": "Text shadow and tint"
          },
          {
            "value": "no_background",
            "label": "No background"
          }
        ]
      },
      {
        "type": "header",
        "content": "Slideshow navigation"
      },
      {
        "type": "select",
        "id": "slide_transition",
        "label": "Transition",
        "options": [
          {
            "value": "zoom",
            "label": "Zoom"
          },
          {
            "value": "fade",
            "label": "Fade"
          },
          {
            "value": "slide",
            "label": "Slide"
          },
          {
            "value": "slide_fade",
            "label": "Slide & Fade"
          },
          {
            "value": "instant",
            "label": "Instant"
          }
        ],
        "default": "fade"
      },
      {
        "id": "slide_navigation",
        "type": "select",
        "label": "Slide navigation style",
        "default": "arrows",
        "options": [
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "dots",
            "label": "Dots"
          },
          {
            "value": "none",
            "label": "None"
          }
        ]
      },
      {
        "id": "autoplay",
        "type": "checkbox",
        "label": "Auto-rotate slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "min": 1,
        "max": 20,
        "step": 1,
        "unit": "s",
        "label": "Change slides every",
        "default": 7
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "2048 x 1024px recommended"
          },
          {
            "type": "image_picker",
            "id": "mobile_image",
            "label": "Mobile image",
            "info": "1024px x 1024px recommended"
          },
          {
            "type": "select",
            "id": "image_position",
            "label": "Desktop image alignment",
            "info": "Used to keep the subject of your image in view",
            "default": "center center",
            "options": [
              {
                "value": "top left",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "top right",
                "label": "Top right"
              },
              {
                "value": "center left",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "center right",
                "label": "Middle right"
              },
              {
                "value": "bottom left",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "bottom right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "select",
            "id": "mobile_image_position",
            "label": "Mobile image alignment",
            "options": [
              {
                "value": "left top",
                "label": "Top left"
              },
              {
                "value": "center top",
                "label": "Top center"
              },
              {
                "value": "right top",
                "label": "Top right"
              },
              {
                "value": "left center",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "right center",
                "label": "Middle right"
              },
              {
                "value": "left bottom",
                "label": "Bottom left"
              },
              {
                "value": "center bottom",
                "label": "Bottom center"
              },
              {
                "value": "right bottom",
                "label": "Bottom right"
              }
            ],
            "default": "center center"
          },
          {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link",
            "info": "Not used if buttons or text contain links"
          },
		  {
            "type": "image_picker",
            "id": "caption",
            "label": "Caption image"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "Tell your story"
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\nslide heading"
          },
          {
            "type": "range",
            "id": "title_size",
            "min": 20,
            "max": 150,
            "step": 2,
            "unit": "px",
            "label": "Desktop heading text size",
            "default": 84
          },
          {
            "type": "range",
            "id": "title_size_mobile",
            "min": 20,
            "max": 150,
            "step": 2,
            "unit": "px",
            "label": "Mobile heading text size",
            "default": 46
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "

And optional subtext

"
          },
          {
            "type": "checkbox",
            "id": "enlarge_text",
            "label": "Enlarge text",
            "default": true
          },
          {
            "type": "text",
            "id": "button_label_1",
            "label": "Button 1 label",
            "default": "Shop this"
          },
          {
            "type": "url",
            "id": "button_url_1",
            "label": "Button 1 link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "label": "Button 2 label",
            "default": "Shop all"
          },
          {
            "type": "url",
            "id": "button_url_2",
            "label": "Button 2 link"
          },
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text overlay position",
            "options": [
              {
                "value": "top left",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "top right",
                "label": "Top right"
              },
              {
                "value": "center left",
                "label": "Middle left"
              },
              {
                "value": "center center",
                "label": "Middle center"
              },
              {
                "value": "center right",
                "label": "Middle right"
              },
              {
                "value": "bottom left",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "bottom right",
                "label": "Bottom right"
              }
            ],
            "default": "center center"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "settings": {
        },
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}

Hope it helps!

5

Hi @LitExtension , I created a new section and changed the name of the section name to Slideshow-image-overlay. I tried adding photos to the slide and nothing appears in the backdrop of the slide.

Screen Shot 2022-01-28 at 9.40.07 AM.png
Screen Shot 2022-01-28 at 9.40.07 AM.png2584×1510 189 KB

6

Hi @sheadooleyco ,

You can enter a title for slideshow after you enter the title it will turn on condition and the image will show.

Hope it helps!

7

Great! Although .slide img CSS rule of 100% width overrides the width set for 200px width code. Is there a way to correct this? @LitExtension

Screen Shot 2022-01-31 at 9.56.20 AM.png
Screen Shot 2022-01-31 at 9.56.20 AM.png2648×1502 825 KB

8

Hi @sheadooleyco ,

Refer

Screenshot.png
Screenshot.png1048×326 33.5 KB

Code: style=“width: 200px !important;”

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

9

Hi, Please reach out to me at jessica.swatz@nigostudio.com and we will help you out for free on this!

10

Hi @sheadooleyco ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

11

Hi!

I would like to do this same thing in the District Theme and am wondering if you can help? I’m trying to add a .png icon on top of a slideshow image. My slideshow section code is attached. Any help would be greatly appreciated! Many thanks!


  

    

      {% if section.settings.autoplay %}
        {% assign autoplay = section.settings.autoplay_speed_range | times: 1000 %}
      {% else %}
        {% assign autoplay = false %}
      {% endif %}
      

        {% for block in section.blocks %}
          

            {% comment %}
              Slide text content
            {% endcomment %}
            

              

                

                  

                    {% if block.settings.title != blank %}
                      

                        ## {{ block.settings.title | escape }}
                      

                    {% endif %}
                    {% if block.settings.text != blank %}
                      
                        {{ block.settings.text }}
                      

                    {% endif %}
                    {% if block.settings.button_link != blank and block.settings.button_label != blank %}
                      {{ block.settings.button_label | escape }}
                    {% endif %}
                  

                

              

            

            {% comment %}
              Slide image and link
            {% endcomment %}
            {% if block.settings.link != blank %}
              
            {% else %}
              

            {% endif %}

            

              {% if block.settings.image != blank %}
                {% assign image = block.settings.image %}
                {% assign image_widths = '400,600,800,900,1000,1200,1500,1800,2000,2400' %}
                {% include 'theme-rias' %}
                
                {% if forloop.first %}
                
                {% endif %}
                {% assign height = image.height | plus: 0 %}
                {% assign width = image.width | plus: 0 %}
                {% assign padding_ratio = height | times: 100 | divided_by: width %}
              {% else %}
                {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                {% assign padding_ratio = 40 %}
              {% endif %}
            

            
              {% if block.settings.mobile_image != blank %}
                {% assign image = block.settings.mobile_image %}
                {% assign image_widths = '400,600,800,1000,1200' %}
                {% include 'theme-rias' %}
                
                {% if forloop.first %}
                
                {% endif %}
                {% assign height = image.height | plus: 0 %}
                {% assign width = image.width | plus: 0 %}
                {% assign mobile_padding_ratio = height | times: 100 | divided_by: width %}
              {% endif %}
            

            {% if block.settings.link != blank %}
              
            {% else %}
              

            {% endif %}

            
          

        {% endfor %}
      

      
        {%- for block in section.blocks -%}
          {%- if forloop.first -%}
            1. 

          {%- else -%}
            1. 
          {%- endif -%}
        {%- endfor -%}
      

    

  

{% schema %}
{
  "name": "Slideshow",
  "class": "slideshow-section",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Expand full width",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Auto-rotate slides",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_speed_range",
      "label": "Change slides every",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "sec",
      "default": 5
    },
    {
      "type": "checkbox",
      "id": "show_dots",
      "label": "Show slide dots",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show previous and next arrows",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "2000 x 800px .jpg recommended"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image",
          "info": "Optional. 1200 x 1200px .jpg recommended"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Slide link"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "

Add brief details about this slide.

"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "select",
          "id": "vertical_alignment",
          "label": "Vertical alignment",
          "default": "align-center",
          "options": [
            {"value": "align-start", "label": "Top"},
            {"value": "align-center", "label": "Middle"},
            {"value": "align-end", "label": "Bottom"}
          ]
        },
        {
          "type": "select",
          "id": "horizontal_alignment",
          "label": "Horizontal alignment",
          "default": "justify-center",
          "options": [
            {"value": "justify-start", "label": "Left"},
            {"value": "justify-center", "label": "Center"},
            {"value": "justify-end", "label": "Right"}
          ]
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "color_accent",
          "label": "Accent",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "color_overlay",
          "label": "Overlay",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "color_overlay_alpha_range",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Overlay opacity",
          "default": 0
        }
      ]
    },
    {
      "type": "video",
      "name": "Video slide",
      "settings": [
        {
          "id": "video_url",
          "type": "video_url",
          "label": "Background video URL",
          "accept": ["youtube"],
          "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
        },
        {
          "type": "checkbox",
          "id": "mobile_autoplay",
          "label": "Autoplay on mobile devices",
          "default": false
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1500 x 600px .jpg recommended. Displayed while video is loading and in browsers that do not support autoplay video."
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image",
          "info": "Optional. 1200 x 1200px .jpg recommended. Displayed while video is loading and in browsers that do not support autoplay video."
        },
        {
          "type": "url",
          "id": "link",
          "label": "Slide link"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Slide"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "

Add brief details about this slide.

"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "select",
          "id": "vertical_alignment",
          "label": "Vertical alignment",
          "default": "align-center",
          "options": [
            {"value": "align-start", "label": "Top"},
            {"value": "align-center", "label": "Middle"},
            {"value": "align-end", "label": "Bottom"}
          ]
        },
        {
          "type": "select",
          "id": "horizontal_alignment",
          "label": "Horizontal alignment",
          "default": "justify-center",
          "options": [
            {"value": "justify-start", "label": "Left"},
            {"value": "justify-center", "label": "Center"},
            {"value": "justify-end", "label": "Right"}
          ]
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "Text",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_accent",
          "label": "Accent",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_overlay",
          "label": "Overlay",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "color_overlay_alpha_range",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Overlay opacity",
          "default": 0
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slideshow",
      "category": "Image",
      "settings": {
        "full_width": true,
        "autoplay": true,
        "autoplay_speed_range": 5,
        "show_dots": true,
        "show_arrows": false
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}
12

Can you please do the same for my Boundless theme? Please. My email is stedemurdock@gmail.com . PLEASE