Liquid templates: even/odd items in for loop
If I have a for loop in Liquid (using Jekyll), how can I target even (or odd) items only? I have tried:
{% for item in site.posts %}
{% if forloop.index % 2 == 1 %}
but that doesn't seem to work. I have also tried:
(forloop.index % 2) == 1
and:
forloop.index - (forloop.index / 2 * 2) == 1
Solution 1:
I think you'll want to use the cycle tag for this. For example:
{% for post in site.categories.articles %}
<article class="{% cycle 'odd', 'even' %}"></article>
{% endfor %}
If you want different HTML markup for each cycle:
{% for item in site.posts %}
{% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
{% if thecycle == 'odd' %}
<div>echo something</div>
{% endif %}
{% endfor %}
You can find more information on it at Liquid for Designers, although the example there isn't particularly helpful. This Shopify support thread should also help.
Solution 2:
In contrast to what the Shopify support thread in Ales Lande's answer says, there is a modulo
function in Liquid - in form of the modulo
filter.
With it, you can do this:
{% for item in site.posts %}
{% assign mod = forloop.index | modulo: 2 %}
{% if mod == 0 %}
<!-- even -->
{% else %}
<!-- odd -->
{% endif %}
{% endfor %}