Правило веток для чередования двух классов div

Question

Прежде всего, я не программист / веб-дизайнер, и я просто создаю небольшой фан-сайт, поэтому извините, если мне кажется, что я приложил слишком мало усилий, чтобы попытаться сделать это сам.

По сути, я пытаюсь изменить шаблон сайта таким образом, чтобы он отображал эскизы новостей не только в правой части предварительного просмотра статьи, но и чередовался между левым и правым.Шаблон использует 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 %}