creative designer

The cycle Liquid filter is useful when you need to output a series of known string parameters in a sequential order loop. One thing cycle doesn't do is give you the ability to use dynamic amounts of assigned variable data - let's look at a quick way to do something just like it.

The first question you need to ask yourself is will the number of parameters you want to pass to the cycle filter ever change? If it won't you can just do some simple string assignment and add the variable directly to the filter. Here's an example:

 {% assign varA = 'a' %}
 {% assign varB = 'b' %}
 {% assign varC = 'c' %}
 {% for i in (1..6) %}
 <div class="grid-item-{% cycle varA,varB,varC %}">content...</div>
 {% endfor %}

Now if the amount of parameters will change, you can no longer use the cycle filter. Thankfully with the power of modulo we can craft some simple Liquid to do essentially the same thing, but more awesome.

{% assign myCycles = 'a,b,c,d,e,f,g' | split:',' %}
{% for i in (1..20) %}
 {% assign cycleIndex = i | modulo:myCycles.size | minus:1 %}
 <div class="grid-item-{{ myCycles[cycleIndex] }}">content...</div>
{% endfor %}

And there you go. Have fun with your Liquid!

Like to work with me?

Let's talk