在 html 树枝中创建动态行和列

Question

我有以下代码在处理树枝文件：

<div class="view-content">
        <div class="views-responsive-grid views-responsive-grid-horizontal views-columns-12 container-12">
           <div class="views-row views-row-1 views-row-first">
              <div class="grid-2 views-column-1">
                 <div class="views-field views-field-field-seal">
                    <div class="field-content"><a href="/link1" class="content-processed"><img src="/sites/default/files/mainimage1.png" width="121" height="121"></a></div>
                 </div>
              </div>
              <div class="grid-2 views-column-2">
                 <div class="views-field views-field-field-seal">
                    <div class="field-content"><a href="/link2" class="content-processed"><img src="/sites/default/files/mainimage2.png" width="121" height="121"></a></div>
                 </div>
              </div>
            </div>
        </div>

此代码生成如下输出：

这意味着，它正确地生成了 2 列，其中一行包含图像。我想使用循环动态转换此代码。

我想用 {{ field.field_image.content }} 代替图像，我想用 {{ field.field_url.content }}[= 代替 URL 13=]

我想用 twig 批处理来做这个，但需要帮助。谢谢

Answer 1

假设您的 collection 被称为 fields，

<div class="view-content">
    {% for row in fields|batch(2) %}
    <div class="views-responsive-grid views-responsive-grid-horizontal views-columns-12 container-12">
        <div class="views-row views-row-1 views-row-first">
            {% for field in row %}
            <div class="grid-2 views-column-{{ loop.index }}">
                <div class="views-field views-field-field-seal">
                    <div class="field-content"><a href="{{ field.field_url.content }}" class="content-processed"><img src="{{ field.field_image.content }}" width="121" height="121"></a></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

demo

在 html 树枝中创建动态行和列

Create dynamic rows and columns in html twig

php

drupal

twig