Untitled

{%- if section.settings.background_type == 'boxed' -%}
  {%- assign is_boxed = true -%}
{%- else -%}
  {%- assign is_boxed = false -%}
{%- endif -%}

<style>
  #shopify-section-{{ section.id }} {
    {%- if section.settings.text_color == 'rgba(0,0,0,0)' -%}
      {%- assign heading_color = settings.heading_color -%}
      {%- assign text_color = settings.text_color -%}
    {%- else -%}
      {%- assign heading_color = section.settings.text_color -%}
      {%- assign text_color = section.settings.text_color -%}
    {%- endif -%}

    {%- if section.settings.button_background == 'rgba(0,0,0,0)' -%}
      {%- assign button_background = settings.primary_button_background -%}
    {%- else -%}
      {%- assign button_background = section.settings.button_background -%}
    {%- endif -%}

    {%- if section.settings.button_text_color == 'rgba(0,0,0,0)' -%}
      {%- assign button_text_color = settings.primary_button_text_color -%}
    {%- else -%}
      {%- assign button_text_color = section.settings.button_text_color -%}
    {%- endif -%}

    --heading-color: {{ heading_color.red }}, {{ heading_color.green }}, {{ heading_color.blue }};
    --text-color: {{ text_color.red }}, {{ text_color.green }}, {{ text_color.blue }};
    --primary-button-background: {{ button_background.red }}, {{ button_background.green }}, {{ button_background.blue }};
    --primary-button-text-color: {{ button_text_color.red }}, {{ button_text_color.green }}, {{ button_text_color.blue }};

    --section-accent-background: {{ section.settings.accent_background.red }} {{ section.settings.accent_background.green }} {{ section.settings.accent_background.blue }} / {{ section.settings.accent_background.alpha }};
    --section-autoplay-duration: {{ section.settings.cycle_speed }}s;
    --section-animation-play-state: paused;
  }

  {%- if section.settings.background_overlap != 'both' -%}
    /* We have to remove some extra spacing adding in non-overlap mode */
    @media screen and (max-width: 999px) {
      {%- if section.settings.background_overlap == 'image' -%}
        {%- unless is_boxed -%}
          #shopify-section-{{ section.id }} .section {
            margin-top: 0;
          }

          #shopify-section-{{ section.id }} .image-with-text {
            margin-bottom: calc(-1 * var(--vertical-breather)) !important;
          }
        {%- else -%}
          #shopify-section-{{ section.id }} .image-with-text {
            margin-bottom: calc(-1 * var(--container-gutter)) !important;
          }
        {%- endunless -%}
      {%- elsif section.settings.background_overlap == 'text' -%}
        {%- unless is_boxed -%}
          #shopify-section-{{ section.id }} .section {
            margin-bottom: 0;
          }

          #shopify-section-{{ section.id }} .image-with-text {
            margin-top: calc(-1 * var(--vertical-breather)) !important;
          }
        {%- else -%}
          #shopify-section-{{ section.id }} .image-with-text {
            margin-top: calc(-1 * var(--container-gutter)) !important;
          }
        {%- endunless -%}
      {%- endif -%}
    }
  {%- endif -%}
</style>

