Question

首先，我不是程序员/网页设计师，我只是在创建一个小型粉丝网站，因此，如果我似乎花了很少的精力自己尝试做这件事，我感到抱歉。 / p>

基本上，我正在尝试以某种方式修改网站模板，以使其不仅在文章预览的右侧显示新闻缩略图，而且在左右之间交替显示。该模板使用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 %}

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

Answer 1

您可以看一下{% 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 %}

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

1 个答案: