Pipeline 4.2 version

page-banner-1.liquid

{%- 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 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": "Page Banner",
  "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"
    }
  ]
}
{% endschema %}