image-with-text-overlay.liquid

{% comment %}
** Image with text overlay - homepage partial **
- Draggable section
{% endcomment %}

{% assign default = '1400x' %}
{% assign size1 = '480x' %}
{% assign size2 = '765x' %}
{% assign size3 = '900x' %}
{% assign size4 = '1000x' %}
{% assign size5 = '1100x' %}
{% assign size6 = '1300x' %}
{% assign size7 = '1500x' %}
{% assign size8 = '1700x' %}
{% assign size9 = '1900x' %}
{% assign size10 = '2000x' %}

<section id="banner-{{section.id}}" class="banner">
  {% if section.settings.image != nil %}
    <img  src="{{ section.settings.image | img_url: '100x'}}"
          alt="{{ section.settings.image.alt | escape }}"
          class="lazyload {{ settings.image_loading_style }}"
          sizes="100vw"
          data-src="{{ section.settings.image | img_url: default }}"
          srcset="
          {{ section.settings.image | img_url: default }} {{default | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size1 }} {{size1 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size2 }} {{size2 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size3 }} {{size3 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size4 }} {{size4 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size5 }} {{size5 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size6 }} {{size6 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size7 }} {{size7 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size8 }} {{size8 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size9 }} {{size9 | replace: 'x', 'w'}},
          {{ section.settings.image | img_url: size10 }} {{size10 | replace: 'x', 'w'}}"

           />
  {% else %}
    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--banner' }}
  {% endif %}
  {% unless section.settings.button1_link != blank and section.settings.button2_link != blank %}
    {% if section.settings.button1_link != blank %}
      <a href="{{ section.settings.button1_link }}" class="banner-full-link">
        {{ section.settings.button1 }}
      </a>
    {% endif %}
    {% if section.settings.button2_link != blank %}
      <a href="{{ section.settings.button2_link }}" class="banner-full-link">
        {{ section.settings.button2 }}
      </a>
    {% endif %}
  {% endunless %}
  {% unless section.settings.pretext == blank and section.settings.title == blank and section.settings.subtitle == blank and section.settings.button1 == blank and section.settings.button2 == blank %}
    <div class="position-{{ section.settings.text_position }} caption js-caption">
      <div class="caption-content caption-background-{{ section.settings.caption_background }} caption-transparency-{{ section.settings.caption_background_transparency }} align-{{ section.settings.text_align }}">
        {% if section.settings.pretext != blank %}
          <div class="pretext">
            {{ section.settings.pretext }}
          </div>
        {% endif %}
        {% if section.settings.title != blank %}
          <h1 class="headline">
            {{ section.settings.title }}
          </h1>
        {% endif %}
        {% if section.settings.subtitle != blank %}
          <div class="subtitle">
            {{ section.settings.subtitle }}
          </div>
        {% endif %}
        {% if section.settings.button1 != blank %}
          <a {% if section.settings.button1_link != blank %}href="{{ section.settings.button1_link }}"{% endif %} class="action_button first_button highlight-{{ section.settings.button1_highlight }}">
            {{ section.settings.button1 }}
          </a>
        {% endif %}
        {% if section.settings.button2 != blank %}
          <a {% if section.settings.button2_link != blank %}href="{{ section.settings.button2_link }}"{% endif %} class="action_button second_button highlight-{{ section.settings.button2_highlight }}">
            {{ section.settings.button2 }}
          </a>
        {% endif %}
      </div>
    </div>
  {% endunless %}
</section>

{% schema %}

{
  "name": "Image with text overlay",
  "class": "image-with-text-overlay-section under-menu",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image",
      "info": "1800 x 1000px recommended"
    },
    {
      "type": "richtext",
      "id": "pretext",
      "label": "Preheading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "subtitle",
      "label": "Subheading"
    },
    {
      "type": "checkbox",
      "id": "caption_background",
      "label": "Display solid text background",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "caption_background_transparency",
      "label": "Enable background transparency"
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "text",
      "id": "button1",
      "label": "First button label"
    },
    {
      "type": "url",
      "id": "button1_link",
      "label": "First button link"
    },
    {
      "type": "checkbox",
      "id": "button1_highlight",
      "label": "Highlight first button"
    },
    {
      "type": "text",
      "id": "button2",
      "label": "Second button label"
    },
    {
      "type": "url",
      "id": "button2_link",
      "label": "Second button link"
    },
    {
      "type": "checkbox",
      "id": "button2_highlight",
      "label": "Highlight second button"
    }
  ],
  "presets": [
    {
      "name": "Image with text overlay",
      "category": "Image",
      "settings": {
        "image": "",
        "title": "Your Headline",
        "text_position": "center",
        "text_align": "center"
      }
    }
  ]
}

{% endschema %}