Here is the code. I’ve tried for a while but no luck, could someone more experienced help please?
This is slideshow.liquid, by the way:
{% 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
elsif block.settings.slide_link != blank
assign wrap_slide_with_link = true
endif
-%}
{%- if wrap_slide_with_link -%}
{%- assign linkLabel = block.settings.slide_link | split: '/' | last | replace: '-', ' ' -%}
{%- 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 -%}
{% if block.settings.use_h1 %}
# {% render 'multiline-text' with block.settings.title %}
{% else %}
##
{% render 'multiline-text' with block.settings.title %}
{% endif %}
{%- 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 | escape -}}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{- block.settings.button_label_2 | escape -}}
{%- endif -%}
{%- else -%}
{%- if block.settings.button_label_1 != blank -%}
{{- block.settings.button_label_1 | escape -}}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{- block.settings.button_label_2 | escape -}}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if wrap_slide_with_link -%}
{%- endif -%}
{%- endfor -%}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{% comment %} Slideshow Preview {% endcomment %}
{% for block in section.blocks %}
{% assign slideIndex = forloop.index %}
{% if block.settings.image != blank %}
{% endif %}
{% endfor %}
{% 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": "url",
"id": "slide_link",
"label": "Slide link",
"info": "Not used if buttons or text contain links"
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your story"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"info": "Enter
for a line-break",
"default": "Slide heading"
},
{
"type": "range",
"id": "heading_max_width",
"min": 500,
"max": 1200,
"step": 20,
"unit": "px",
"label": "Maximum heading width",
"default": 800
},
{
"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": "checkbox",
"id": "use_h1",
"label": "Set as primary page heading",
"info": "Use # tag. One per page recommended. [Read more](https://cleancanvas.co.uk/support/symmetry/section-h1-setting)",
"default": false
},
{
"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 %}