kindahcollab.liquid

<link rel="stylesheet" type="text/css" href="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/bs.css?v=1596582732">

<div class="collabs libro-reclamaciones">
  <div class="container">
    {% if section.blocks.size > 0 %}
      {% for block in section.blocks %}
    
        {% if block.type == "collab" %}
    	<div class="row" style="margin-top: 40px !important;">
          <div class="col-md-12">
          	{% if block.settings.title != nil %}
            <p class="collab-title">
            	{{ block.settings.title }}
            </p>
            {% else %}
            <p class="collab-title">
            	no title
            </p>
            {% endif %}
          </div>
        </div>
          
        {% elsif block.type == "image" %}
          <div class="row">
            <div class="col-6 col-md-3">
            	{% if block.settings.image_1 != blank %}
                  <noscript>
                    {{ block.settings.image_1 | img_url: '600x600' | img_tag: block.settings.image_1.alt, 'feature-row__image-no-js' }}
                  </noscript>
                  <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_1.aspect_ratio | times: 100}}%;">
                    {% assign img_url = block.settings.image_1 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="feature-row__image lazyload"
                      src="{{ section.settings.image_1 | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                      data-aspectratio="{{ section.settings.image_1.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ section.settings.image_1.alt | escape }}">
                </div>
                {% else %}
                  {% if block.settings.show_1 %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% endif %}
            </div>
            <div class="col-6 col-md-3">
            	{% if block.settings.image_2 != blank %}
                  <noscript>
                    {{ block.settings.image_2 | img_url: '600x600' | img_tag: block.settings.image_2.alt, 'feature-row__image-no-js' }}
                  </noscript>
                  <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_2.aspect_ratio | times: 100}}%;">
                    {% assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="feature-row__image lazyload"
                      src="{{ section.settings.image_2 | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                      data-aspectratio="{{ section.settings.image_2.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ section.settings.image_2.alt | escape }}">
                </div>
                {% else %}
                  {% if block.settings.show_2 %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% endif %}
            </div>
            <div class="col-6 col-md-3">
            {% if block.settings.image_3 != blank %}
                  <noscript>
                    {{ block.settings.image_3 | img_url: '600x600' | img_tag: block.settings.image_3.alt, 'feature-row__image-no-js' }}
                  </noscript>
                  <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_3.aspect_ratio | times: 100}}%;">
                    {% assign img_url = block.settings.image_3 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="feature-row__image lazyload"
                      src="{{ section.settings.image_3 | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                      data-aspectratio="{{ section.settings.image_3.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ section.settings.image_3.alt | escape }}">
                </div>
                {% else %}
                  {% if block.settings.show_3 %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% endif %}
            </div>
            <div class="col-6 col-md-3">
            {% if block.settings.image_4 != blank %}
                  <noscript>
                    {{ block.settings.image_4 | img_url: '600x600' | img_tag: block.settings.image_4.alt, 'feature-row__image-no-js' }}
                  </noscript>
                  <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image_4.aspect_ratio | times: 100}}%;">
                    {% assign img_url = block.settings.image_4 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="feature-row__image lazyload"
                      src="{{ section.settings.image_4 | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
                      data-aspectratio="{{ section.settings.image_4.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ section.settings.image_4.alt | escape }}">
                </div>
                {% else %}
                  {% if block.settings.show_4 %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% endif %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
  
  </div>
</div>

<style>
  .collab-title {
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: .02em;
    line-height: 2.2em;
    text-transform: none;
    color: rgba(82,82,82,.6); 
  }
  .col-6 {
    margin: 10px 0; 
  }
</style>

{% schema %}

{
  "name": "Collabs",
  "class": "collab",
  "max_blocks": 50,
  "blocks": [
    {
      "type": "collab",
      "name": "Collab title",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Collab text",
          "default": "collab #1"
        }
      ]
    },
	{
      "type": "image",
      "name": "Collab images",
      "settings": [
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image 1"
        },
		{
          "type": "checkbox",
          "id": "show_1",
          "label": "Show image 1"
        },
		{
          "type": "image_picker",
          "id": "image_2",
          "label": "Image 2"
        },
		{
          "type": "checkbox",
          "id": "show_2",
          "label": "Show image 2"
        },
		{
          "type": "image_picker",
          "id": "image_3",
          "label": "Image 3"
        },
		{
          "type": "checkbox",
          "id": "show_3",
          "label": "Show image 3"
        },
		{
          "type": "image_picker",
          "id": "image_4",
          "label": "Image 4"
        },
		{
          "type": "checkbox",
          "id": "show_4",
          "label": "Show image 4"
        }
      ]
    }
  ]
}

{% endschema %}