<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
  {% case section.blocks.size %}
  {% when 1 %}
  {%- assign column_size = '' -%}
  {% when 2 %}
  {%- assign column_size = 'medium-up--one-half' -%}
  {% when 3 %}
  {%- assign column_size = 'medium-up--one-third' -%}
  {% when 4 %}
  {%- assign column_size = 'medium-up--one-quarter' -%}
  {% else %}
  {%- assign column_size = 'medium-up--one-third' -%}
  {% endcase %}

  {% for block in section.blocks %}
  <div class="grid__item {{ column_size }} js" {{ block.shopify_attributes }}>
    {% if block.settings.link != blank %}

    {% if section.settings.section_height == 'full_size' %}
    <a class="image-bar__link" href="{{ block.settings.link }}">
      <div class="box lazyload line">
        <img src="{{ block.settings.image | img_url: 'master' }}">

        {% else %}
        <a class="image-bar__link" href="{{ block.settings.link }}">
          <div class="image-bar__item box ratio-container lazyload"
               data-bgset="{% include 'bgset', image: block.settings.image %}"
               data-sizes="auto"
               data-parent-fit="cover"
               style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
            {% endif %}
            {% elsif block.settings.image != blank %}
            {% if section.settings.section_height == 'full_size' %}
            <div class="box  lazyload line">
              <img src="{{ block.settings.image | img_url: 'master' }}">

              {% else %}
              <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});">
                {% endif %}
                {% else %}
                <div class="image-bar__item">
                  {% endif %}
                  <div class="{% unless section.settings.section_height == 'full_size' %} image-bar__content {% endunless %}{% if block.settings.cta_label != blank %} image-bar__overlay{% endif %}">
                    {% if block.settings.image == blank %}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {% endif %}

                    {% if block.settings.cta_label != blank %}
                    <div class="image-bar__text">
                      <h3 class="image-bar__caption">{{ block.settings.cta_label | escape }}</h3>
                    </div>
                    {% endif %}
                  </div>
                  {% if block.settings.link != blank %}
                </div></a>
              {% else %}
            </div>
            {% endif %}
          </div>
          <noscript>
            <div class="grid__item {{ column_size }}" {{ block.shopify_attributes }}>
              <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image | img_url: '2048x' }});background-position: center {{ section.settings.alignment }};"></div>
            </div>
          </noscript>
          {% endfor %}
          </div>

        {% if section.blocks.size == 0 %}
        {% include 'no-blocks' %}
        {% endif %}
          <style>
          {% if section.settings.section_height == 'full_size' %}
          .line
          {
            position: relative;
            line-height: 0;
          }
          {% endif %}
        </style>
 
{% schema %}
  {
    "name": "Gallery",
    "class": "index-section--flush",
    "max_blocks": 6,
    "settings": [
  	  {
        "type": "header",
        "content": "Gallery [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002078873-How-to-setup-Gallery-section-in-Booster-2-0)"
      },
      {
        "type": "select",
        "id": "section_height",
        "label": "Section height",
        "default": "medium",
        "options": [
          {
            "label": "Extra Small",
            "value": "x-small"
          },
          {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
          {
            "label": "Extra Large",
            "value": "x-large"
          },
          {
            "label": "Full Size",
            "value": "full_size"
          }
        ],
        "info": "This Optin Only Aplicable If Enable Full Size Option"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Image alignment",
            "default": "center",
            "options": [
              {
                "value": "top",
                "label": "Top"
              },
              {
                "value": "center",
                "label": "Middle"
              },
              {
                "value": "bottom",
                "label": "Bottom"
              }
            ],
        	"info": "Upload Same Resolution Image If Section Height Is 'Extra Small'"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          },
          {
            "type": "text",
            "id": "cta_label",
            "label": "Caption"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Gallery",
        "category": "Image",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}