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

Question

我需要制作一个不均匀的画廊，用户可以在其中上传无限数量的图像。画廊由无限重复的 7 幅图像组成。

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

我还准备了带有样式解决方案的simple CodePen。但现在我正在为 Twig 模板而苦苦挣扎。我尝试了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

基于@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 %}

Answer 2

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

{% 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 %}