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

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 个图像一起显示两次。

标签： htmltwig

Answer 1

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

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

我也无意中使用mediaItems了图像。应该是mediaItem（例如background-image: url('{{ (mediaItem[1].getWebPath()) }}')：）