Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {%- if section.settings.image -%}
- {%- assign img_object = section.settings.image -%}
- {%- assign img_small = section.settings.image | img_url: '18x' -%}
- {%- assign img_api = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
- {%- else -%}
- {%- assign img_object = 'blank.svg' | asset_url -%}
- {%- assign img_small = 'blank.svg' | asset_url -%}
- {%- assign img_api = 'blank.svg' | asset_url -%}
- {%- endif -%}
- <div class="homepage-image banner-desktop fade-in-child preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="parallax" id="FeaturedImage-{{ section.id }}"
- {% if section.settings.parallax %}
- data-parallax-src="{{ img_small }}"
- data-src="{{ img_api }}"
- data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480]"
- data-aspectratio="{{ section.settings.image.aspect_ratio }}"
- data-sizes="auto"
- style="background-image: url('{{ section.settings.image | img_url: '1x1' }}');"
- {% endif %}>
- {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
- <a href="{{ section.settings.link }}">
- {% endif %}
- <div class="content--centered">
- <div class="{{ section.settings.text_align }} preventOverflowContent">
- {%- if section.settings.button_image -%}
- {%- assign img_button = section.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
- <a href="{{ section.settings.link }}">
- <img class="lazyload image--flex"
- alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}"
- src="{{ section.settings.button_image | img_url: '180x' }}"
- data-src="{{ img_button }}"
- data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480]"
- data-aspectratio="{{ section.settings.button_image.aspect_ratio }}"
- data-sizes="auto"/>
- <noscript>
- <img src="{{ section.settings.button_image | img_url: '540x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" />
- </noscript>
- </a>
- {%- else -%}
- {% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
- {% unless section.settings.description == '' %}<p class="content--flex h4--body">{{ section.settings.description }}</p>{% endunless %}
- {% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
- {%- endif -%}
- </div>
- </div>
- <div class="image-overlay image-overlay-{{ section.settings.overlay_opacity }}"></div>
- {% if section.settings.height == 'use_image' %}
- <div class="lazy-image" style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%; background-image: url('{{ section.settings.image | img_url: '1x1' }}');">
- <img class="lazyload fade-in" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
- alt="{{ section.settings.image.alt | default: shop.name }}"
- data-src="{{ img_api }}"
- data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480]"
- data-aspectratio="{{ section.settings.image.aspect_ratio }}"
- data-parent-fit="cover"
- data-sizes="auto"/>
- </div>
- {% endif %}
- {% if section.settings.parallax == false and section.settings.height != 'use_image' %}
- <div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: img_object %}"></div>
- {% endif %}
- {% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
- </a>
- {% endif %}
- {% if section.settings.height == 'use_screen_full' %}
- <div class="scroll_icon_wrap">
- <a href="#scroll-{{ section.id }}" class="scroll_link bloop">
- <span class="scroll_icon">{% include 'svg-down' %}</span>
- </a>
- </div>
- <div class="scroll__link" id="scroll-{{ section.id }}"></div>
- {% endif %}
- <noscript>
- <img src="{{ img_object | img_url: '1440x' }}" alt="{{ img_object.alt | default: section.settings.title }}" class="responsive-wide-image"/>
- </noscript>
- </div>
- {% schema %}
- {
- "name": "Banner desktop",
- "settings": [
- {
- "type": "image_picker",
- "id": "image",
- "label": "Image"
- },
- {
- "type": "select",
- "id": "height",
- "label": "Section height",
- "default": "use_screen_two_thirds",
- "options": [
- { "value": "use_screen_full", "label": "Full screen height"},
- { "value": "use_screen_two_thirds", "label": "Tall"},
- { "value": "use_screen_one_half", "label": "Medium"},
- { "value": "use_screen_one_third", "label": "Short"},
- { "value": "use_image", "label": "Image height"}
- ]
- },
- {
- "type": "range",
- "id": "overlay_opacity",
- "min": 0,
- "max": 100,
- "step": 5,
- "label": "Image overlay opacity",
- "info": "Increase contrast for legible text.",
- "default": 15
- },
- {
- "type": "checkbox",
- "id": "parallax",
- "default": false,
- "label": "Enable parallax scroll"
- },
- {
- "type": "header",
- "content": "Text"
- },
- {
- "type": "text",
- "id": "title",
- "label": "Headline",
- "default": "Image with text overlay"
- },
- {
- "type": "textarea",
- "id": "description",
- "label": "Description",
- "default": "This area is used to describe your store."
- },
- {
- "type": "select",
- "id": "text_align",
- "label": "Alignment",
- "default": "text-center",
- "options": [
- { "value": "text-left", "label": "Align Left"},
- { "value": "text-center", "label": "Align Center"},
- { "value": "text-right", "label": "Align Right"}
- ]
- },
- {
- "type": "select",
- "id": "color",
- "label": "Text color",
- "default": "homepage--white",
- "options": [
- { "value": "homepage--white", "label": "White"},
- { "value": "homepage--light", "label": "Light"},
- { "value": "homepage--splash", "label": "Accent"},
- { "value": "homepage--dark", "label": "Dark"}
- ]
- },
- {
- "type": "header",
- "content": "Button"
- },
- {
- "type": "text",
- "id": "link_text",
- "label": "Text",
- "default": "View products",
- "info": "Leave blank to link entire image"
- },
- {
- "type": "url",
- "id": "link",
- "label": "Link"
- },
- {
- "type": "select",
- "id": "button_style",
- "label": "Button style",
- "default": "btn btn--large btn--clear btn--square uppercase",
- "options": [
- { "value": "btn btn--large btn--splash uppercase", "label": "Round"},
- { "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
- { "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
- { "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
- { "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
- ]
- },
- {
- "type": "header",
- "content": "Button image (optional)"
- },
- {
- "type": "image_picker",
- "id": "button_image",
- "label": "Button image",
- "info": "1000 x 1000px .png max"
- }
- ],
- "presets": [
- {
- "name": "Banner desktop",
- "category": "Image"
- }
- ]
- }
- {% endschema %}
Add Comment
Please, Sign In to add comment