Custom with optional image and link - Pipeline 3.1

index-collection-grid.liquid

{%- assign collection_image_size = 'x630' -%}
{%- assign grid_item_width = 'large--one-half' -%}

{% case section.settings.grid %}
  {% when 1 %}
    {%- assign grid_item_width = 'large--one-half collection-grid--single' -%}
    {%- assign collection_image_size = 'x630' -%}
  {% when 2 %}
    {%- assign grid_item_width = 'large--one-half' -%}
    {%- assign collection_image_size = 'x630' -%}
  {% when 3 %}
    {%- assign grid_item_width = 'large--one-third' -%}
    {%- assign collection_image_size = 'x450' -%}
{% endcase %}

<div class="homepage-collection-grid {{ section.settings.homepage_collection_grid_color }}" data-section-id="{{ section.id }}" data-section-type="index-collection">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <h4 class="home__subtitle">{{ section.settings.title | escape }}</h4>
    {% endif %}

    <div class="grid grid-uniform">
      {% for block in section.blocks limit: section.blocks.size %}

        {%- assign collection = collections[block.settings.collection] -%}
        {%- assign collection_image_url = "" -%}

         {% if block.settings.image != blank %}
          {% capture collection_image_url %}{{ block.settings.image | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
      
        {% elsif collection.image %}
          {% capture collection_image_url %}{{ collection | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
        {% elsif collection.products.first %}
          {% capture collection_image_url %}{{ collection.products.first | img_url: collection_image_size, crop: 'top' }}{% endcapture %}

           
        {% endif %}

        <div class="grid__item {{ grid_item_width }}" {{ block.shopify_attributes }}>
          <div class="collection-grid-item homepage-image {{ section.settings.color }}">
            {% if block.settings.button_link != blank %}
            
             <a href="{{ block.settings.button_link }}" class="collection-grid-item__link">
               
              {% else %}            
            <a href="{% if collection.empty? %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">
              
              {% endif %}
              
              <div class="collection-grid-item__overlay" style="background-image: url({{ collection_image_url }})">
                {% if collection.empty? %}
                  {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                  {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              </div>
              <div class="collection-grid-item__content">
                {% unless block.settings.title == '' %}<h2 class="title--flex home__title">{{ block.settings.title | escape }}</h2>{% endunless %}
                {% unless block.settings.link_text == '' %}<div class="{{ section.settings.button_style }}"> {{ block.settings.link_text | escape }}</div>{% endunless %}
              </div>
              <div class="image-overlay image-overlay-{{ section.settings.overlay_opacity }}"></div>
            </a>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  {% if section.blocks.size == 0 %}
    <div class="text-center">{{ 'home_page.onboarding.no_content' | t }}</div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Collection list",
    "class": "index-section",
    "max_blocks": 12,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Collection list"
      },
      {
        "type":    "range",
        "id":      "grid",
        "min":     1,
        "max":     3,
        "step":    1,
        "label":   "Collections per row",
        "default": 2
      },
      {
        "type": "select",
        "id": "homepage_collection_grid_color",
        "label": "Background 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": "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": "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":    "range",
        "id":      "overlay_opacity",
        "min":     0,
        "max":     100,
        "step":    5,
        "label":   "Image overlay opacity",
        "info":    "Increase contrast for legible text.",
        "default": 15
      }
    ],
    "blocks": [
      {
        "type": "featured_collection",
        "name": "Collection",
        "settings": [
          {
            "label": "Collection",
            "id": "collection",
            "type": "collection"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image - optional"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Headline",
            "default": "Featured collection"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Buton Text",
            "default": "View products"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link - optional"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Collection list",
        "category": "Collection",
        "settings": {
          "grid": 2
        },
        "blocks": [
          {
            "type": "featured_collection"
          },
          {
            "type": "featured_collection"
          }
        ]
      }
    ]
  }
{% endschema %}