Important Note:
I encountered difficulties while trying to use the sorted_for
plugin on my local machine, so I decided to proceed with testing my solution using a standard for
loop instead.
Step 1
If you are unable to utilize forloop.index
due to filtering out certain pages, you will need to manually count the loops by assigning values to a variable using assign
.
The code provided below lists your pages with an accurate loop iterator (counting only the pages that are actually listed):
{% assign loopindex = 0 %}
{% for page in site.pages %}
{% if page.type == 'project' %}
{% assign loopindex = loopindex | plus: 1 %}
<div class="span3">{{ loopindex }} {{ page.title }}</div>
{% endif %}
{% endfor %}
Step 2
You must display <div class="row">
at the start of every first row and </div>
at the end of every fourth row.
To determine the first and fourth rows, you can make use of the modulo
function:
{% assign loopindex = 0 %}
{% for page in site.pages %}
{% if page.type == 'project' %}
{% assign loopindex = loopindex | plus: 1 %}
{% assign rowfinder = loopindex | modulo: 4 %}
<div class="span3">{{ loopindex }} {{ rowfinder }} {{ page.title }}</div>
{% endif %}
{% endfor %}
rowfinder
will cycle through the sequence 1, 2, 3, 0.
Step 3:
Show <div class="row">
when rowfinder
is 1
, and </div>
when rowfinder
is 0
:
{% assign loopindex = 0 %}
{% for page in site.pages %}
{% if page.type == 'project' %}
{% assign loopindex = loopindex | plus: 1 %}
{% assign rowfinder = loopindex | modulo: 4 %}
{% if rowfinder == 1 %}
<div class="row">
<div class="span3">{{ page.title }}</div>
{% elsif rowfinder == 0 %}
<div class="span3">{{ page.title }}</div>
</div>
{% else %}
<div class="span3">{{ page.title }}</div>
{% endif %}
{% endif %}
{% endfor %}
Step 4:
One final detail remains: when the total number of pages is not a multiple of 4, there will be a missing </div>
at the end.
If the number of pages is divisible by 4, the last value of rowfinder
will be 0
.
Therefore, you simply need to display the closing </div>
when the value of rowfinder
is anything other than 0
.
Add this line after the for loop to address this issue:
{% if rowfinder != 0 %}
</div>
{% endif %}
...and that concludes the process!