<!-- banner-grid.liquid -->
{{ 'banner-grid.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{% render 'section-style' %}
<div class="banner-grid">
<div class="{%- if section.settings.fullwidth -%}container-fluid{%- else -%}container{%- endif -%}">
<div class="header-box">
<h2 class="section-header">{{ section.settings.heading }}</h2>
<p class="section-text">{{ section.settings.text_decoration }}</p>
</div>
<div class="row banner-content">
{%- for block in section.blocks -%}
{%- case block.settings.width -%}
{%- when '25%' -%}
{%- assign block_width = 'col-lg-3 col-md-3' -%}
{%- when '33%' -%}
{%- assign block_width = 'col-lg-4 col-md-4' -%}
{%- when '50%' -%}
{%- assign block_width = 'col-lg-6' -%}
{%- when '66%' -%}
{%- assign block_width = 'col-lg-8 col-md-12' -%}
{%- when '75%' -%}
{%- assign block_width = 'col-lg-9 col-md-9' -%}
{%- when '100%' -%}
{%- assign block_width = 'col-12' -%}
{%- endcase -%}
<div class="{{block_width}} banner-grid-items" {{ block.shopify_attributes }}>
<div class="banner-image">
<div class="banner-grid-content{% if section.settings.effects_image %}{{ 'banner-image-hover' | prepend: ' ' }}{% endif %} {% if block.settings.image != blank %}media{% else %}image-banner-grid__media--placeholder placeholder{% endif %}" style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
>
{%- if block.settings.image != blank -%}
<img
srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
{%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
{%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
{%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
{%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}"
src="{{ block.settings.image | img_url: 'master' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
<div class="banner-grid-{% if section.settings.style_banner == 'style-1' %}style-1{% elsif section.settings.style_banner == 'style-2' %}style-2{% endif %} d-flex flex-column {%- if block.settings.item_align == 'top' -%}{{ 'justify-content-start' | prepend: ' ' }}{%- elsif block.settings.item_align == 'center' -%}{{ 'justify-content-center' | prepend: ' ' }}{%- elsif block.settings.item_align == 'bottom' -%}{{ 'justify-content-end' | prepend: ' ' }}{%- endif -%}
{%- if block.settings.text_align == 'left' -%}{{ 'text-start' | prepend: ' ' }}{%- elsif block.settings.text_align == 'center' -%}{{ 'text-center' | prepend: ' ' }}{%- elsif block.settings.text_align == 'right' -%}{{ 'text-end' | prepend: ' ' }}{%- endif -%}">
<h5 style="color: {{ block.settings.color_sub }};">{{ block.settings.header_image }}</h5>
<h3 style="color: {{ block.settings.color_title }};">{{ block.settings.subheader_image }}</h3>
<div class="text-sale" style="color: {{ block.settings.color_sale }};">{{ block.settings.text_sale }}</div>
<p style="color: {{ block.settings.color_des }};">{{ block.settings.text_image }}</p>
{%- if block.settings.btn_text != blank -%}
<a class="button-content" href="{{ block.settings.btn_link | default:'#' }}" title="{{ block.settings.btn_text }}">
<span>{{ block.settings.btn_text }} <i class="leofar leofa-arrow-right"></i></span>
</a>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.banner-grid.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "checkbox",
"id": "fullwidth",
"label": "t:sections.banner-grid.settings.fullwidth.label",
"default": false
},
{
"id": "background-color",
"type": "color",
"label": "t:sections.banner-grid.settings.background-color.label"
},
{
"type": "text",
"id": "margin_desktop",
"label": "t:sections.banner-grid.settings.margin_desktop.label",
"info": "t:sections.banner-grid.settings.margin_desktop.info"
},
{
"type": "text",
"id": "padding_desktop",
"label": "t:sections.banner-grid.settings.padding_desktop.label",
"info": "t:sections.banner-grid.settings.padding_desktop.info"
},
{
"type": "text",
"id": "margin_mobile",
"label": "t:sections.banner-grid.settings.margin_mobile.label",
"info": "t:sections.banner-grid.settings.margin_mobile.info"
},
{
"type": "text",
"id": "padding_mobile",
"label": "t:sections.banner-grid.settings.padding_mobile.label",
"info": "t:sections.banner-grid.settings.padding_mobile.info"
},
{
"type": "text",
"id": "heading",
"label": "t:sections.banner-grid.settings.heading.label",
"default": "Multimedia banner-grid"
},
{
"type": "text",
"id": "text_decoration",
"label": "t:sections.banner-grid.settings.text_decoration.label",
"default": "Multimedia banner-grid"
},
{
"id": "style_banner",
"type": "select",
"options": [
{
"value": "style-1",
"label": "t:sections.banner-grid.settings.style_banner.options__1.label"
},
{
"value": "style-2",
"label": "t:sections.banner-grid.settings.style_banner.options__2.label"
}
],
"default": "style-1",
"label": "t:sections.banner-grid.settings.style_banner.label"
},
{
"type": "checkbox",
"id": "effects_image",
"label": "t:sections.banner-grid.settings.effects_image.label",
"default": false
}
],
"blocks": [
{
"type": "image",
"name": "t:sections.banner-grid.blocks.image.name",
"settings": [
{
"type": "select",
"id": "width",
"label": "t:sections.banner-grid.blocks.image.settings.width.label",
"default": "33%",
"options": [
{
"value": "25%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__1.label"
},
{
"value": "33%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__2.label"
},
{
"value": "50%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__3.label"
},
{
"value": "66%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__4.label"
},
{
"value": "75%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__5.label"
},
{
"value": "100%",
"label": "t:sections.banner-grid.blocks.image.settings.width.options__6.label"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.banner-grid.blocks.image.settings.image.label"
},
{
"id": "header_image",
"type": "text",
"label": "t:sections.banner-grid.blocks.image.settings.header_image.label",
"default": "Title banner"
},
{
"id": "color_sub",
"type": "color",
"label": "Color sub",
"default": "#000"
},
{
"type": "text",
"id": "subheader_image",
"label": "t:sections.banner-grid.blocks.image.settings.subheader_image.label",
"default": "sub-title banner"
},
{
"id": "color_title",
"type": "color",
"label": "Color title",
"default": "#000"
},
{
"id": "text_sale",
"type": "textarea",
"label": "Text sale",
"default": "Text sale"
},
{
"id": "color_sale",
"type": "color",
"label": "Color sale",
"default": "#000"
},
{
"id": "text_image",
"type": "liquid",
"label": "t:sections.banner-grid.blocks.image.settings.text_image.label",
"default": "content banner"
},
{
"id": "color_des",
"type": "color",
"label": "Color des",
"default": "#000"
},
{
"type": "text",
"id": "btn_text",
"label": "t:sections.banner-grid.blocks.image.settings.btn_text.label",
"default": "Show More"
},
{
"type": "url",
"id": "btn_link",
"label": "t:sections.banner-grid.blocks.image.settings.btn_link.label"
},
{
"type": "select",
"id": "text_align",
"label": "t:sections.banner-grid.blocks.image.settings.text_align.label",
"default": "center",
"options": [
{
"value": "left",
"label": "t:sections.banner-grid.blocks.image.settings.text_align.options__1.label"
},
{
"value": "center",
"label": "t:sections.banner-grid.blocks.image.settings.text_align.options__2.label"
},
{
"value": "right",
"label": "t:sections.banner-grid.blocks.image.settings.text_align.options__3.label"
}
]
},
{
"type": "select",
"id": "item_align",
"label": "t:sections.banner-grid.blocks.image.settings.item_align.label",
"default": "center",
"options": [
{
"value": "top",
"label": "t:sections.banner-grid.blocks.image.settings.item_align.options__1.label"
},
{
"value": "center",
"label": "t:sections.banner-grid.blocks.image.settings.item_align.options__2.label"
},
{
"value": "bottom",
"label": "t:sections.banner-grid.blocks.image.settings.item_align.options__3.label"
}
]
}
]
}
],
"max_blocks": 20,
"presets": [
{
"name": "t:sections.banner-grid.presets.name",
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
