For older Pipeline users

index-double

{% assign blockList = '' %}
{% for block in section.blocks %}
  {% assign blockList = blockList | append: block.type | append:','  %}
{% endfor %}
{% assign blockArray = blockList | split: "," %}

{% assign swaparoo = false %}
{% if blockArray[0] != 'image' and  blockArray[1] == 'image' %}
  {% assign swaparoo = true %}
{% endif %}

<div class="grid--full homepage-double equalOverflowHeight {{ section.settings.height }}{% if swaparoo %} grid--rev{% endif %}">
  {% if swaparoo %}
    {%- assign block = section.blocks[1] -%}

    {%- if block.settings.image -%}
      {%- assign background_image = block.settings.image | img_url: '1800x' -%}
    {%- else -%}
      {%- assign background_image = 'blank.svg' | asset_url -%}
    {%- endif -%}
    <div class="grid__item large--one-half medium--one-half double__block homepage-image {{ block.settings.color }} preventOverflow" {{ block.shopify_attributes }}>
      {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
        <a href="{{ block.settings.link }}">
      {% endif %}
      <div class="content--centered">
        <div class="{{ block.settings.text_align }} preventOverflowContent">
          {% if block.settings.button_image %}
            <a href="{{ block.settings.link }}">
              <img src="{{ block.settings.button_image | img_url: '1000x' }}" alt="{{ block.settings.button_image.alt | default: block.settings.link_text }}" class="image--flex" />
            </a>
          {% else %}
            {% unless block.settings.title == '' %}<h1 class="home__subtitle">{{ block.settings.title | escape }}</h1>{% endunless %}
            {% unless block.settings.description == '' %}<p class="content--flex h5--body">{{ block.settings.description }}</p>{% endunless %}
            {% unless block.settings.link_text == '' %}<a class="{{ block.settings.button_style }}" href="{{ block.settings.link }}">{{ block.settings.link_text | escape }}</a>{% endunless %}
          {% endif %}
        </div>
      </div>
      <div class="image-overlay image-overlay-{{ block.settings.overlay_opacity }}"></div>
      <div class="background-size-cover" style="background-image: url('{{ background_image }}');"></div>
      {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
        </a>
      {% endif %}
    </div>

  {% endif %}

  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'image' %}
        {% unless swaparoo %}
          {%- if block.settings.image -%}
            {%- assign background_image = block.settings.image | img_url: '1800x' -%}
          {%- else -%}
            {%- assign background_image = 'blank.svg' | asset_url -%}
          {%- endif -%}
          <div class="grid__item large--one-half medium--one-half double__block homepage-image {{ block.settings.color }} preventOverflow" {{ block.shopify_attributes }}>
            {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
              <a href="{{ block.settings.link }}">
            {% endif %}
            <div class="content--centered">
              <div class="{{ block.settings.text_align }} preventOverflowContent">
                {% if block.settings.button_image %}
                  <a href="{{ block.settings.link }}">
                    <img src="{{ block.settings.button_image | img_url: '1000x' }}" alt="{{ block.settings.button_image.alt | default: block.settings.link_text }}" class="image--flex" />
                  </a>
                {% else %}
                  {% unless block.settings.title == '' %}<h1 class="home__subtitle">{{ block.settings.title | escape }}</h1>{% endunless %}
                  {% unless block.settings.description == '' %}<p class="content--flex h5--body">{{ block.settings.description }}</p>{% endunless %}
                  {% unless block.settings.link_text == '' %}<a class="{{ block.settings.button_style }}" href="{{ block.settings.link }}">{{ block.settings.link_text | escape }}</a>{% endunless %}
                {% endif %}
              </div>
            </div>
            <div class="image-overlay image-overlay-{{ block.settings.overlay_opacity }}"></div>
            <div class="background-size-cover" style="background-image: url('{{ background_image }}');"></div>
            {% if block.settings.link_text == '' and block.settings.link and block.settings.button_image == nil %}
              </a>
            {% endif %}
          </div>
        {% endunless %}

      {% when 'text' %}
        <div class="grid__item large--one-half medium--one-half double__block {{ block.settings.homepage_bg_color }} preventOverflow" {{ block.shopify_attributes }}>
          <div class="content--centered">
            <div class="{{ block.settings.text_align }} preventOverflowContent">
              {% if block.settings.title != '' %}
                <h4 class="home__subtitle">{{ block.settings.title | escape }}</h4>
              {% endif %}
              {% if block.settings.richtext != blank %}
                <div class="rte rte--homepage">
                  {{ block.settings.richtext }}
                </div>
              {% endif %}
              {% if block.settings.link_text != '' %}
                <a class="{{ block.settings.button_style }}" href="{{ block.settings.link }}">
                  {{ block.settings.link_text | escape }}
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      {% when 'newsletter' %}
        <div class="grid__item large--one-half medium--one-half double__block {{ block.settings.homepage_bg_color }} preventOverflow" {{ block.shopify_attributes }}>
          <div class="content--centered">
            <div class="{{ block.settings.text_align }} preventOverflowContent">
              {% if block.settings.title != '' %}
                <h4 class="home__subtitle">{{ block.settings.title | escape }}</h4>
              {% endif %}
              {% if block.settings.richtext != blank %}
                <div class="rte rte--homepage">
                  {{ block.settings.richtext }}
                </div>
              {% endif %}
              {% include 'newsletter-form' %}
            </div>
          </div>
        </div>
      {% else %}
    {% endcase %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "Image and text",
  "max_blocks": 2,
  "settings": [
    {
      "type": "select",
      "id": "height",
      "label": "Section height",
      "default": "use_screen_one_third",
      "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_screen_one_fifth", "label": "Tiny"}
      ]
    }
  ],
  "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Background image"
        },
        {
          "type":    "range",
          "id":      "overlay_opacity",
          "min":     0,
          "max":     100,
          "step":    5,
          "label":   "Image overlay opacity",
          "info":    "Increase contrast for legible text.",
          "default": 15
        },
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Headline"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description"
        },
        {
          "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"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button style",
          "default": "btn btn--clear btn--square uppercase",
          "options": [
            { "value": "btn btn--splash uppercase", "label": "Round"},
            { "value": "btn btn--splash btn--square uppercase", "label": "Square"},
            { "value": "btn btn--clear uppercase", "label": "Transparent round"},
            { "value": "btn btn--clear btn--square uppercase", "label": "Transparent square"},
            { "value": "btn 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"
        }
      ]
    },
    {
      "type": "text",
      "name": "Rich text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Image and text"
        },
        {
          "id": "richtext",
          "type": "richtext",
          "label": "Text",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
        },
        {
          "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": "homepage_bg_color",
          "label": "Background color",
          "default": "homepage--light",
          "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"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "Button style",
          "default": "btn btn--clear btn--square uppercase",
          "options": [
            { "value": "btn btn--splash uppercase", "label": "Round"},
            { "value": "btn btn--splash btn--square uppercase", "label": "Square"},
            { "value": "btn btn--clear uppercase", "label": "Transparent round"},
            { "value": "btn btn--clear btn--square uppercase", "label": "Transparent square"},
            { "value": "btn btn--outline btn--square uppercase", "label": "Outlined square"}
          ]
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Newsletter"
        },
        {
          "id": "richtext",
          "type": "richtext",
          "label": "Text",
          "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
        },
        {
          "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": "homepage_bg_color",
          "label": "Background color",
          "default": "homepage--light",
          "options": [
            { "value": "homepage--white", "label": "White"},
            { "value": "homepage--light", "label": "Light"},
            { "value": "homepage--splash", "label": "Accent"},
            { "value": "homepage--dark", "label": "Dark"}
          ]
        },
        {
          "type": "paragraph",
          "content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers).  Sync to Mailchimp with the official [Mailchimp app](https://apps.shopify.com/mailchimp)."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image and text",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}


{% stylesheet %}
/*=============== Image Columns ===============*/

.homepage-double{
  background-color: $colorBody;
}
.homepage-double form{
  margin-bottom: 0;
}
.double__block{
  position: relative;
  overflow: hidden;
  .home__subtitle{
    text-align: inherit;
    margin-bottom: $gutter/2 + 2px;
  }
  .content--centered{
    max-width: $siteWidth/2 - $gutter*2;
  }
}
.homepage-double .double__block{
  height: 100%;
}

.double__block .text-left .home__subtitle::after{ right: initial; }
.double__block .text-right .home__subtitle::after{ left: initial; }

@include at-query ($max, $small) {
  .homepage-double.use_screen_full{ height: auto; .double__block{ height: 100vh; } }
  .homepage-double.use_screen_three_quarters{ height: auto; .double__block{ height: 66vh; } }
  .homepage-double.use_screen_two_thirds{ height: auto; .double__block{ height: 66vh; } }
  .homepage-double.use_screen_one_half{ height: auto; .double__block{ height: 50vh; } }
  .homepage-double.use_screen_one_third{ height: auto; .double__block{ height: 33vh; } }
  .homepage-double.use_screen_one_fifth{ height: auto; .double__block{ height: 20vh; } }
}

.rte--homepage{
  font-size: 1.2em;
  margin-bottom: 0;
}


{% endstylesheet %}