<section class="section {% if section.settings.background_overlap == 'both' and is_boxed == false %}section--flush{% endif %}">
  <div {% if is_boxed %}class="container"{% endif %}>
    {%- assign first_block = section.blocks.first -%}

    <image-with-text {% if section.settings.reveal_on_scroll %}reveal-on-scroll{% endif %} class="image-with-text {% if is_boxed %}image-with-text--boxed{% endif %} {% if section.settings.image_position == 'right' %}image-with-text--reverse{% endif %} image-with-text--overlap-{{ section.settings.background_overlap }}" style="--image-aspect-ratio: {{ first_block.settings.image.aspect_ratio | default: 1 }}; --image-max-height: {{ first_block.settings.image.height }}px">
      <div class="{% unless is_boxed %}container{% endunless %}">
        <div class="image-with-text__wrapper">
          {%- assign first_image_aspect_ratio = first_block.settings.image.aspect_ratio | default: 1 -%}
          {%- assign image_count = 0 -%}

          <div class="image-with-text__image-wrapper">
            {%- for block in section.blocks -%}
              {%- if block.settings.image != blank -%}
                <img id="block-{{ block.id }}-{{ block.settings.image.id }}" class="image-with-text__image" {% if section.settings.reveal_on_scroll %}reveal-visibility{% endif %} {% unless image_count == 0 %}hidden{% endunless %} sizes="(max-width: 740px) calc(100vw - 96px), (max-width: 999px) calc(100vw - 160px), 600px" loading="lazy" {% render 'image-attributes', image: block.settings.image, sizes: '600,700,800,1000,1200,1400' %}>
                {%- assign image_count = image_count | plus: 1 -%}
              {%- endif -%}
            {%- endfor -%}

            {%- if image_count == 0 -%}
              {%- if section.settings.reveal_on_scroll -%}
                {{- 'image' | placeholder_svg_tag: 'image-with-text__image placeholder-background' | replace: '<svg', '<svg reveal-visibility' -}}
              {%- else -%}
                {{- 'image' | placeholder_svg_tag: 'image-with-text__image placeholder-background' -}}
              {%- endif -%}
            {%- endif -%}
          </div>

          <div class="image-with-text__content-wrapper">
            <div class="image-with-text__content-list">
              {%- for block in section.blocks -%}
                <image-with-text-item {% if block.settings.image != blank and image_count > 1 %}attached-image="block-{{ block.id }}-{{ block.settings.image.id }}"{% endif %} {% unless forloop.first %}hidden{% endunless %} class="image-with-text__content text-container text--{{ section.settings.text_alignment }}" {{ block.shopify_attributes }}>
                  {%- if block.settings.subheading != blank -%}
                    <h2 class="heading heading--small">
                      <split-lines {% if section.settings.reveal_on_scroll or forloop.first != true %}reveal{% endif %}>{{ block.settings.subheading | escape }}</split-lines>
                    </h2>
                  {%- endif -%}

                  {%- if block.settings.title != blank -%}
                    <h3 class="heading h3">
                      <split-lines {% if section.settings.reveal_on_scroll or forloop.first != true %}reveal{% endif %}>{{ block.settings.title | escape }}</split-lines>
                    </h3>
                  {%- endif -%}

                  <div class="image-with-text__text-wrapper" {% if section.settings.reveal_on_scroll or forloop.first != true %}reveal{% endif %}>
                    {%- if block.settings.content != blank -%}
                      {{- block.settings.content -}}
                    {%- endif -%}

                    {%- if block.settings.button_text != blank -%}
                      <div class="button-wrapper">
                        <a href="{{ block.settings.button_link }}" class="button button--primary">{{ block.settings.button_text }}</a>
                      </div>
                    {%- endif -%}
                  </div>
                </image-with-text-item>
              {%- endfor -%}
            </div>

            {%- comment -%}If we have two blocks we show the navigation{%- endcomment -%}
            {%- if section.blocks.size > 1 -%}
              <page-dots animation-timer class="image-with-text__navigation">
                {%- for block in section.blocks -%}
                  <button type="button" class="image-with-text__navigation-item" {% if forloop.first %}aria-current="true"{% endif %}>
                    <span class="heading heading--small">{{- block.settings.tab_label | escape -}}</span>
                  </button>
                {%- endfor -%}
              </page-dots>
            {%- endif -%}
          </div>
        </div>
      </div>
    </image-with-text>
  </div>
</section>

{% schema %}
{
  "name": "Image with text",
  "class": "shopify-section--image-with-text",
  "max_blocks": 2,
  "settings": [
    {
      "type": "checkbox",
      "id": "reveal_on_scroll",
      "label": "Reveal on scroll",
      "info": "Show animation when section becomes visible.",
      "default": true
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "Background",
      "options": [
        {
          "value": "full_width",
          "label": "Full width"
        },
        {
          "value": "boxed",
          "label": "Boxed"
        }
      ],
      "default": "full_width"
    },
    {
      "type": "select",
      "id": "background_overlap",
      "label": "Background overlap",
      "info": "Add an accent background color below.",
      "options": [
        {
          "value": "image",
          "label": "Image"
        },
        {
          "value": "text",
          "label": "Text"
        },
        {
          "value": "both",
          "label": "Both"
        }
      ],
      "default": "image"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Desktop image position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "cycle_speed",
      "min": 3,
      "max": 20,
      "step": 1,
      "unit": "s",
      "label": "Change text every",
      "default": 8
    },
    {
      "type": "color",
      "id": "accent_background",
      "label": "Accent background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text",
      "default": "rgba(0,0,0,0)"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1400 x 1400px .jpg recommended"
        },
        {
          "type": "text",
          "id": "tab_label",
          "label": "Tab label",
          "info": "Only shown if 2 text blocks are set",
          "default": "Item"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Subheading"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Image with text"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "<p>Use image with text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image with text",
      "settings": {},
      "blocks": [
        {
          "type": "item"
        }
      ]
    }
  ]
}
{% endschema %}