Pagination not working with offset posts - Hubl

[redbranchmedia]

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: https://blog.clearcompany.com/page/2

https://blog.clearcompany.com/page/3

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

[roisinkirby]

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

[redbranchmedia]

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. 

[redbranchmedia · Accepted solution]

 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. https://pastebin.com/1cqFxypN