index.twig

<flynt-component name="GridPostsArchive" load:on="visible" class="componentSpacing" {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }}>
  <div class="container" data-flow="layout">
    <div data-size="medium" data-align="center" data-text-align="center">
      <h1>{{ title }}</h1>
      {% set html = isHome ? preContentHtml : description %}
      {{ html|e('wp_kses_post') }}
    </div>
    {% if terms %}
      {% include 'Partials/_filter.twig' %}
    {% endif %}

    {% if posts|length > 0 %}
      <ul data-ref="posts" class="posts">
        {% for post in posts %}
          {% set aria_labelledby_id = uuid ~ '-' ~ loop.index %}
          <li class="post boxBorder" id="{{ aria_labelledby_id }}" data-theme="reset">
            <a class="link" href="{{ post.link|e('esc_url') }}" aria-labelledby="{{ aria_labelledby_id }}">
              {% if post.thumbnail %}
                <figure class="figure">
                  <img
                    class="post-image figure-image lazyload"
                    src="{{ post.thumbnail.src|resizeDynamic(768, (768 / 3 * 2)|round, 'center') }}"
                    width="768"
                    height="{{ (768 / 3 * 2)|round }}"
                    srcset="{{ placeholderImage(768, (768 / 3 * 2)|round, 'rgba(125, 125, 125, 0.1)') }}"
                    data-srcset="
                      {{ post.thumbnail.src|resizeDynamic(1920, (1920 / 3 * 2)|round, 'center') }} 1920w,
                      {{ post.thumbnail.src|resizeDynamic(1600, (1600 / 3 * 2)|round, 'center') }} 1600w,
                      {{ post.thumbnail.src|resizeDynamic(1440, (1440 / 3 * 2)|round, 'center') }} 1440w,
                      {{ post.thumbnail.src|resizeDynamic(1366, (1366 / 3 * 2)|round, 'center') }} 1366w,
                      {{ post.thumbnail.src|resizeDynamic(1024, (1024 / 3 * 2)|round, 'center') }} 1024w,
                      {{ post.thumbnail.src|resizeDynamic(768, (768 / 3 * 2)|round, 'center') }} 768w,
                      {{ post.thumbnail.src|resizeDynamic(640, (640 / 3 * 2)|round, 'center') }} 640w"
                    data-sizes="auto"
                    alt="{{ post.thumbnail.alt|e ?: post.title }}">
                </figure>
              {% endif %}
              <div class="content boxPadding">
                <h2 class="h5">{{ post.title }}</h2>
                <p>{{ post.excerpt.read_more(false) }}</p>
              </div>
              <footer class="footer">
                <small class="readingTime">{{ labels.readingTime|replace({'%d': post.content|readingtime}) }}</small>
                <span class="button button--text">{{ labels.readMore }}</span>
              </footer>
            </a>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="posts-empty">{{ labels.noPostsFound }}</p>
    {% endif %}

    {% set pagination = posts.pagination %}
    {% if pagination.pages %}
      {% include 'Partials/_pagination.twig' %}
    {% endif %}
  </div>
</flynt-component>