Refactoring a for loop in jekyll

Question

I'm creating a blog on my Jekyll site. In the feed section, I've got the first post at the top of the page designated to be the featured post. At the bottom, I have a masonry of the rest of the posts below the featured post. (As you can see from the actual web page here). In the latest posts section, I have a separate loop to handle every post that was published before the featured post by offsetting it by 1 in a for loop. Each row in this masonry has a limit of 3 posts per row. Each row is controlled by the inline-flex property.

Here is the code in my for loop for that:

<div class="latest-section">
    <h5>Latest Posts</h5>
    <div class="latest-section__row">
        {% for post in site.posts offset:1 limit:3 %}
        {% capture post_row %}
            <article class="latest-section__row--post">
                <figure class="post--featured-image">
                    <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
                </figure>
                <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
                <p>{{ post.excerpt | strip_html }}</p>
                <div class="post-byline">
                    <ul>
                        <li><i class="fa fa-user"></i>
                            {% if post.author %}
                                {{ post.author }}
                            {% else %}
                                {{ site.data.settings.author }}
                            {% endif %}
                        </li>
                        <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                        <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
                    </ul>
                </div>
            </article>
        {% endcapture %}
        {{ post_row }}
        {% endfor %}
    </div>
    <div class="latest-section__row">
        {% for post in site.posts offset:4 limit:3 %}
            {{ post_row }}
        {% endfor %}
    </div>
</div>

So I'm basically "capturing" each article in the row into a variable called "post_row" so that I can use it for the next row, as you can see in the block of code below:

<div class="latest-section__row">
    {% for post in site.posts offset:4 limit:3 %}
        {{ post_row }}
    {% endfor %}
</div>

The problem that I'm running into is that this becomes extremely hard to maintain if I have say 90 posts or so in the future. I would have to continue to write this block of code out at least a few dozen times (as you can probably imagine) for every single row. For instance the next block of code would be:

<div class="latest-section__row">
    {% for post in site.posts offset:7 limit:3 %}
        {{ post_row }}
    {% endfor %}
</div>

...and so on and so forth. The offset parameter is incremented by 3 each time so that no duplicate post is posted. Is there a way to make this a little bit more dynamic so I don't have to write this again and again in the future? The only thing that needs to change is that "offset" parameter number and nothing else in order to create a new row. Thanks for the help in advance.

David Jacquel David Jacquel · Accepted Answer · 2014-12-01T19:26:04

this is what you can do :

blog/index.html

---
layout: default
title: Blog - Jake Tarr
---
<section class="blog-feed">
    <div class="ribbon-container">
        <div class="ribbon">
            <div class="ribbon__content">
                <h6>Blog</h6>
            </div>
        </div>
    </div>

{% comment %}------ Template setup ------{% endcomment %}
{% assign numberOfFeaturedPosts = 1 %}
{% assign postsPerRow = 3 %}

<!-- Featured post (latest post) -->
{% include _featured_posts.html %}

{% comment %}--- Calculate the number of 'latest' posts to process {% endcomment %}
{% assign numberOfLatestPosts = site.posts | size | minus: numberOfFeaturedPosts %}

{% comment %}----- Calculate the number of rows -----{% endcomment %}
{% assign numOfRows = numberOfLatestPosts | modulo: postsPerRow | plus: 1 %}

{% comment %}---- Assign first offset -----{% endcomment %}
{% assign offset = numberOfFeaturedPosts %}

<!-- All the other posts added before latest post -->
    <div class="latest-section">
        <h5>Latest Posts</h5>
{% for row in (1...numOfRows) %}
{% include _latest_posts.html %}
{% comment %}---- Increment offset for next row ----{% endcomment %}
{% assign offset = offset | plus: postsPerRow %}
{% endfor %}
    </div>

</section>

In order to have clean and short files, we create two includes :

_includes/_featured_posts.html

<div class="featured-section">
    <h5>Featured Post</h5>
    {% for post in site.posts limit: numberOfFeaturedPosts %}
    <article class="featured-section__post">
        <figure class="post--featured-image">
            <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
        </figure>
        <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
        <p>{{ post.excerpt | strip_html }}</p>
        <div class="post-byline">
            <ul>
                <li><i class="fa fa-user"></i>
                    {% if post.author %}
                        {{ post.author }}
                    {% else %}
                        {{ site.data.settings.author }}
                    {% endif %}
                </li>
                <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
            </ul>
        </div>
    </article>
    {% endfor %}
</div>

_includes/_latest_posts.html

<!-- Latest posts - row {{ row }} -->
<div class="latest-section__row">
    {% for post in site.posts offset: offset limit: postsPerRow %}
        <article class="latest-section__row--post">
            <figure class="post--featured-image">
                <a href="{{ post.url }}"><img src="{{ post.featured_image_path }}" alt=""></a>
            </figure>
            <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
            <p>{{ post.excerpt | strip_html }}</p>
            <div class="post-byline">
                <ul>
                    <li><i class="fa fa-user"></i>
                        {% if post.author %}
                            {{ post.author }}
                        {% else %}
                            {{ site.data.settings.author }}
                        {% endif %}
                    </li>
                    <li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
                    <li><i class="fa fa-comment"></i><a href="{{ post.url }}#disqus_thread"></a></li>
                </ul>
            </div>
        </article>
    {% endfor %}
</div>

Et voilà !

Refactoring a for loop in jekyll

1 Answers

blog/index.html

_includes/_featured_posts.html

_includes/_latest_posts.html