在html twig中创建动态行和列

Question

我在一个twig文件上运行了以下代码：

<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位置

我想用树枝批处理来做这件事，但是需要帮助。谢谢

Answer 1

假设您的集合名为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