Liquid Iteration
Iteration tags execute liquid or template blocks in a repeating process.
for
Executes a code block by iterating over an array (such as items in a collection).
{% component type: "module", source: "Blog Post", layout: "", collectionVariable: "blogPostCollection" %}
{% for item in blogPostCollection.items %}
<strong>{{ item.['Name'] }}</strong>
<div>{{ item.['MetaDescription'] }}</div>
<hr>
{% endfor %}
My First Post Title
The SEO Meta description of my first post.
My Second Post Title
The SEO Meta description of my second post.
My Third Post Title
The SEO Meta description of my third post.
forloop
Each iteration loop contains an object called forloop
, which provides useful properties for building out iteration logic.
In the below example we use the index
number to sequentially number the items and the last
boolean to conditionally omit the very last horizontal rule.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests %}
({{ forloop.index }}) {{ topic }}
{% unless forloop.last %}
<hr>
{% endunless %}
{% endfor %}
(1) Singing
(2) Dancing
(3) Stargazing
The above forloop
object (within the first iteration) would look like this:
{
"length": 3,
"index": 1,
"index0": 0,
"rindex": 3,
"rindex0": 2,
"last": false,
"first": true
}
forloop
Properties
length
number
The total loop count (how many times the
for
will iterate over).index
number
The position number in the loop using 1-based indexing (starting at 1).
index0
number
The position number in the loop using 0-based indexing (starting at 0).
rindex
number
The reverse position number in the loop using 1-based indexing (starting at 1).
rindex0
number
The reverse position number in the loop using 0-based indexing (starting at 0).
first
boolean
Returns
true
if the current loop is the first and false
if it is not.last
boolean
Returns
true
if the current loop is the last and false
if it is not.limit
A parameter used with for
to restrict the number of loops made, regardless of how many items present in the array being iterated.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests limit: 2 %}
{{ topic }}<br>
{% endfor %}
Singing
Dancing
offset
A parameter used with for
to skip forward and start the looping of items at a defined index.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests offset: 2 %}
{{ topic }}<br>
{% endfor %}
Stargazing
limit & offset
Both limit
and offset
parameters can be combined with for
to both start the looping of items at a defined index and restrict the number of loops.
{% assign myInterests = "Singing,Dancing,Stargazing,Reading,Painting" | split: ',' %}
{% for topic in myInterests limit: 2 offset: 2 %}
{{ topic }}<br>
{% endfor %}
Stargazing
Reading
range
Define a range of numbers to loop through using for
, instead of looping through an array of items.
{% for i in (4..8) %}
{{ i }}<br>
{% endfor %}
4
5
6
7
8
The range can be defined using variables to construct the range declaration.
{% assign max = 8 %}
{% for i in (4..max) %}
{{ i }}<br>
{% endfor %}
4
5
6
7
8
reversed
Reverses the order of the for
loop, starting at the end of the array and iterating backwards.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests reversed %}
{{ topic }}<br>
{% endfor %}
Stargazing
Dancing
Singing
break
Causes the loop to stop iterating when it encounters the break
tag.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests %}
{% if topic == "Dancing" %}
{% break %}
{% else %}
{{ topic }}<br>
{% endif %}
{% endfor %}
Singing
continue
Causes the loop to skip the current iteration when it encounters the continue
tag.
{% assign myInterests = "Singing,Dancing,Stargazing" | split: ',' %}
{% for topic in myInterests %}
{% if topic contains "Dancing" %}
{% continue %}
{% else %}
{{ topic }}<br>
{% endif %}
{% endfor %}
Singing
Stargazing
cycle
Cycles through a set of strings and renders them in order of the arguments added to the tag.
Each time cycle
is called, the next argument value is rendered.
{% cycle "odd", "even" %}<br>
{% cycle "odd", "even" %}<br>
{% cycle "odd", "even" %}
odd
even
odd
Cycle Groups
cycle
accepts a named “cycle group” parameter in cases where you need multiple cycle
blocks in the same Liquid scope.
cycle
tags with no group name, or an empty group name parameter will be treated as one group.
{% cycle "firstGroup": "odd", "even" %}<br>
{% cycle "secondGroup": "odd", "even" %}<br>
{% cycle "secondGroup": "odd", "even" %}<br>
{% cycle "firstGroup": "odd", "even" %}
odd
odd
even
even