{% cycle %}

Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output.

Cycle is typically called inside a forloop.


Syntax

{% cycle [name:] options %}

options: Required. A comma-separated list of strings to cycle through. Eg: 'first', 'second', 'third' or "startclass", "", "endclass".

name: Optional. A name for the cycle. If multiple cycles have the same name, they will share an index (so the second cycle will pick up where the first cycle left off). If the cycle does not have a name, one will automatically be created for it based on the options provided.

WARNING: If you use multiple non-named cycles in your templates, you may end up with unexpected results. To prevent this, we recommend that you always name your cycle groups.

Examples

<ul>
    {% for item in list %}
        <li class="{% cycle 'listposition': 'left', 'center', 'right' %}">{{ item }}</li>
    {% endfor %}
</ul>
Broken Template:
<ul class="firstlist">
    {% for item in list limit:2 %}
        <li class="{% cycle 'left', 'center', 'right' %}">{{ item }}</li>
    {% endfor %}
</ul>
<ul class="secondlist">
    {% for item in list offset:continue %}
        <li class="{% cycle 'left', 'center', 'right' %}">{{ item }}</li>
    {% endfor %}
</ul>
Outputs: <ul class="firstlist"> <li class="left">item</li> <li class="center">item</li> </ul> <ul class="secondlist"> <li class="right">item</li> <li class="left">item</li> ...etc... </ul>
Fixed Template:
<ul class="firstlist">
    {% for item in list limit:2 %}
        <li class="{% cycle 'firstlist': 'left', 'center', 'right' %}">{{ item }}</li>
    {% endfor %}
</ul>
<ul class="secondlist">
    {% for item in list offset:continue %}
        <li class="{% cycle 'secondlist': 'left', 'center', 'right' %}">{{ item }}</li>
    {% endfor %}
</ul>
Outputs: <ul class="firstlist"> <li class="left">item</li> <li class="center">item</li> </ul> <ul class="secondlist"> <li class="left">item</li> <li class="center">item</li> <li class="right">item</li> etc... </ul>

Developer Overview

Liquid Markup