Reputation: 845
Basically, I am using Jekyll (which uses the Liquid templating language) and I am trying to write a for
loop which wraps every two items in a div
.
This is my current loop:
<div>
{% for post in site.posts %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
</div>
Which would output four posts like so:
<div>
<a href="#">Title</a>
<a href="#">Title</a>
<a href="#">Title</a>
<a href="#">Title</a>
</div>
My desired output for four posts is:
<div>
<a href="#">Title</a>
<a href="#">Title</a>
</div>
<div>
<a href="#">Title</a>
<a href="#">Title</a>
</div>
How can I accomplish this?
Upvotes: 26
Views: 17817
Reputation: 225
You can do this with the cycle
tag as described in https://shopify.github.io/liquid/tags/iteration/
{% for post in site.posts %}
{% cycle '<div>', '' %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% cycle '', '</div>' %}
{% endfor %}
outputs
<div>
<a href="#">Title</a>
<a href="#">Title</a>
</div>
<div>
<a href="#">Title</a>
<a href="#">Title</a>
</div>
Upvotes: 0
Reputation: 817
I know I'm late to the game but I found what I feel is a fairly elegant solution that doesn't feel hacky.
With for
loop's limit
and offset
params, we can iterate one row at a time, N posts per row.
First, we count the number of rows we'll need to enumerate over:
{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
The Ruby equivalent would be rows = (posts.size / 2.0).ceil
(odd numbers get their own row).
Next, we'll iterate over the rows:
{% for i in (1..rows) %}
<div>
Now we need to calculate the collection offset with (i - 1) * 2
(using forloop.index0
):
{% assign offset = forloop.index0 | times: 2 %}
Then we can iterate over the slice of posts starting at the row's offset (equivalent to posts[offset, 2]
in Ruby):
{% for post in site.posts limit:2 offset:offset %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
Close the row div
element and for loop:
</div>
{% endfor %}
That's it!
In Ruby, this would be:
rows = (posts.size / 2.0).ceil # the number of rows
(1..rows).each do |i|
offset = (i - 1) * 2
# <div>
posts[offset, 2].each do |post|
# <a href="#{post.url}>#{post.title}</a>
end
# </div>
end
All together now, in Liquid:
{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
{% for i in (1..rows) %}
{% assign offset = forloop.index0 | times: 2 %}
<div>
{% for post in site.posts limit:2 offset:offset %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
</div>
{% endfor %}
Hope this helps someone!
Upvotes: 22
Reputation: 4279
After looking at Christian's solution I updated my (pug based) code to:
.blog
.container
.row
.col-xs-0
.col-xs-12
h1 Blog
p Summit blog with latest news, thinking and participant's posts.
.col-xs-0
| {% for page in site.posts %}
| {% assign loopindex = forloop.index | modulo: 2 %}
| {% if loopindex == 1 %}
.row
| {% endif %}
span
.col-xs-6.col-sm-6
.card
.card-top
+ add-title
+ add-author
.card-block
+ add-snippet
| {% endfor %}
Upvotes: 1
Reputation: 383
Try this one:
<div>
{% for post in paginator.posts %}
<div>
{% if forloop.index == 1 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 2 %}
<a href="">{{ post.title }}</a>
{% endif %}
</div>
<div>
{% if forloop.index == 3 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 4 %}
<a href="">{{ post.title }}</a>
{% endif %}
</div>
{% endfor %}
</div>
Upvotes: 6
Reputation: 845
I've just come across this (https://gist.github.com/leemachin/2366832) which is a much better solution then ones posted in other answers, bare in mind you'll need this plugin (https://gist.github.com/leemachin/2366832#file-modulo-filter-rb) for it to work:
{% for post in paginator.posts %}
{% capture modulo %}{{ forloop.index0 | mod:2 }}{% endcapture %}
{% if modulo == '0' or forloop.first %}
<div>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% if modulo == '1' or forloop.last %}
</div>
{% endif %}
{% endfor %}
Upvotes: 6
Reputation: 36431
If the number of <div>
s and posts is fixed (which seems to be the case based on which answer you selected), there's a shorter way to get the same output - using limit
and offset
:
(Liquid's approach to paging)
<div>
{% for post in site.posts limit: 2 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
</div>
<div>
{% for post in site.posts limit: 2 offset: 2 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
</div>
If the number of posts is not fixed (so when you have 100 posts, you want 50 <div>
s with two posts each), then you can use forloop.index
(which was already mentioned in most of the other answers), and use modulo
to find out if the current index is even or odd:
{% for post in site.posts %}
{% assign loopindex = forloop.index | modulo: 2 %}
{% if loopindex == 1 %}
<div>
<a href="{{ post.url }}">{{ post.title }}</a>
{% else %}
<a href="{{ post.url }}">{{ post.title }}</a>
</div>
{% endif %}
{% endfor %}
This returns your desired output as well, but works for any number of posts.
Upvotes: 35
Reputation: 845
With the help from @smilinmonki666 I have got this working how I want it too, here's the final code I went with:
{% assign current_page_posts = paginator.posts | size %}
{% if current_page_posts > 0 %}
<div>
<div>
{% for post in paginator.posts %}
{% if forloop.index == 1 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 2 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endif %}
{% endfor %}
</div>
{% if current_page_posts > 2 %}
<div>
{% for post in paginator.posts %}
{% if forloop.index == 3 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 4 %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
Upvotes: 0
Reputation: 383
I really should concentrate on what I am doing, but hard with a one year old giving me all her toys... :D
The code should now work:
<div>
<div>
{% for post in paginator.posts %}
{% if forloop.index == 1 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 2 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% endfor %}
</div>
<div>
{% for post in paginator.posts %}
{% if forloop.index == 3 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% if forloop.index == 4 %}
<a href="">{{ post.title }}</a>
{% endif %}
{% endfor %}
</div>
</div>
Should give the html of:
<div>
<div>
<a href="">Title 1</a>
<a href="">Title 2</a>
</div>
<div>
<a href="">Title 3</a>
<a href="">Title 4</a>
</div>
</div>
Upvotes: 2
Reputation: 383
Ok, I have done a quick try with no proper styling but this should work:
<div>
{% for post in paginator.posts %}
{% case forloop.index %}
<div>
{% when 1 %}
<a href="">{{ post.title }}</a>
{% when 2 %}
<a href="">{{ post.title }}</a>
</div>
<div>
{% when 3 %}
<a href="">{{ post.title }}</a>
{% when 4 %}
<a href="">{{ post.title }}</a>
</div>
{% endcase %}
{% endfor %}
</div>
Upvotes: 0