Refactoring a for loop in jekyll - html

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">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</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></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.

Answer 1

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">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</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></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">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</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></li>
</ul>
</div>
</article>
{% endfor %}
</div>
Et voilà !