Hi,
I am struggling to change this section code. It's a section where image and video can presented on the same row. Now I want to add a text block so I can choose to have image-with-text or video-with-text block. I tried several AI pilots but to help me but I must have asked the wrong question for recieving the wrong answers 🙂
Can anyone help formulate the correct prompt for and AI tool or maybe help me create a text block inside this code? I would most grateful. Thanks a lot in advance!
<style>
#section-{{ section.id }} {
--button-text-color: {{ section.settings.text_color }};
--button-background-color: {{ section.settings.button_color }};
}
</style>
<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="media-mosaic">
<div class="MosaicList">
{%- for block in section.blocks -%}
<div class="MosaicItemContainer" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'video' %}
<div class="MosaicItem MosaicItemVideo">
<video autoplay muted loop playsinline class="MosaicItemVideoElement">
<source src="{{ block.settings.video_url }}">
</video>
{% if block.settings.button_text and block.settings.button_link %}
<div class="MosaicItem__ButtonWrapper">
<a class="Button MosaicButton" href="{{ block.settings.button_link }}">{{ block.settings.button_text }}</a>
</div>
{% endif %}
</div>
{% when 'image' %}
<div class="MosaicItem MosaicItemImage" style="background-image: url('{{ block.settings.image.src | image_url: width: 1600 }}')">
{% if block.settings.button_text and block.settings.button_link %}
<div class="MosaicItem__ButtonWrapper">
<a class="Button MosaicButton" href="{{ block.settings.button_link }}">{{ block.settings.button_text }}</a>
</div>
{% endif %}
</div>
{% endcase %}
</div>
{%- endfor -%}
</div>
</section>
{% stylesheet %}
.MosaicList {
display: flex;
flex-wrap: wrap;
}
.MosaicItemContainer {
flex-grow: 1;
min-height: 75vh;
flex-basis: 100%;
padding: 15px;
}
.MosaicItem {
display: flex;
justify-content: center;
height: 100%;
}
.MosaicItem__ButtonWrapper {
margin-bottom: 50px;
align-self: flex-end;
}
.MosaicList .MosaicButton {
border-color: #fff;
border-color: var(--button-background-color, #fff);
color: #363636;
color: var(--button-text-color, #363636);
}
.MosaicButton::before {
background-color: #fff;
background-color: var(--button-background-color, #fff);
}
.MosaicItemImage {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.MosaicItemVideo {
position: relative;
overflow: hidden;
}
.MosaicItemVideoElement {
position: absolute;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 641px) {
.MosaicItemContainer {
min-height: 85vh;
padding: 30px;
}
}
@media screen and (min-width: 1140px) {
.MosaicItemContainer {
flex-basis: 50%;
}
}
{% endstylesheet %}
{% schema %}
{
"name": "Media mosaic",
"class": "shopify-section--bordered",
"max_blocks": 4,
"settings": [
{
"type": "color",
"id": "button_color",
"label": "Button background",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Button text",
"default": "#363636"
}
],
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "text",
"id": "video_url",
"label": "Video URL",
"info": "The source URL for this video. Make sure you use a universally supported format like H264 (mp4). Pay attention to the aspect ratio, and keep the size of the file resonable for a smoother playback"
},
{
"type": "text",
"id": "button_text",
"label": "Text"
},
{
"type": "url",
"id": "button_link",
"label": "Link"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "button_text",
"label": "Text"
},
{
"type": "url",
"id": "button_link",
"label": "Link"
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Media mosaic",
"settings": {},
"blocks": [
{
"type": "image",
"settings": {}
},
{
"type": "video",
"settings": {}
}
]
}
]
}
{% endschema %}
