Hi All, using the trade theme. there is no option to add a video to slideshow nor is there an option to add text over a video. Is there a work around for this? Thank you Daniel
Hi @DASCPA there is workaround for that, you will need the help of custom coding to achieve the same. You can add this code in your theme, by adding the custom liquid block in your theme.
Regarding the text over the image, you need to add the custom and css code to achieve this.
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Best Regards
Sahil
Hi @DASCPA ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Sections/video.liquid
- Replace all code by code below:
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{%- style -%}
.video-section__media_outer {
position: relative;
}
.section-{{ section.id }}-padding .video-section__media {
z-index: 2;
}
.deferred-media__poster-button {
z-index: 150;
}
.section-{{ section.id }}-padding .slideshow__text-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: auto;
}
.section-{{ section.id }}-padding .slideshow__text-wrapper .slideshow__text.banner__box{
z-index: 5;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media(max-width: 749px){
.section-{{ section.id }}-padding .slideshow__text-wrapper {
position: static;
padding:0;
}
.video-section__poster_temp {
display: none!important;
}
}
@media(min-width: 750px){
#Deferred-Poster-Modal-{{ video_id }} .deferred-media__poster-button { display: none;}
}
{%- endstyle -%}
{%- liquid
assign video_id = section.settings.video.id | default: section.settings.video_url.id
assign video_alt = section.settings.video.alt | default: section.settings.description
assign alt = 'sections.video.load_video' | t: description: video_alt | escape
assign poster = section.settings.video.preview_image | default: section.settings.cover_image
if section.settings.video != null
assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
if ratio_diff < 0.01 and ratio_diff > 0
assign fix_ratio = true
endif
endif
-%}
{%- capture sizes -%}
{% if section.settings.full_width -%}
100vw
{%- else -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
calc(100vw - 10rem), 100vw
{%- endif %}
{%- endcapture -%}
{%- unless section.settings.heading == blank -%}
## {{ section.settings.heading }}
{%- endunless -%}
{%- if section.settings.heading_1 != blank -%}
##
{{ section.settings.heading_1 }}
{%- endif -%}
{%- if section.settings.subheading != blank -%}
{{ section.settings.subheading }}
{%- endif -%}
{%- if section.settings.button_label != blank -%}
{{- section.settings.button_label | escape -}}
{%- endif -%}
{% schema %}
{
"name": "t:sections.video.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video",
"label": "t:sections.video.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "t:sections.video.settings.enable_video_looping.label",
"default": false
},
{
"type": "header",
"content": "t:sections.video.settings.header__1.content"
},
{
"type": "video",
"id": "video",
"label": "t:sections.video.settings.video.label"
},
{
"type": "header",
"content": "t:sections.video.settings.header__2.content"
},
{
"type": "paragraph",
"content": "t:sections.video.settings.paragraph.content"
},
{
"type": "video_url",
"id": "video_url",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "t:sections.video.settings.video_url.label",
"info": "t:sections.video.settings.video_url.info"
},
{
"type": "image_picker",
"id": "cover_image",
"label": "t:sections.video.settings.cover_image.label"
},
{
"type": "text",
"id": "description",
"label": "t:sections.video.settings.description.label",
"info": "t:sections.video.settings.description.info"
},
{
"type": "header",
"content": "t:sections.video.settings.header__3.content"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.video.settings.full_width.label",
"default": false
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
},
{
"type": "inline_richtext",
"id": "heading_1",
"default": "Video ",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "select",
"id": "heading_size_1",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "inline_richtext",
"id": "subheading",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
}
],
"presets": [
{
"name": "t:sections.video.presets.name"
}
]
}
{% endschema %}
1 Like
Thank you!! Is there a way that this can be overlaid on Mobile?
Hi,
You can refer screenshot below:
Note: Video will be overlap by text then we can’t view video. So I added this code.
Thanks, I think this adds the overlay but what about creating a slideshow of videos as opposed to images? Or even better, a slideshow where I can choose to add either slides of image or video, is there a way to do that?
Hi @JCL28 ,
You try code here https://github.com/eboost10/2640367/blob/main/slideshow-media.liquid