Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Liquid templates: even/odd items in for loop

Tags:

jekyll

liquid

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
like image 563
Adam Kiss Avatar asked Jan 23 '12 23:01

Adam Kiss


2 Answers

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.

like image 190
Alex Lande Avatar answered Nov 03 '22 12:11

Alex Lande


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 %}
like image 36
Christian Specht Avatar answered Nov 03 '22 13:11

Christian Specht