Image-With-Text.Liquid

{% comment %}theme-check-disable MissingTemplate{% endcomment %}
{%- liquid
  assign section_color = section.settings.color_scheme
  assign image_position = section.settings.image_position
  assign text_align = section.settings.text_alignment
  case section.settings.image_size
    when 'third'
      assign text_width_desktop = 'lg:col-span-8'
      assign content_wrapper_class = 'lg:aspect-ratio-content lg:aspect-ratio-content-landscape'
      if image_position == 'right'
        assign image_width_desktop = 'lg:col-start-9 lg:col-end-13'
      else
        assign image_width_desktop = 'lg:col-span-4'
      endif
    when 'half'
      assign text_width_desktop = 'lg:col-span-6'
      assign content_wrapper_class = 'lg:aspect-ratio-content lg:aspect-ratio-content-square'
      if image_position == 'right'
        assign image_width_desktop = 'lg:col-start-7 lg:col-end-13'
      else
        assign image_width_desktop = 'lg:col-span-6'
      endif
    when 'two_thirds'
      assign text_width_desktop = 'lg:col-span-4'
      assign content_wrapper_class = 'lg:aspect-ratio-content lg:aspect-ratio-content-portrait'
      if image_position == 'right'
        assign image_width_desktop = 'lg:col-start-5 lg:col-end-13'
      else
        assign image_width_desktop = 'lg:col-span-8'
      endif
  endcase
-%}

<section class="relative image-with-text section-with-no-padding bg-primary-background {% if section.settings.cta_url != blank %}group{% endif %}"
         data-section-id="{{ section.id }}">
  {% if section.settings.cta_url != blank %}
  <a href="{{ section.settings.cta_url }}" class="increase-target"></a>
  {% endif %}
  <div class="grid grid-cols-1 lg:grid-cols-12 grid-flow-row-dense">
    <div class="image-with-text__image {{ image_width_desktop }}">
      <div class="relative min-h-full overflow-hidden">
        {% if section.settings.image != blank %}
          <div class="hidden lg:block">
            {% render 'image-object' with
              image: section.settings.image
            %}
          </div>
          <div class="block lg:hidden">
            {% render 'responsive-image' with image: section.settings.image %}
          </div>
        {% else %}
          <div class="bg-placeholder-darker-bg absolute top-0 left-0 w-full h-full">
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg w-full h-full text-primary-text fill-current' }}
          </div>
        {% endif %}
      </div>
    </div>
    <div class="image-with-text__text  {{ text_width_desktop }}  {{ content_wrapper_class }}  flex items-center  bg-{{ section_color }}-background text-{{ section_color }}-text px-5 lg:px-10 section-y-padding">
      <div class="{{ text_align }} break-words w-full  py-10 lg:py-20" data-fade-in>
        {% if section.settings.heading != blank %}
          <h2 class="block font-heading text-2xl lg:text-3xl lg:text-4xl leading-snug max-w-md {% if text_align == 'text-center' %}mx-auto{% endif %} {% if text_align == 'text-right' %}ml-auto{% endif %}">
            <span class="type-text-overlay">
              {{ section.settings.heading | escape }}
            </span>
          </h2>
        {% endif %}
        {% if section.settings.richtext != blank %}
          <div class="leading-relaxed text-rte mt-4  max-w-md {% if text_align == 'text-center' %}mx-auto{% endif %} {% if text_align == 'text-right' %}ml-auto{% endif %}">
            {{ section.settings.richtext }}
          </div>
        {% endif %}
        {% if section.settings.cta_url != blank and section.settings.cta_text != blank %}
          <div class="mt-8">
            <span class="btn btn-{{ section.settings.button_style }}-{{ section_color }}-{{ settings.outline_button_color }}">
              <span class="btn-text">{{ section.settings.cta_text }}</span>
              {% if settings.buttons_show_arrow %}<span class="btn-icon">{% render 'icon-right_arrow' %}<span>{% endif %}
            </span>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% comment %}theme-check-enable MissingTemplate{% endcomment %}

{% schema %}
{
  "name": "Image with text",
  "settings": [
    {
      "id": "image",
      "type": "image_picker",
      "label": "Image",
      "info": "Image will be cropped on desktop. See docs: "
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position on desktop",
      "default": "right",
      "options": [
        {
          "value": "right",
          "label": "Right"
        },
        {
          "value": "left",
          "label": "Left"
        }
      ]
    },
    {
      "type": "select",
      "id": "image_size",
      "label": "Image size on desktop",
      "default": "half",
      "options": [
        {
          "value": "third",
          "label": "One third"
        },
        {
          "value": "half",
          "label": "One half"
        },
        {
          "value": "two_thirds",
          "label": "Two thirds"
        }
      ]
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Image with text"
    },
    {
      "type": "richtext",
      "id": "richtext",
      "label": "Text"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        { "value": "text-left", "label": "Left"},
        { "value": "text-center", "label": "Center"},
        { "value": "text-right", "label": "Right"}
      ],
      "default":   "text-left"
    },
    {
      "type": "header",
      "content": "Call to action"
    },
    {
      "type": "url",
      "id": "cta_url",
      "label": "Link"
    },
    {
      "type": "text",
      "id": "cta_text",
      "label": "Text",
      "default": "Shop Now"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "default": "outline",
      "options": [
        {
          "value": "outline",
          "label": "Outline"
        },
        {
          "value": "solid",
          "label": "Solid"
        }
      ]
    },
    {
      "type": "header",
      "content": "Color"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
          { "value": "primary", "label": "Primary"},
          { "value": "secondary", "label": "Secondary"},
          { "value": "tertiary", "label": "Tertiary"}
      ],
      "default":   "secondary"
    }
  ],
  "presets": [
    {
      "name": "Image with text"
    }
  ]
}
{% endschema %}