The trick in getting this to work and still keep the pagination links up-to-date is…tricky. The solution is in offsetting the amount of “latest posts” you want to highlight on the first page in the for loop. Maintaining the limit in the paginate function makes it so the page links stay relevant.
In this example,
- I’m highlighting the first post on page 1 as full-width
- Keeping a grid of subsequent posts to 3 x 3 totaling 9 posts
To achieve this I have to
- Grab the latest article from
blog.articles
- Offset pagination
forloop
by 1 (articles being highlighted) - Multiply
limit
by paginate.current_page
to grab the last post the forloop offset
left out
The Code
{%- assign latest_article = blog.articles[0] -%}
{%- assign all_articles = blog.articles -%}
{%- assign limit = 9 -%}
{%- assign offset = 1 -%}
{%- paginate blog.articles by limit -%}
{%- if paginate.current_page == 1 -%}
{%- render 'latest-article-card', article: latest_article -%}
{%- endif -%}
<div class="row">
{%- for article in blog.articles offset: offset -%}
<div class="col-4">
{%- render 'article-card', article: article -%}
</div>
{%- endfor -%}
<div class="4">
{%- assign offset = limit | times: paginate.current_page -%}
{%- render 'article-card', article: all_articles[offset] -%}
</div>
</div>
{%- endpaginate -%}