Hello everyone,
as you can see from the title, we use the Prestige Theme.
We are very satisfied with the “Image with Text” section and would like to have a “Video with Text” section in the same format. So we created a new section, how do we have to adapt the following code so that we can display videos from Shopify? (No Youtube or Vimeo, the Video ist uploaded in Shopify)
We are currently using an alternative solution, which we would like to change.
Thank you in advance!
{%- if section.settings.image != blank or section.blocks.size > 0 -%}
{%- comment -%}
CSS
{%- endcomment -%}
#shopify-section-{{ section.id }} { --image-with-text-content-max-width: {% if section.settings.content_width == 'sm' %}430px{% elsif section.settings.content_width == 'md' %}780px{% else %}100%{% endif %}; }{%- comment -%}
LIQUID
{%- endcomment -%}
{%- if section.settings.image != blank -%}
{%- if section.settings.mobile_image != blank -%}
{{- section.settings.image | image_url: width: section.settings.image.width | image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘200,300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200’, reveal-on-scroll: section.settings.reveal_on_scroll -}}
{%- else -%}
{{- ‘lifestyle-1’ | placeholder_svg_tag: ‘placeholder’ -}}
{%- endif -%}
{{ block.settings.text }}
{%- endif -%}{%- when ‘heading’ -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}{%- when ‘richtext’ -%}
{%- if block.settings.content != blank -%}
{%- when ‘page’ -%}
{%- if block.settings.page.content != blank -%}
{%- when ‘liquid’ -%}
{%- if block.settings.liquid != blank -%}
{%- when ‘link’ -%}
<a {% if block.settings.url %}href=“{{ block.settings.url }}”{% endif %} class=“link” {{ block.shopify_attributes }}>{{ block.settings.text | escape }}
{%- when ‘button’ -%}
{%- if block.settings.text != blank -%}
{% render ‘button’, content: block.settings.text, href: block.settings.url, style: block.settings.style, background: block.settings.background, text_color: block.settings.text_color, block: block %}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
“name”: “t:sections.image_with_text.name”,
“class”: “shopify-section–image-with-text”,
“tag”: “section”,
“max_blocks”: 6,
“disabled_on”: {
“groups”: [“header”, “custom.overlay”]
},
“settings”: [
{
“type”: “checkbox”,
“id”: “separate_section_with_border”,
“label”: “t:global.section.separate_section_with_border”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:global.image.image”,
“info”: “t:sections.image_with_text.image_size_recommendation”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “t:global.image.mobile_image”,
“info”: “t:sections.image_with_text.mobile_image_size_recommendation”
},
{
“type”: “checkbox”,
“id”: “reveal_on_scroll”,
“label”: “t:global.animation.reveal_image_on_scroll”,
“default”: true
},
{
“type”: “select”,
“id”: “image_position”,
“label”: “t:sections.image_with_text.image_position”,
“options”: [
{
“value”: “start”,
“label”: “t:global.position.left”
},
{
“value”: “end”,
“label”: “t:global.position.right”
}
]
},
{
“type”: “select”,
“id”: “content_width”,
“label”: “t:global.sizes.content_width”,
“options”: [
{
“value”: “sm”,
“label”: “t:global.sizes.small”
},
{
“value”: “md”,
“label”: “t:global.sizes.medium”
},
{
“value”: “lg”,
“label”: “t:global.sizes.large”
}
],
“default”: “sm”
},
{
“type”: “checkbox”,
“id”: “remove_vertical_spacing”,
“label”: “t:global.spacing.remove_vertical_spacing”,
“default”: true
}
],
“blocks”: [
{
“type”: “subheading”,
“name”: “t:sections.image_with_text.blocks.subheading.name”,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “text”,
“label”: “t:global.text.text”,
“default”: “Subheading”
}
]
},
{
“type”: “heading”,
“name”: “t:sections.image_with_text.blocks.heading.name”,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “text”,
“label”: “t:global.text.text”,
“default”: “Heading”
},
{
“type”: “select”,
“id”: “heading_tag”,
“label”: “t:global.text.style”,
“options”: [
{
“value”: “h1”,
“label”: “H1”
},
{
“value”: “h2”,
“label”: “H2”
},
{
“value”: “h3”,
“label”: “H3”
},
{
“value”: “h4”,
“label”: “H4”
},
{
“value”: “h5”,
“label”: “H5”
},
{
“value”: “h6”,
“label”: “H6”
}
],
“default”: “h1”
}
]
},
{
“type”: “richtext”,
“name”: “t:sections.image_with_text.blocks.paragraph.name”,
“settings”: [
{
“type”: “richtext”,
“id”: “content”,
“label”: “t:global.text.content”,
“default”: “
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
”}
]
},
{
“type”: “page”,
“name”: “t:sections.image_with_text.blocks.page.name”,
“settings”: [
{
“type”: “page”,
“id”: “page”,
“label”: “Page”
}
]
},
{
“type”: “liquid”,
“name”: “t:sections.image_with_text.blocks.liquid.name”,
“settings”: [
{
“type”: “liquid”,
“id”: “liquid”,
“label”: “t:global.code.liquid”,
“default”: “
Write custom Liquid code to include widget or dynamic code.
”}
]
},
{
“type”: “link”,
“name”: “t:sections.image_with_text.blocks.link.name”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“label”: “t:global.text.text”,
“default”: “Text”
},
{
“type”: “url”,
“id”: “url”,
“label”: “t:global.text.link”
}
]
},
{
“type”: “button”,
“name”: “t:sections.image_with_text.blocks.button.name”,
“settings”: [
{
“type”: “select”,
“id”: “style”,
“label”: “t:global.text.style”,
“options”: [
{
“value”: “outline”,
“label”: “t:global.text.button_style_options.outline”
},
{
“value”: “solid”,
“label”: “t:global.text.button_style_options.solid”
}
],
“default”: “solid”
},
{
“type”: “text”,
“id”: “text”,
“label”: “t:global.text.text”,
“default”: “Button text”
},
{
“type”: “url”,
“id”: “url”,
“label”: “t:global.text.link”
},
{
“type”: “color”,
“id”: “background”,
“label”: “t:global.colors.background”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “t:global.text.text”
}
]
}
],
“presets”: [
{
“name”: “t:sections.image_with_text.presets.image_with_text.name”,
“blocks”: [
{
“type”: “subheading”,
“settings”: {
“text”: “Subheading”
}
},
{
“type”: “heading”,
“settings”: {
“text”: “Image with text”
}
},
{
“type”: “richtext”
}
]
}
]
}
{% endschema %}