如何从图像数组中填充图像网格

Question

我设计了一个包含 9 张图片的图片网格布局。我想遍历我的图像数组并动态填充网格，以便第 10 个图像开始一个新的网格并且样式像第一个图像，第 11 个图像像第二个图像等等...... 该数组并不总是包含 9 的倍数。

这是我目前拥有的：（使用固定的数组索引来显示图像的顺序）

<div class="widget-body">
  {% for mediaItem in mediaItems|batch(9) %}
    <div class="d-flex flex-wrap">
      <div class="col-12 p-0">
        <img class="w-100" src="{{ (mediaItems[0].getWebPath()) }}" alt="{{ mediaItems[0].title }}"/>
      </div>
    </div>
    <div class="d-flex flex-wrap">
      <div class="col-6 p-0">
        <div class="customGrid-background-img customGrid-rectangle" style="background-image: url('{{ (mediaItems[1].getWebPath()) }}')"></div>
      </div>
      <div class="col-6 p-0">
        <div class="d-flex flex-wrap">
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[2].getWebPath()) }}')"></div>
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[3].getWebPath()) }}')"></div>
        </div>
      </div>
    </div>
    <div class="d-flex flex-wrap">
      <div class="col-6 p-0">
        <div class="d-flex flex-wrap">
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[4].getWebPath()) }}')"></div>
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[5].getWebPath()) }}')"></div>
        </div>
        <div class="d-flex flex-wrap">
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[6].getWebPath()) }}')"></div>
          <div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[7].getWebPath()) }}')"></div>
        </div>
      </div>
      <div class="col-6 p-0">
        <div class="customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[8].getWebPath()) }}')"></div>
      </div>
    </div>
  {% endfor %}
</div>

我在 mediaItems 数组中有 10 张图片，这导致网格与前 9 张图片一起显示两次。

Answer 1

我需要对批处理过滤器使用 fill 参数才能使用第二个批处理。

{% for mediaItem in mediaItems|batch(9, 'empty') %}

我还不小心将 mediaItems 用于图像。应该是mediaItem（例如：background-image: url('{{ (mediaItem[1].getWebPath()) }}')）

如何从图像数组中填充图像网格

How to fill image grid from array of images

html

twig