Hallo,
ich habe folgenden Code im Prestige 2.0 Theme eingebunden um ein Header Video abzuspielen. Das funktioniert soweit auch alles sehr gut. Im Code ist auch ein Cover Image vorgesehen welches gezeigt wird bis der Film geladen ist. Nun möchte ich dieses Cover Image aber für Desktop und Mobile je in 16:9 und in 9:16 anzeigen lassen. Dafür habe ich bereits folgenden Code Schnipsel integriert und nun kann ich im Theme auch ein Cover Image Mobile hochladen.
{
"type": "image_picker",
"id": "video_image_mobile",
"label": {
"en": "Cover image mobile"
}
},
Jetzt müsste dieses Cover Image Mobile aber auch noch angesprochen werden wenn jemand mit einem Mobilgerät auf den Shop kommt. Könnte mir dabei jemand helfen? Und noch eine grundsätzliche Frage: würdet ihr überhaupt aus Pagespeed-Aspekten für Mobile user ein Video laden? Viele Homepages haben das ja nur für Desktop User.
Viele Grüße und vielen Dank schon vorab
Flo
Hier noch der gesamte Code der Section:
Show More
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}# {{ block.settings.title | escape }}{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% 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 %}
{% else %}
{% if block.settings.title != blank %}# {{ block.settings.title | escape }}{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% 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 %}
{% endif %} {%- endfor -%} {% else %}This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%} {% schema %} { "name": { "en": "Video Background" }, "class": "videoBackground", "max_blocks": 1, "blocks": [ { "type": "video", "name": "Video", "settings": [ { "type": "url", "id": "video_link", "label": { "en": "Video link" } }, { "type": "image_picker", "id": "video_image", "label": { "en": "Cover image" } }, { "type": "image_picker", "id": "video_image_mobile", "label": { "en": "Cover image mobile" } }, { "type": "range", "id": "overlay_opacity", "label": { "en": "Overlay opacity" }, "min": 0, "max": 99, "step": 1, "unit": { "en": "%" }, "default": 0 }, { "type": "header", "content": { "en": "Text" } }, { "type": "text", "id": "title", "label": { "en": "Heading" }, "default": "Video slide" }, { "type": "richtext", "id": "text", "label": { "en": "Description" }, "default": { "en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
" } }, { "type": "color", "id": "color_text", "label": { "en": "Text color" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "en": "Button label" } }, { "type": "url", "id": "button_link", "label": { "en": "Button link" } }, { "type": "color", "id": "color_btn_bg", "label": { "en": "Background button color" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "en": "Button text color" }, "default": "#ffffff" } ] }, { "type": "image", "name": "Image", "settings": [ { "type": "color", "id": "color_bg", "label": { "en": "Background color (optional)" }, "default": "#16165b" }, { "type": "image_picker", "id": "image_bg", "label": { "en": "or use an image (required)" } }, { "type": "range", "id": "overlay_opacity", "label": { "en": "Overlay opacity" }, "min": 0, "max": 99, "step": 1, "unit": { "en": "%" }, "default": 0 }, { "type": "header", "content": { "en": "Text" } }, { "type": "text", "id": "title", "default": "Image slide", "label": { "en": "Heading" } }, { "type": "richtext", "id": "text", "label": { "en": "Description" }, "default": { "en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
" } }, { "type": "color", "id": "color_text", "label": { "en": "Text color" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "en": "Button label" } }, { "type": "url", "id": "button_link", "label": { "en": "Button link" } }, { "type": "color", "id": "color_btn_bg", "label": { "en": "Background button color" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "en": "Button text color" }, "default": "#ffffff" } ] } ], "presets": [ { "name": { "en": "Video Background" }, "category": { "en": "Main" }, "blocks": [ { "type": "video" } ] } ] } {% endschema %} ```