Without lazy-load - From Pipeline 3.1

index-columns-custom.liquid

<div class="homepage-columns {{ section.settings.homepage_columns_color }}">
  <div class="wrapper">
    {% if section.settings.title != blank %}
      <h4 class="home__subtitle">{{ section.settings.title | escape }}</h4>
    {% endif %}

    <div class="grid {% unless section.blocks.size == 5 %}grid-uniform{% endunless %}">
      {%- assign grid_item_width = 'large--one-third medium--one-third' -%}
      {%- assign image_size = '530x' -%}
      {% case section.blocks.size %}
        {% when 1 %}
          {%- assign grid_item_width = 'large--one-half medium--one-half' -%}
          {%- assign image_size = '780x' -%}
        {% when 2 %}
          {%- assign grid_item_width = 'large--one-half medium--one-half' -%}
          {%- assign image_size = '780x' -%}
        {% when 4 %}
          {%- assign grid_item_width = 'large--one-quarter medium--one-half' -%}
          {%- assign image_size = '780x' -%}
      {% endcase %}
      {% for block in section.blocks %}
        {% if section.blocks.size == 5 and forloop.index < 3 %}
          {%- assign column_width = 'large--one-half medium--one-half' -%}
        {% else %}
          {%- assign column_width = grid_item_width -%}
        {% endif %}
        {% if section.blocks.size == 5 and forloop.index == 3 %}<div class="clearfix"></div>{% endif %}
        <div class="grid__item {{ column_width }} {{ section.settings.align_text }}" {{ block.shopify_attributes }}>
          {% if block.settings.enable_image %}
            {% if block.settings.image != blank %}
              {% if block.settings.button_label == blank and block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}">
                  <p>
                    {{ block.settings.image | img_url: image_size | img_tag }}
                  </p>
                </a>
                {% else%}
                <p>
                  {{ block.settings.image | img_url: image_size | img_tag }}
                </p>
              {% endif %}
            {% else %}
              <p>
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              </p>
            {% endif %}
          {% endif %}
          {% if block.settings.title != blank %}
            <h5 class="uppercase home--uppercase">{{ block.settings.title | escape }}</h5>
          {% endif %}
          {% if block.settings.text != blank %}
            <div class="rte">{{ block.settings.text }}</div>
          {% endif %}
          {% if block.settings.button_label != blank and block.settings.button_link != blank %}
            <a href="{{ block.settings.button_link }}" class="btn btn--clear btn--square uppercase">
              {{ block.settings.button_label | escape }}
            </a>
          {% endif %}
        </div>
      {% endfor %}
    </div>

    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Columns custom",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Text columns with images"
      },
      {
        "type": "select",
        "id": "homepage_columns_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": "align_text",
        "label": "Text alignment",
        "default": "text-center",
        "options": [
          {
            "value": "text-left",
            "label": "Left"
          },
          {
            "value": "text-center",
            "label": "Centered"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Add a title or tagline"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.</p>"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "info": "Leave blank to link from image"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Columns custom",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}