Integração com o Instagram

{% assign html_instagram_posts = blank %}

{%- comment -%}
  A tag load_posts busca os posts do instagram, passando como parâmetro from: "instagram". 
	Não é necessário informar o token do Instagram nem o usuário no front-end.
  O retorno da tag é a variável loaded_posts que contém um array de objetos com as informações dos posts. 

    exemplo de retorno:
  [
    {
      "title": "Descrição do post no Instagram",
      "image": "urldaimagem",
      "timestamp": "2022-10-23T12:18:14+0000",
      "url": "urldopost",
      "permalink": "permalinkdopost"
    },
    {
      "title": "Descrição do post no Instagram",
      "image": "urldaimagem",
      "timestamp": "2022-10-23T12:18:14+0000",
      "url": "urldopost",
      "permalink": "permalinkdopost"
    }
  ]
{%- endcomment -%}

{% load_posts from: 'instagram' %}

{%- comment -%}
  Construção da estrutura HTML caso o load_posts retorne posts. Essa estrutura pode ser customizada de acordo com a necessidade do cliente.
{%- endcomment -%}

{% capture html_instagram_posts %}
  {% assign count_posts = 0 %}
  {% for post in loaded_posts %}
    {% if count_posts < 12 %}
      {% unless post.image contains '.mp4' %}
        {% unless post.permalink == null %}
          <div class="swiper-slide">
            <a aria-label="Ir para {{ post.title }}" href="{{ post.permalink }}" rel="external" target="_blank">
              <div class="image -square">
                {% comment %}
                  não utilizar o filtro | resize nessas imagens. como é uma integração com o Instagram, as imagens estão armazenadas lá, e não conseguimos manipular o tamanho.
                {% endcomment %}
                <img class="swiper-lazy" data-src="{{ post.image }}" alt="{{ post.title }}"/>
                <div class="skeleton"></div>
              </div>
            </a>
          </div>
          {% assign count_posts = count_posts | plus: 1 %}
        {% endunless %}
      {% endunless %}
    {% endif %}
  {% endfor %}
{% endcapture %}

{%- comment -%}
 Construção da estrutura HTML para alterações no ambiente staging (if environment == 'staging'). 
Essa estrutura pode ser customizada de acordo com a necessidade do cliente.

 Sempre que a estrutura com placeholders for alterada, deve-se alterar a estrutura dinâmica para que ela seja aplicada quando for realizado o deploy para production
{%- endcomment -%}

{% comment %} Placeholder para staging {% endcomment %}
{% if environment == 'staging' %}
  {% capture html_instagram_posts %}
    {% for i in (1..12) %}
      <div class="swiper-slide">
        <a aria-label="Post placeholder {{ forloop.index }}" href="#" rel="external" target="_blank">
          <div class="image -square">
            <img alt="Instagram Post" class="swiper-lazy" data-src="https://picsum.photos/600"/>
            <div class="skeleton"></div>
          </div>
        </a>
      </div>
    {% endfor %}
  {% endcapture %}
{% endif %}

{%- comment -%}
 Estrutura final e estrutura dos posts

 Nesse exemplo a estrutura de slider utilizamos o Swiper, mas pode ser implementada qualquer outra estrutura HTML.
{%- endcomment -%}

{% if html_instagram_posts != blank %}
  <section class="section instagram container">
    {% load_banners position: 'home-instagram-titulo' limit: 1 %}
    {% for banner in loaded_banners %}
      <div class="content">
        {% if banner.url != blank %}
          <a aria-label="Ir para o instagram da loja" href="{{ banner.url }}" target="_blank">
          {% endif %}
          <h2 class="title">{{ banner.subtitle }}</h2>
          {% if banner.url != blank %}
          </a>
        {% endif %}
        <p class="description">
          {{ banner.description | strip_html }}
        </p>
      </div>
    {% endfor %}

    <div class="swiper" data-instagram-swiper>
      <div class="swiper-wrapper">
        {{ html_instagram_posts }}
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </section>
{% endif %}