Hi,
I’m looking to add a PNG logo or icon above the text element in the slideshow and wondered if anyone already had some code which would add this to the schema?
Thanks,
Calum
Can you share the store URL and the code of the slideshow section?
Hi, its still in development store.
The slideshow code is slideshow.liquid
{%- capture section_settings -%}
{
"autoPlay": {{ section.settings.autoplay | json }},
"prevNextButtons": false,
"pageDots": {% if section.blocks.size > 1 %}true{% else %}false{% endif %},
"setGallerySize": {% if section.settings.section_size == 'preserve_ratio' %}true{% else %}false{% endif %},
"adaptiveHeight": {% if section.settings.section_size == 'preserve_ratio' %}true{% else %}false{% endif %},
"transitionEffect": {{ section.settings.carousel_effect | json }},
"cycleSpeed": {{ section.settings.cycle_speed | times: 1000 | json }}
}
{%- endcapture -%}
{% schema %}
{
"name": "Slideshow",
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "edge_to_edge",
"label": "Full-width",
"default": false
},
{
"type": "select",
"id": "section_size",
"label": "Image size",
"options": [
{
"value": "preserve_ratio",
"label": "Original image ratio"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "preserve_ratio"
},
{
"type": "select",
"id": "carousel_effect",
"label": "Transition effect",
"options": [
{
"value": "fade",
"label": "Fade"
},
{
"value": "slide",
"label": "Slide"
}
],
"default": "slide"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto rotate between slides",
"default": true
},
{
"type": "range",
"id": "cycle_speed",
"min": 3,
"max": 8,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 5
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2160 x 720px .jpg recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "750 x 1100px .jpg recommended. If none is set, desktop image will be used."
},
{
"type": "checkbox",
"id": "show_overlay",
"label": "Show overlay",
"info": "Increase text readability on busy images.",
"default": false
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Slide title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Tell your story"
},
{
"type": "select",
"id": "content_position",
"label": "Content position",
"info": "On mobile, content is always centered.",
"options": [
{
"value": "top_left",
"label": "Top left"
},
{
"value": "top_center",
"label": "Top center"
},
{
"value": "top_right",
"label": "Top right"
},
{
"value": "middle_left",
"label": "Middle left"
},
{
"value": "middle_center",
"label": "Middle center"
},
{
"value": "middle_right",
"label": "Middle right"
},
{
"value": "bottom_left",
"label": "Bottom left"
},
{
"value": "bottom_center",
"label": "Bottom center"
},
{
"value": "bottom_right",
"label": "Bottom right"
}
],
"default": "middle_center"
},
{
"type": "header",
"content": "Button"
},
{
"type": "color",
"id": "button_background",
"label": "Background",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_text_color",
"label": "Text",
"default": "#000000"
},
{
"type": "text",
"id": "button_text",
"label": "Text",
"default": "Button"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "If no text is set for button, the whole image becomes clickable."
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Slideshow",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Thanks
Hi, its on a development server but the code is slideshow.liquid
{%- capture section_settings -%}
{
"autoPlay": {{ section.settings.autoplay | json }},
"prevNextButtons": false,
"pageDots": {% if section.blocks.size > 1 %}true{% else %}false{% endif %},
"setGallerySize": {% if section.settings.section_size == 'preserve_ratio' %}true{% else %}false{% endif %},
"adaptiveHeight": {% if section.settings.section_size == 'preserve_ratio' %}true{% else %}false{% endif %},
"transitionEffect": {{ section.settings.carousel_effect | json }},
"cycleSpeed": {{ section.settings.cycle_speed | times: 1000 | json }}
}
{%- endcapture -%}
{% schema %}
{
"name": "Slideshow",
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "edge_to_edge",
"label": "Full-width",
"default": false
},
{
"type": "select",
"id": "section_size",
"label": "Image size",
"options": [
{
"value": "preserve_ratio",
"label": "Original image ratio"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "preserve_ratio"
},
{
"type": "select",
"id": "carousel_effect",
"label": "Transition effect",
"options": [
{
"value": "fade",
"label": "Fade"
},
{
"value": "slide",
"label": "Slide"
}
],
"default": "slide"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto rotate between slides",
"default": true
},
{
"type": "range",
"id": "cycle_speed",
"min": 3,
"max": 8,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 5
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2160 x 720px .jpg recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "750 x 1100px .jpg recommended. If none is set, desktop image will be used."
},
{
"type": "checkbox",
"id": "show_overlay",
"label": "Show overlay",
"info": "Increase text readability on busy images.",
"default": false
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Slide title"
},
{
"type": "textarea",
"id": "content",
"label": "Content",
"default": "Tell your story"
},
{
"type": "select",
"id": "content_position",
"label": "Content position",
"info": "On mobile, content is always centered.",
"options": [
{
"value": "top_left",
"label": "Top left"
},
{
"value": "top_center",
"label": "Top center"
},
{
"value": "top_right",
"label": "Top right"
},
{
"value": "middle_left",
"label": "Middle left"
},
{
"value": "middle_center",
"label": "Middle center"
},
{
"value": "middle_right",
"label": "Middle right"
},
{
"value": "bottom_left",
"label": "Bottom left"
},
{
"value": "bottom_center",
"label": "Bottom center"
},
{
"value": "bottom_right",
"label": "Bottom right"
}
],
"default": "middle_center"
},
{
"type": "header",
"content": "Button"
},
{
"type": "color",
"id": "button_background",
"label": "Background",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_text_color",
"label": "Text",
"default": "#000000"
},
{
"type": "text",
"id": "button_text",
"label": "Text",
"default": "Button"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "If no text is set for button, the whole image becomes clickable."
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Slideshow",
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
thanks,
Calum