具有重复循环的不均匀画廊

Question

我需要制作一个不规则的图库，用户可以在其中上传无限多的图片。图库由无限重复的 7 张图像组成。

该网站主要使用Paragraphs，所以我创建了一个段落库，用户可以在其中直接上传媒体。我设置了三种图片样式：小、高、大。

我也准备了一个simple CodePen with the style solution. But now I’m struggling with the Twig template. I tried some solutions from previous discussions，但是他们要么失败了，要么没有生成图像。

{% block content %}
  {% for image in content.field_images['#items'] %}
    {% if image %}

  <div class="gallery">
    <div class="gallery-left">
      <div class="inner-wrapper">
        <div class="inner-left">
          {% if loop.first %}
          <div class="field__item">
            <img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
          </div>
          {% endif %}
          {% if loop.index == 2 %}
            <div class="field__item">
              <img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
            </div>
          {% endif %}
        </div>
        <div class="inner-right">
          {% if loop.index == 3 %}
            <div class="field__item">
              <img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
            </div>
          {% endif %}
          {% if loop.index == 4 %}
            <div class="field__item">
              <img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="gallery-right">
      {% if loop.index == 5 %}
        <div class="field__item">
          <img src="{{ image|file_uri|image_style('small') }}" alt="{{ image.alt }}">
        </div>
      {% endif %}
      {% if loop.index == 6 %}
        <div class="field__item">
          <img src="{{ image|file_uri|image_style('tall') }}" alt="{{ image.alt }}">
        </div>
      {% endif %}
    </div>
    <div class="bottom">
      {% if loop.index % 7 == 0 or loop.last %}
        <div class="field__item">
          <img src="{{ image|file_uri|image_style('big') }}" alt="{{ image.alt }}">
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}
  {% endfor %}
{% endblock %}

Answer 1

按照下面的方法尝试一些操作，我使用批处理和拼接过滤器将图像数组分解为块，然后进行条件检查以确定合适的图像大小。

{% block content %}

    {% for gallery_block in content.field_images['#items']|batch(7) %}

        <div class="gallery">

            <div class="gallery-left">
                <div class="inner-wrapper">
                    <div class="inner-left">
                        {% for image in gallery_block|slice(0,3) %}
                            {% if image %}
                                <div class="field__item">
                                    {% set size = ( loop.index is even ) ? 'small' : 'tall' %}
                                    <img src="{{ image|file_uri|image_style(size) }}" alt="{{ image.alt }}">
                                </div>  
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="gallery-right">
                {% for image in gallery_block|slice(4,5) %}
                    {% if image %}
                        <div class="field__item">
                            {% set size = image.first ? 'small' : 'tall' %}
                            <img src="{{ image|file_uri|image_style(size) }}" alt="{{ image.alt }}">
                        </div>
                    {% endif %}
                {% endfor %}
            <div>

            {% set bottom_image = gallery_block|last %}
            {% if bottom_image %}
                <div class="bottom">    
                    <div class="field__item">
                        <img src="{{ bottom_image|file_uri|image_style('big') }}" alt="{{ bottom_image.alt }}">
                    </div>
                </div>
            {% endif %}

        </div>

    {% endfor %}

{% endblock %}

Answer 2

根据@WPhil 的批处理想法，我会按照下面的建议进行操作。

注意事项：

图像 uri 可以从文件实体中检索，而不是从媒体或字段引用列表项中检索，这就是为什么 content.field_images['#items'].0 不够好，它应该类似于 content.field_images['#items'].0.entity.field_media_image.entity
batch filter has three arguments 并且在这样的循环内重置索引很重要，所以这就是为什么第三个参数是 FALSE

图库段落文件

{% import "_impression_image.html.twig" as impression %}

{% block content %}

  {% for impressions_gallery_batch in content.field_images['#items']|batch(7, NULL, FALSE) %}

    {# Define all image file entities for given batch of image items #}
    {% set image_entities = {} %}
    {% for impressions_gallery_batch_item in impressions_gallery_batch %}
      {% set image_entities = image_entities|merge([
    impressions_gallery_batch["#{loop.index0}"].entity.field_media_image.entity,
  ]) %}
    {% endfor %}

    <div class="impressions-gallery">

      <div class="impressions-left">
        <div class="inner-wrapper">

          {% if image_entities.0 %}
            <div class="inner-left">
              {{ impression.image(image_entities.0, 'impressions_small') }}
              {{ impression.image(image_entities.1, 'impressions_tall') }}
            </div>
          {% endif %}

          {% if image_entities.2 %}
            <div class="inner-right">
              {{ impression.image(image_entities.2, 'impressions_small') }}
              {{ impression.image(image_entities.3, 'impressions_tall') }}
            </div>
          {% endif %}

        </div>
      </div>

      {% if image_entities.4 %}
        <div class="impressions-right">
          {{ impression.image(image_entities.4, 'impressions_tall') }}
          {{ impression.image(image_entities.5, 'impressions_small') }}
        </div>
      {% endif %}

      {% if image_entities.6 %}
        <div class="impressions-bottom">
          {{ impression.image(image_entities.6, 'impressions_big') }}
        </div>
      {% endif %}
    </div>
  {% endfor %}

{% endblock %}

图像项宏功能(_impression_image.html.twig)

{% macro image(image_entity_item, image_style) %}
  {% if image_entity_item %}
    <div class="field__item">
      <img src="{{ image_entity_item.uri.value|image_style(image_style) }}" alt="{{ image_entity_item.alt }}">
  </div>
  {% endif %}
{% endmacro %}

具有重复循环的不均匀画廊

Uneven gallery with a repeated loop

twig