使用循环渲染没有设置图像数量的三列图像库

Question

我正在从使用 WordPress 和高级自定义字段创建的图库中输出图像。以下代码每列显示两个图像，重复列直到没有更多图像可显示。我需要设置最多三列，所有图像都显示在这些列中。

<div class="grid">
  {% for image in story.meta( 'gallery' ) %}
    {% if loop.index % 2 == 1 %}
      <div class="post__gallery-column">
    {% endif %}
        <figure>
          <img src="{{ Image(image) }}" width="{{ Image(image).width }}" height="{{ Image(image).height }}" alt="{{ Image(image).alt }}" />
        </figure>
    {% if loop.index % 2 == 0 or loop.last %}
      </div>
    {% endif %}
  {% endfor %}
</div>

视觉呈现：

如何调整代码以对网站上呈现的列数设置硬性限制？

Answer 1

如果您最多需要 3 列，可以使用过滤器 batch。这会将您的数组分成偶数块。

{% set max_cols = 3 %}
{% set images_per_col = (images|length / max_cols)|round(0, 'ceil') %}

<div class="grid">
    {% for images in images|batch(images_per_col) %}
    <div class="post__gallery-column">
        {% for image in images %}
        <figure>
            <img src="{{ image }}" />
        </figure>
        {% endfor %}
    </div>
    {% endfor %}
</div>

demo

如果story.meta('gallery')不是Iterable，您需要先将其转换为数组

使用循环渲染没有设置图像数量的三列图像库

Use loop to render three column image gallery with no set number of images

for-loop

twig