<div class="custom_image_gallery">
  <div class="page-width">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title }}</h2>
      {% if section.settings.title != blank %}
      <p class="content">
        {{ section.settings.content }}
      </p>
      {% endif %}
    </div>
    {% endif %}
    <div class="section_content">
      <div class="image_items">
        {% for block in section.blocks %}
        <div class="image_item">
          {% if block.settings.image != blank %}
          <div class="gallery" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
            <img id="img{{ section.id }}"
                 class="gallery_image lazyload"
                 data-src="{{ block.settings.image | img_url: 'master' }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ block.settings.image.alt | escape }}"
                 style="position: absolute; top: 0;">
          </div>
          {% else %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<script type="lazyload2" defer="defer">
  $('.image_items').masonry({
    itemSelector: '.image_item',
    percentPosition: true
  });
</script>

{% schema %}
  {
    "name": "Galeria de imagens",
	"class": "index-section",
    "settings": [
		{
			"type": "text",
			"id": "title",
			"label": "Cabeçalho",
			"default": "Amantes de compras online, novas experiências e momentos únicos."
		},
		{
			"type": "text",
			"id": "content",
			"label": "Conteúdo",
			"default": "Apareça em nosso site compartilhando com as tags #astronecom, #astron, e nos marque nas redes sociais."
		}
	],
	"blocks": [
		{
			"type": "image_gallery",
			"name": "Imagem",
			"settings": [
				{
					"type": "image_picker",
					"id": "image",
					"label": "Imagem"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Galeria de imagens",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
