Skip to main content

Alternate css classes easily in twig

Today, I wanted to style a little bit my project. The basic way in classic PHP project would be to use the iterator variable of your for loop with the use of modulo.

For example:

.. code:: php

{% raw %}<div class="<?php echo ($i % 2 == 0) 'odd' : 'even' ; ?>"></div>{% endraw %}

In twig, when you use a loop, there are several variables that you can use like loop.index, loop.first, loop.last. I won't copy/paste the official documentation here, you can read it here twig loop documentation.

To use the modulo function in twig, just use

.. code:: twig

{% raw %} {{ 10 % 2 }} {% endraw %}

And there you go, as simple as in PHP.

Then, using twig, you can do this:

.. code:: twig

{% raw %} {% if loop.index % 2 == 0 %} {% endraw %}

Or in my case I needed this :

.. code:: twig

{% raw %} {% if loop.parent.loop.index % 2 == 0 %} {% endraw %}

To be able to use the index of my parent loop :)

On this blog, I found the following tips :

.. code:: twig

{% raw %} {% if loop.index divisibleby(2) %} {% endraw %}

Isn't it beautiful ? But it gets even better!

.. code:: twig

{% raw %} {{ cycle(['odd', 'even'], loop.index) }} {% endraw %}

And there you go, thank you twig !