web/wp-content/themes/mozilla-builders/blocks/image-layout/image-layout.twig

{% set imageCountToUse = 6 %}

{% if layout == "asymmetrical" %}
  {% set imageCountToUse = 3 %}
{% elseif layout == "row" %}
  {% set imageCountToUse = 4 %}
{% endif%}

{% set assets = images|slice(0, imageCountToUse) %}

{% if layout == "row" %}

  <figure data-block="image-layout" class="{{ alignclass }}">
    <div class="flex justify-between gap-px md:gap-3">
      {% for asset in assets %}
        <figure class="flex-1">
          {% include 'components/articles/blocks/asset.twig' with {
            mod_class: crop_to_same_ratio ? 'aspect-square',
            class: crop_to_same_ratio ? 'w-full h-full object-cover',
            asset: asset,
            aspectRatio: crop_to_same_ratio == false
          } %}
        </figure>
      {% endfor %}
    </div>

    {% include 'components/articles/blocks/caption.twig' with { 'caption': caption } %}
  </figure>

{% elseif layout == "asymmetrical" %}

  <figure data-block="image-layout" class="{{ alignclass }}">
    <div class="flex gap-px md:gap-3">
      <div class="flex-[2] relative">
        {% for asset in assets|slice(0,1) %}
          {% include 'components/articles/blocks/asset.twig' with {
            mod_class: crop_to_same_ratio ? 'absolute inset-0',
            class: crop_to_same_ratio ? 'w-full h-full object-cover',
            asset: asset,
            aspectRatio: crop_to_same_ratio == false
          } %}
        {% endfor %}

      </div>

      <div class="flex-1 flex flex-col gap-px md:gap-3">
        {% for asset in assets|slice(1,2) %}
          <div class="{{ crop_to_same_ratio ? 'flex-1' }}">
            {% include "components/articles/blocks/asset.twig" with {
              mod_class: crop_to_same_ratio ? 'aspect-square',
              class: crop_to_same_ratio ? 'w-full h-full object-cover',
              asset: asset,
              aspectRatio: crop_to_same_ratio == false
            } %}
          </div>
        {% endfor %}
      </div>
    </div>

    {% include 'components/articles/blocks/caption.twig' with { 'caption': caption } %}
  </figure>

{% elseif layout == "symmetrical" %}

  {% set asset_class = assets|length > 4 ? 'md:grid-cols-3' %}
  <figure data-block="image-layout" class="{{ alignclass }}">
    <ul class="grid grid-cols-2 {{ asset_class }} gap-px md:gap-3">
      {% for asset in assets %}
        <li class="blocks-gallery-item flex-1">
          <figure>
            {% include 'components/articles/blocks/asset.twig' with {
              mod_class: crop_to_same_ratio ? 'aspect-square',
              class: crop_to_same_ratio ? 'w-full h-full object-cover',
              asset: asset,
              aspectRatio: crop_to_same_ratio == false
            } %}
          </figure>
        </li>
      {% endfor %}
    </ul>

    {% include 'components/articles/blocks/caption.twig' with { 'caption': caption } %}
  </figure>

{% endif %}