For loop, wrap every two posts in a div

Question

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?

Answer 1

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!

Answer 2

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>

Even better solution:

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.

Answer 3

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 %}

Answer 4

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>

Answer 5

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>

Answer 6

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                                        %}

Answer 7

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>

Answer 8

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 %}

Answer 9

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>