# Pagination not working with offset posts - Hubl

**URL:** <https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309>\
**Category:** CMS Development\
**Created:** [January 4, 2018, 10:47pm UTC](https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309 "2018-01-04T22:47:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![redbranchmedia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/redbranchmedia/32/84489_2.png) [@redbranchmedia](https://community.hubspot.com/u/redbranchmedia)\
**Post date:** [January 4, 2018, 10:47pm UTC](https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309/1 "2018-01-04T22:47:34Z")

</div>

For this blog: [https://blog.clearcompany.com/](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](https://blog.clearcompany.com/page/2)

> **[Talent Management & HR Blog | Insights & Strategies](https://clearcompany.com/resources/blog/)**
>
> Discover the latest trends, insights, and strategies in HR, L&D, and talent management. Stay informed and lead with clarity and confidence.

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:

```auto
{% 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

```auto
<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 -->

```

---

<div class="post-metadata">

**Author:** ![roisinkirby](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@roisinkirby](https://community.hubspot.com/u/roisinkirby)\
**Post date:** [January 30, 2018, 9:59am UTC](https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309/2 "2018-01-30T09:59:24Z")

</div>

Hello @redbranchmedia are you still hitting the same roadblock? If so let me know and I’ll connect you with a design expert.

---

<div class="post-metadata">

**Author:** ![redbranchmedia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/redbranchmedia/32/84489_2.png) [@redbranchmedia](https://community.hubspot.com/u/redbranchmedia)\
**Post date:** [January 30, 2018, 3:42pm UTC](https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309/3 "2018-01-30T15:42:15Z")

</div>

I did. Thank you. I tried to post my solution as a reply to my comment, but it simply wasn’t there after posting. I also just attempted to post my solution to a reply to your comment for anyone else that finds it, but even though it said “posted successfully”, it wasn’t there when I refreshed the page. Odd.

---

<div class="post-metadata">

**Author:** ![redbranchmedia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/redbranchmedia/32/84489_2.png) [@redbranchmedia](https://community.hubspot.com/u/redbranchmedia)\
**Post date:** [January 30, 2018, 3:45pm UTC](https://community.hubspot.com/t/pagination-not-working-with-offset-posts-hubl/6309/4 "2018-01-30T15:45:24Z")

</div>

This forum doesn’t seem to like when I post hubl code in my replies as it just won’t post the message (even after giving me a confirmation message). So, I’ve put the solution here in a pastebin for anyone else that runs across this. [Hubspot Loop with paginated and skipped posts - Pastebin.com](https://pastebin.com/1cqFxypN)