Hubspot Blog (HubL): Pagination leads to the blog homepage only

[kejoff]

Hi,

I face issues with pagination. Indeed, even though it's displayed correctly, when I click on one of them, it returns my blog homepage which is not what you expect if you click on this kind of button.

I followed this tutorial to integrate pagination inside my template.

For more context, I'll post my code in my listing template

<!-- Gather blog posts from the newest to the oldest -->

{% if topic %}
{% set rec_posts = blog_recent_topic_posts('2780122865', topic, 9) %}
{% else %}
{% set rec_posts = blog_recent_posts('2780122865', 9) %}
{% endif %}
{% for rec_post in rec_posts %}
  <div class="post-block">
    <div class="post-date">
      <div class="post-date-background">{{ rec_post.publish_date_localized }}</div>
    </div>
    <a href="{{rec_post.absolute_url}}">
      <div class="post-img" style="background:#071d49 url('{{ rec_post.featured_image }}') center;background-size:cover;"><img src=""></div>
      <div class="post-title">{{ rec_post.name }}</div>
      <div class="post-content">{{ rec_post.post_list_content }}</div>
    </a>
      <div class="post-categorie"><a href="{{ rec_post.absolute_url }}/topic/{{ rec_post.slug }}">{{ rec_post.topic_list }}</a></div>
  </div>
{% endfor %}

<!-- Pagination setup -->
{% 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 %}
  <div class="blog-pagination">
<span class="{% if current_page_num == 1 %}disabled{% endif %}"><a class="previous-posts-link" href="{% if last_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></span>
                        
