For this blog: https://blog.clearcompany.com/ I am using a custom module to pull in the most recent post in the hero area.
Next comes the category navigation.
After that, there are 3 posts with full width layout, then 3 posts with 1/3 layout.
The problem is that, because I am using blog_recent_posts to offset posts in the layout, when I load the paginated pages, it just loads the same posts. I can’t use the regular loop
{% for content in contents %}
because they layouts are completely different and there’s content (the category nav) in between posts, so it can’t be accomplished with CSS.
Pagination examples: Talent Management & HR Blog | Insights & Strategies | ClearCo
Is there any way to do this with blog_recent_posts? Or does pagination only work with the default loop?
If pagination only works with the default loop, is there any way to offset that?
Thanks! (code below)
Ps. The pagination is currently hidden with CSS because it’s not working. Link examples provided above.
Hero post code:
{% set first_posts = blog_recent_posts('default', 1) %}
{% for first_post in first_posts %}
{% set post_feat = first_post.featured_image %}
{% set post_url = first_post.absolute_url %}
{% set post_title = first_post.title %}
<section class="hero-banner" style="background-image: url('{{ post_feat }}');">
<div class="blog-hero-wrapper">
<div class="blog-hero-content">
<div class="blog-hero-cats">
{% if first_post.topic_list %}
{% for topic in first_post.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %}
{% endfor %}
{% endif %}
</div>
<h2 class="blog-hero-title"><a href="{{ post_url }}">{{ post_title }}</a></h2>
{% if first_post.blog_post_author %}
<div class="blog-hero-author-wrapper">
<a class="blog-author-link" href="{{ group.absolute_url }}/author/{{ first_post.blog_post_author.slug }}"><img src="{{ first_post.blog_post_author.avatar }}" alt="{{ first_post.blog_post_author.display_name }}">
<span>by {{ first_post.blog_post_author.display_name }}</span></a>
</div>
{% endif %}
<div class="blog-hero-excerpt">
{{ first_post.post_list_content|striptags|truncate(150, False, '...') }}
</div>
<a class="blog-hero-btn" href="{{ post_url }}" title="post_title">Keep Reading <i class="im-icon-arrow-right-5"></i></a>
</div>
</div>
{# end loop for first post #}
{% endfor %}
</section>
Post listing code
<div class="blog-section{% if blog_author %} author-page{% else %} listing-page{% endif %}">
<div class="blog-listing-wrapper">
<div class="post-listing blog-top-three">
{# start default loop #}
{# start posts 2-4 #}
{% set rec_posts = blog_recent_posts('default', 4) %}
{% for content in rec_posts %}
{% if loop.index > 1 %}
<div class="post-item">
<div class="container">
<div class="row-fluid">
<div class="span6 post-content">
{% if content.topic_list %}
<div class="blog-cats">
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %}
{% endfor %}
</div>
{% endif %}
<h2 class="blog-header"><a href="{{ content.absolute_url }}">{{ content.title }}</a></h2>
{% if content.blog_post_author %}
<p class="byline">By <a href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}" class="author-name">{{ content.blog_post_author.display_name }}</a></p>
{% endif %}
<div class="post-excerpt">
{{ content.post_list_content|striptags }}
</div>
<a class="blog-read-more-btn" href="{{ content.absolute_url }}" title="{{ content.title }}">Keep Reading</a>
</div><!-- / .post-content -->
<div class="span6 post-feat-img">
<a href="{{ content.absolute_url }}" title="{{ content.title }}" style="background-image: url({{ content.featured_image }});"></a>
</div>
</div><!-- /.row-fluid -->
</div><!-- /.container -->
</div><!-- ./post-item -->
{% endif %}
{% endfor %}
</div><!-- /.blog-top-three -->
{# end second loop #}
{# start posts 5-7 #}
<div class="post-listing blog-bottom-three">
<div class="container">
<div class="row-fluid">
{% set rec_posts = blog_recent_posts('default', 7) %}
{% for content in rec_posts %}
{% if loop.index > 4 %}
<div class="post-item span4">
<div class="post-content">
<div class="post-feat-img">
<a href="{{ content.absolute_url }}" title="{{ content.title }}" style="background-image: url({{ content.featured_image }});"></a>
</div>
{% if content.topic_list %}
<div class="blog-cats">
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %}
{% endfor %}
</div>
{% endif %}
<h2 class="blog-header"><a href="{{ content.absolute_url }}">{{ content.title }}</a></h2>
<div class="post-excerpt">
{{ content.post_list_content|striptags }}
</div>
<a class="blog-read-more-btn" href="{{ content.absolute_url }}" title="{{ content.title }}">Keep Reading</a>
</div><!-- / .post-content -->
</div><!-- /.post-item -->
{% endif %}
{% endfor %}
</div><!-- /.container -->
</div><!-- /.row-fluid -->
</div><!-- /.blog-bottom-three -->
{# end third loop #}
{# begin pagination #}
{% set total_pages = contents.total_page_count %} <!-- sets variable for total pages -->
{% set more_pages = total_pages - current_page_num %} <!-- sets variable for how many more pages are past the current pages -->
{% if total_pages > 1 %}
<nav class="pagination-wrapper">
<ul class="pagination">
<li class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}"><i class="fa fa-angle-double-left"></i></a></li>
{% if more_pages == 0 %}
{% if current_page_num - 4 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></li>{% endif %}
{% if current_page_num - 4 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></li>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
{% if current_page_num - 3 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></li>{% endif %}
{% if current_page_num - 3 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 2 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></li>{% endif %}
{% if current_page_num - 1 == 1 %}<li><a href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></li>{% endif %}
{% if current_page_num - 1 > 1 %}<li><a href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></li>{% endif %}
<li class="active"><a href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></li>
{% if current_page_num + 1 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></li>{% endif %}
{% if current_page_num + 2 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></li>{% endif %}
{% if current_page_num <= 2 %}
{% if current_page_num + 3 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></li>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
{% if current_page_num + 4 <= total_pages %}<li><a href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></li>{% endif %}
{% endif %}
<li class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{{blog_page_link(next_page_num)}}"><i class="fa fa-angle-double-right"></i></a></li>
</ul>
</nav>
{% endif %}
</div><!-- /.blog-listing-wrapper -->
</div><!-- /.blog-section -->