html - 在两个div类之间交替的Twig规则

首先，我不是程序员/网页设计师，我只是在创建一个小型粉丝网站，因此，对于似乎我自己花了点力气尝试自己做的事情，我感到抱歉。

基本上，我试图以某种方式修改网站模板，以使其不仅在文章预览的右侧显示新闻缩略图，而且在左右之间交替显示。该模板使用HTML，CSS和Twig。 imageholder-right和imageholder-left是有效的CSS类。

原来是这样的：

        {% if record.image!="" %}
            <div class="large-4 imageholder-right">
                <a href="{{ image(record.image) }}">
                    <img src="{{ thumbnail(record.image, 400, 260) }}">
                </a>
            </div>
        {% endif %}

这是我尝试执行的操作，因此它可以像我想要的那样运行：

        {% if record.image!="" %}
            {% set imagepos = 'right' %}
            {% if imagepos == right %}
                <div class="large-4 imageholder-left">
                    <a href="{{ image(record.image) }}">
                        <img src="{{ thumbnail(record.image, 400, 260) }}">
                    </a>
                </div>
                {% set imagepos = 'left' %}
            {% else %}
                <div class="large-4 imageholder-right">
                    <a href="{{ image(record.image) }}">
                        <img src="{{ thumbnail(record.image, 400, 260) }}">
                    </a>
                </div>
                {% set imagepos = 'right' %}
            {% endif %}
        {% endif %}

但是，使用此代码，每个图像预览仍保留在右侧。

最佳答案

您可以看一下{% loop.index %}。

Twig - Loops

我猜你的代码在循环中？

编辑：

正如@DarkBee所建议的，最干净的方法是使用<div class="large-4 imageholder-{{ loop.index is even ? 'right' : 'left' }}">。

{% for record in records %}
    {% if record.image != "" %}
        <div class="large-4 imageholder-{{ loop.index is even ? 'right' : 'left' }}">
            <a href="{{ image(record.image) }}">
                <img src="{{ thumbnail(record.image, 400, 260) }}">
            </a>
        </div>
    {% endif %}
{% endfor %}