{% if more_pages == 0 %}
    {% if current_page_num - 4 == 1 %}<span><a class="all-posts-link" href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></span>{% endif %}
    {% if current_page_num - 4 > 1 %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></span>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
    {% if current_page_num - 3 == 1 %}<span><a class="all-posts-link" href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></span>{% endif %}
    {% if current_page_num - 3 > 1 %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></span>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<span><a class="all-posts-link" href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></span>{% endif %}
{% if current_page_num - 2 > 1 %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></span>{% endif %}
{% if current_page_num - 1 == 1 %}<span><a class="all-posts-link" href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></span>{% endif %}
{% if current_page_num - 1 > 1 %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></span>{% endif %}
<span class="active"><a class="all-posts-link" href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></span>
{% if current_page_num + 1 <= total_pages %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></span>{% endif %}
{% if current_page_num + 2 <= total_pages %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></span>{% endif %}
{% if current_page_num <= 2 %}
    {% if current_page_num + 3 <= total_pages %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></span>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
    {% if current_page_num + 4 <= total_pages %}<span><a class="all-posts-link" href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></span>{% endif %}
{% endif %}
<span class="{% if current_page_num == total_pages %}disabled{% endif %}"><a class="next-posts-link" href="{{blog_page_link(next_page_num)}}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></span>
</div>
{% endif %}

Thanks for your help!

[Ty]

Hi @kejoff,

I took a look at your blog page and the tutorial you provided, I noticed you removed the <nav> element from the tutorial. I believe this is why you were having issues with your pagination. Once you created it as a div, you lost the default interaction that <nav> has with links. I rewrote you snipped with all the same classes, except for I created it in this structure. 

<nav>
<div>
<span> <a></a> </span>
<span> <a></a> </span>
<span> <a></a> </span>
</div>
</nav>

With this structure, you will keep your div and span styling, but it will include the nav tag's interactions. Also, make sure you have enough articles to actually push to the second page, you can check this in Content Settings > Blog Settings. If you do, it should automatically create your page 1 and page 2 elements.

Here is the snippet I rewrote:

{% 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="text-center">
<div class="blog-pagination">
<span class="{% if current_page_num == 1 %}disabled{% endif %}"><a href="{% if current_page_num=="1" %}{{ group.absolute_url }}{% else %}{{blog_page_link(last_page_num)}}{% endif %}"><i class="fa fa-angle-double-left"></i></a></span>
                        
{% if more_pages == 0 %}
    {% if current_page_num - 4 == 1 %}<span><a href="{{ group.absolute_url }}">{{ current_page_num - 4 }}</a></span>{% endif %}
    {% if current_page_num - 4 > 1 %}<span><a href="{{ blog_page_link(current_page_num - 4) }}">{{ current_page_num - 4 }}</a></span>{% endif %}
{% endif %}
{% if more_pages <= 1 %}
    {% if current_page_num - 3 == 1 %}<span><a href="{{ group.absolute_url }}">{{ current_page_num - 3 }}</a></span>{% endif %}
    {% if current_page_num - 3 > 1 %}<span><a href="{{ blog_page_link(current_page_num - 3) }}">{{ current_page_num - 3 }}</a></span>{% endif %}
{% endif %}
{% if current_page_num - 2 == 1 %}<span><a href="{{ group.absolute_url }}">{{ current_page_num - 2 }}</a></span>{% endif %}
{% if current_page_num - 2 > 1 %}<span><a href="{{ blog_page_link(current_page_num - 2) }}">{{ current_page_num - 2 }}</a></span>{% endif %}
{% if current_page_num - 1 == 1 %}<span><a href="{{ group.absolute_url }}">{{ current_page_num - 1 }}</a></span>{% endif %}
{% if current_page_num - 1 > 1 %}<span><a href="{{ blog_page_link(current_page_num - 1) }}">{{ current_page_num - 1 }}</a></span>{% endif %}
<span class="active"><a href="{% if current_page_num==1 %}{{ group.absolute_url }}{% else %}{{ blog_page_link(current_page_num) }}{% endif %}">{{ current_page_num }}</a></span>
{% if current_page_num + 1 <= total_pages %}<span><a href="{{ blog_page_link(current_page_num + 1) }}">{{ current_page_num + 1 }}</a></span>{% endif %}
{% if current_page_num + 2 <= total_pages %}<span><a href="{{ blog_page_link(current_page_num + 2) }}">{{ current_page_num + 2 }}</a></span>{% endif %}
{% if current_page_num <= 2 %}
    {% if current_page_num + 3 <= total_pages %}<span><a href="{{ blog_page_link(current_page_num + 3) }}">{{ current_page_num + 3 }}</a></span>{% endif %}
{% endif %}
{% if current_page_num == 1 %}
    {% if current_page_num + 4 <= total_pages %}<span><a href="{{ blog_page_link(current_page_num + 4) }}">{{ current_page_num + 4 }}</a></span>{% endif %}
{% endif %}
<span class="{% if current_page_num == total_pages %}disabled{% endif %}"><a href="{% if current_page_num == total_pages %}{{ group.absolute_url }}{% else %}{{blog_page_link(next_page_num)}}{% endif %}"><i class="fa fa-angle-double-right"></i></a></span>
</div>
</nav>
{% endif %}

Try this out and let me know how it goes! Hopefully it helps!

-- Ty

[kejoff]

Thanks for your answer but the issue is not the fact that I do not have any pagination. My problem here is the fact that when I click on one of the pagination button it returns me back to the blog homepage. It is more a link issue than nav issue.

[Ty]

Do you have a link to the page you are trying this on? Also do you mind if I hop into your portal and clone your page to try and get something working for you? 

-- Ty

[kejoff]

Sure here is my page: https://www.finalcad.com/blog

Thanks for your help

[Ty · Accepted solution]

Hey @kejoff,

I took a look here and the part that is breaking the pagination is

{% if topic %}
{% set rec_posts = blog_recent_topic_posts('2641305117', topic, 9) %}
{% else %}
{% set rec_posts = blog_recent_posts('2641305117', 9) %}
{% endif %}
{% for rec_post in rec_posts %}

Is there a reason you're setting these variables to compare in your for loop? Because technically, you are setting the var to be the same thing, except one includes a topic parameter, which seems like extra work because If you just run your for loop as:

{% for content in contents %}

you should still have access to check a post's topics. You can also control how many posts display/per page in your content settings

If that beginning part is in there for a reason, could you please explain? The only reason I think you'd have it in there for is to style the top blog post, but that doesn't seem to be the case.

If you would like to see how I got it wroking for me, you can find my template, named: FINALCAD - Listing Articles (Blog) - Ty From HubSpot in your portal.

Look forward to hearing back and hopefully we can get this solved for you!

-- Ty

[kejoff]

Thanks for your answer Ty, it works perfectly. 

Indeed, I wanted to make it easier for me to style my top page. Now, I understand better where was my mistake 🙂

Thanks again! 😃

[Ty]

That's great news! Over the time I've worked on the COS and blog pages, I found it alot easier to style "first-items" through either CSS using something like:

.blog-post:first-of-type {}
.blog-container:first-child {}

or, using JS, you can apply a class/id to the first element

$(document).ready(function() {
  $('.blog-post:first-child').addClass('featured-post');
});

Then you could style that first post off of the "featured-post" class instead. This function will run once on every blog page, so if you go to page 2, it will run it again, and so on.

Glad I could help! Let me know if you have anymore questions!

--Ty