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 -%}

  .is_hidden{
    display:none;
  }
  .ReadMore {
    text-align: center;
    display: block;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    text-decoration: underline;
  }
  .cstm_lr_img .image-with-text__wrapper {
    padding-top: 0;
  }
  .cstm_lr_img:nth-child(1) .image-with-text__wrapper {
    padding-top: 30px;
  }

  @media only screen and (max-width:768px){
    .ReadMore {
      margin-top: 25px;
    }
  }    
    
</style>

<section class="cstm-lft-rgt-section 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 -%}
{%- for block in section.blocks -%}
    <image-with-text size="{{ section.blocks.size }}" {% if block.settings.reveal_on_scroll %}reveal-on-scroll{% endif %} class="cstm_lr_img image-with-text {% if is_boxed %}image-with-text--boxed{% endif %} {% if block.settings.image_position == 'right' %}image-with-text--reverse{% endif %} image-with-text--overlap-{{ section.settings.background_overlap }} {%- if forloop.index > 1 and section.settings.enable_readmore -%} is_hidden {% endif %}" style="--image-aspect-ratio: {{ first_block.settings.image.aspect_ratio | default: 1 }}">
      <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">
            {% comment %} {%- for block in section.blocks -%} {% endcomment %}
              {%- if block.settings.image != blank -%}
                <img id="block-{{ block.id }}-{{ block.settings.image.id }}" class="image-with-text__image" {% if block.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 -%}
            {% comment %} { %- endfor -%} {% endcomment %}

            {%- if image_count == 0 -%}
              {%- if block.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">
                <image-with-text-item {% if block.settings.image != blank and image_count > 1 %}attached-image="block-{{ block.id }}-{{ block.settings.image.id }}"{% endif %}  class="image-with-text__content text-container text--{{ block.settings.text_alignment }}" {{ block.shopify_attributes }}>
                  {%- if block.settings.subheading != blank -%}
                    <h2 class="heading heading--small">
                      <split-lines >{{ block.settings.subheading | escape }}</split-lines>
                    </h2>
                  {%- endif -%}

                  {%- if block.settings.title != blank -%}
                    <h3 class="heading h3">
                      <split-lines >{{ block.settings.title | escape }}</split-lines>
                    </h3>
                  {%- endif -%}

                  <div class="image-with-text__text-wrapper" >
                    {%- 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>
            </div>
          </div>
        </div>
      </div>
    </image-with-text>
{%- endfor -%}
{%- if section.blocks.size > 1 and section.settings.enable_readmore -%}
<a href="javascript:void(0)" class="ReadMore">Read more</a>
<script>
  document.querySelector(".ReadMore").addEventListener("click", function(){
    if(document.querySelectorAll(".cstm_lr_img.is_hidden").length >= 1){
        document.querySelectorAll(".cstm_lr_img.is_hidden")[0].classList.remove("is_hidden");
        if(document.querySelectorAll(".cstm_lr_img.is_hidden").length == 0){
            document.querySelector(".ReadMore").innerText = "Read less";
        }
    }else{
        document.querySelectorAll(".cstm_lr_img").forEach( (obj,ind) => {
            if(document.querySelectorAll(".cstm_lr_img.is_hidden").length == 0){
              document.querySelector(".ReadMore").innerText = "Read more"
            }
            if(ind>0){
                obj.classList.add("is_hidden");
            }
        })
    }
  })
</script>    
{%- endif -%}  
  </div>
</section>

{% schema %}
{
  "name": "left right image",
  "class": "shopify-section--image-with-text",
  "settings": [
    {
      "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": "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)"
    },
    {
      "type": "checkbox",
      "id": "enable_readmore",
      "label": "Enable Read More button"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Item",
      "settings": [
    {
      "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": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1400 x 1400px .jpg recommended"
        },
        {
          "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": "left right image with readmore",
      "settings": {},
      "blocks": [
        {
          "type": "item"
        }
      ]
    }
  ]
}
{% endschema %}