CMS Development

jpineda91
Contributor

Blog pagination

SOLVE

Hello everyone,
I'm trying to add pagination to a blog and press templates. I tried using this example, but it only changes the featured blog post and not the listing. Any help is appreciated.

 

thanks in advance,

Jonathan

0 Upvotes
2 Accepted solutions
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog pagination

SOLVE

Hi @jpineda91 ,

 

I use this code:

{% if not simple_list_page and query.search == null and contents.total_page_count > 1 %}
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<div class="c-blog-pagination-v2 u-flex u-flex-v-center u-flex-center">
  {% if last_page_num %}
  <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--prev" href="{{ blog_page_link(last_page_num) }}">
    <span class="c-blog-pagination-v2__button-label">Previous</span>
  </a>
  {% endif %}


  {% for page in page_list %}
  {% set this_page = current_page_num + page + offset %}
  {% if this_page > 0 and this_page <= contents.total_page_count %} 
<a class="c-blog-pagination-v2__number {% if this_page == current_page_num %}c-blog-pagination-v2__number--active{% endif %}"
    href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}

    {% if next_page_num %}
    <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--next"
      href="{{ blog_page_link(next_page_num) }}">
      <span class="c-blog-pagination-v2__button-label">Next</span>
    </a>
    {% endif %}
</div>
{% endif %}

Simply add it to the bottom of your blog listing code.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


View solution in original post

BarryGrennan
Solution
Top Contributor

Blog pagination

SOLVE

It looks like you're not using the standard blog contents loop e.g. 

 

 

{% for content in contents %}
{# post template goes here,  {{content.name}} etc. #}
{% endfor %}

 

 


It looks like instead you're using:

 

{% set articles = blog_recent_posts(module.blog_field, module.count ) %}
		{% for blog in articles %}
{# post template goes here,  {{blog.name}} etc. #}
{% endfor %}

 

 

You wouldn't be able to paginate across blog_recent_posts. At least not in a straightforward way.

 

It seems your featured post is using the standard content loop. That'd be why it's changing when you add the pagination.

I'm not 100% certain but a simple fix might be replacing the second occurence of 

{% for blog in articles %}

with 

{% for blog in content%}

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact

 

 

View solution in original post

7 Replies 7
jpineda91
Contributor

Blog pagination

SOLVE

Hi @Teun and @BarryGrennan 
Thanks for all the replies!

I did not create the template, but with both of the suggestions, I will try to update the template to use the standard content loop and get back with an update.

 

I really appreciate all the help,

Jonathan

0 Upvotes
BarryGrennan
Solution
Top Contributor

Blog pagination

SOLVE

It looks like you're not using the standard blog contents loop e.g. 

 

 

{% for content in contents %}
{# post template goes here,  {{content.name}} etc. #}
{% endfor %}

 

 


It looks like instead you're using:

 

{% set articles = blog_recent_posts(module.blog_field, module.count ) %}
		{% for blog in articles %}
{# post template goes here,  {{blog.name}} etc. #}
{% endfor %}

 

 

You wouldn't be able to paginate across blog_recent_posts. At least not in a straightforward way.

 

It seems your featured post is using the standard content loop. That'd be why it's changing when you add the pagination.

I'm not 100% certain but a simple fix might be replacing the second occurence of 

{% for blog in articles %}

with 

{% for blog in content%}

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact

 

 

Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog pagination

SOLVE

Hi @jpineda91 ,

 

I use this code:

{% if not simple_list_page and query.search == null and contents.total_page_count > 1 %}
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<div class="c-blog-pagination-v2 u-flex u-flex-v-center u-flex-center">
  {% if last_page_num %}
  <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--prev" href="{{ blog_page_link(last_page_num) }}">
    <span class="c-blog-pagination-v2__button-label">Previous</span>
  </a>
  {% endif %}


  {% for page in page_list %}
  {% set this_page = current_page_num + page + offset %}
  {% if this_page > 0 and this_page <= contents.total_page_count %} 
<a class="c-blog-pagination-v2__number {% if this_page == current_page_num %}c-blog-pagination-v2__number--active{% endif %}"
    href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}

    {% if next_page_num %}
    <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--next"
      href="{{ blog_page_link(next_page_num) }}">
      <span class="c-blog-pagination-v2__button-label">Next</span>
    </a>
    {% endif %}
</div>
{% endif %}

Simply add it to the bottom of your blog listing code.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


jpineda91
Contributor

Blog pagination

SOLVE

Hi @Teun,
Thanks for your reply!
I tried the code but it does the same thing, it only has 2 pages and when I click page 2 it only changes the featured blog post and not the listing.

 

 

 

 

0 Upvotes
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog pagination

SOLVE

Hi @jpineda91 ,

 

Can you share the complete code of the blog listing?

And are you using the preview or a live blog to preview your code? The preview can mess the pagination up.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


0 Upvotes
jpineda91
Contributor

Blog pagination

SOLVE

I'm doing the changes on the live blog, here is the code

Blog template:

<!--
templateType: "blog"
label: "Blog Listing"
isAvailableForNewContent: true
-->
{% extends "./layouts/base.html" %}

{% block hero %}
{% include "./partials/hero_blog.html" %}
{% endblock hero %}

{% block body %}
{% set content = contents|first %}
{% if (content && !topic) %}



<div class="blog-index">
  <div class="blog-index__post blog-index__post--large">
    <a class="blog-index__post-link" href="{{ content.absolute_url }}"></a>
    <div class="blog-index__post-content  blog-index__post-content--large">
      <h4>Featured Blog Post</h4>
      <h2>{{ content.name }}</h2>
      <p>{{ content.post_list_content|striptags|truncatehtml(150) }}</p>
      <button class="cta_button red-pill-outline">READ MORE</button>
    </div>
    <div class="blog-index__post-image blog-index__post-image--large"
         {% if content.featured_image %}
         style="background-image: url('{{ content.featured_image }}')";
         {% endif %}>
    </div>
  </div>
</div>
{% endif %}


<div class="blog-module-wrapper">
  <div class="blog-module">
    <div class="filters">
      <div class="filter-by-topic">
        <select name="topic">
          <option value="">View Blog Posts by Topic</option>
          {% for tag in blog_tags() %}
          {% set tag = tag|string %}
          <option value="{{ tag|regex_replace(' ','-') }}"{% if request.query_dict.topic == tag|regex_replace(' ','-') %} selected{% endif %}>{{ tag|upper }}</option>
          {% endfor %}
        </select>
        <script>
          jQuery('select[name=topic').on('change',function(){
            let topic = jQuery(this).val();
            if(topic !='') {
              document.location.href='{{ group.absolute_url }}/?topic='+topic;
            }   
          });
        </script>
      </div>
      <div class="search-articles">
        {% icon name="search" style="SOLID" %}
        {% module_block module "footer_brand_search" path="@hubspot/search_input", no_wrapper=True %}
          {% module_attribute "placeholder" %}Search Articles{% end_module_attribute %}
          {% module_attribute "content_types" %}{ "website_pages": false, "landing_pages": false, "blog_posts": true, "knowledge_articles": false }{% end_module_attribute %}
        {% end_module_block %}
      </div>
    </div>
    {% module "blog-cards-section", blog_field='{{group.id}}', path="/xxxxx-IC/modules/blog-cards-section.module", label="Blog Cards Section" %}
  </div>
</div>
{% endblock body %}

 

Blog listing module (includes your code)

 

{#
{% macro blog_post_formatter(blog) %}
<div class="grid-item">
  <a href="{{ blog.url }}" class="item-link"></a>
  <div class="item-image-wrapper"><div class="item-image" style="background-image: url('{{ blog.featured_image }}');"></div></div>
  <div class="item-content">
    <div class="read-time"><time>{{blog.publish_date|datetimeformat('%B %d, %Y')}}</time> | {{((blog.post_list_content|wordcount)/60)|round}} MINUTE READ</div>
    <h3>{{ blog.name }}</h3>
    {{ blog.post_list_content|truncatehtml(150) }}
    <hr />
    {% if blog.tag_list %}
    <div class="blog-post__tags">
      {% for tag in blog.tag_list %}
        <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>
{% endmacro %}
{% related_blog_posts blog_ids="{{ module.blog_field }}", limit="3", post_formatter="blog_post_formatter", no_wrapper=True  %}
#}

<div class="blog-cards-module">
  {% if module.title %}<h3>{{ module.title }}</h3>{% endif %}
  <div class="grid">
	  
	{% if request.query_dict.topic %}
		{% set topic = request.query_dict.topic %}
		{% set articles = blog_recent_tag_posts(module.blog_field, topic, module.count ) %}
		{% for blog in articles %}
		<div class="grid-item">
		  <a href="{{ blog.url }}" class="item-link"></a>
		  <div class="item-image-wrapper"><div class="item-image" style="background-image: url('{{ blog.featured_image }}');"></div></div>
		  <div class="item-content">
		    <div class="read-time"><time>{{blog.publish_date|datetimeformat('%B %d, %Y')}}</time></div>
		    <h3>{{ blog.name }}</h3>
		    {{ blog.post_list_content|truncatehtml(150) }}
		    <hr />
		    {% if blog.tag_list %}
		    <div class="blog-post__tags">
		      {% for tag in blog.tag_list %}
		        <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name|upper }}</a>{% if not loop.last %},{% endif %}
		      {% endfor %}
		    </div>
		    {% endif %}
		  </div>
		</div>
		{% endfor %}
		
	{% else %}
	  
    {% set articles = blog_recent_posts(module.blog_field, module.count ) %}
		{% for blog in articles %}
		<div class="grid-item">
		  <a href="{{ blog.url }}" class="item-link"></a>
		  <div class="item-image-wrapper"><div class="item-image" style="background-image: url('{{ blog.featured_image }}');"></div></div>
		  <div class="item-content">
		    <div class="read-time"><time>{{blog.publish_date|datetimeformat('%B %d %Y')}}</time> | {{((blog.post_list_content|wordcount)/60)|round}} MINUTE READ</div>
		    <h3>{{ blog.name }}</h3>
		    <hr />
		    {% if blog.tag_list %}
		    <div class="blog-post__tags">
		      {% for tag in blog.tag_list %}
		        <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
		      {% endfor %}
		    </div>
		    {% endif %}
		  </div>
		</div>
		{% endfor %}  

	{% endif %}
	{% if not simple_list_page and query.search == null and contents.total_page_count > 1 %}
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<div class="c-blog-pagination-v2 u-flex u-flex-v-center u-flex-center">
  {% if last_page_num %}
  <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--prev" href="{{ blog_page_link(last_page_num) }}">
    <span class="c-blog-pagination-v2__button-label">Previous</span>
  </a>
  {% endif %}


  {% for page in page_list %}
  {% set this_page = current_page_num + page + offset %}
  {% if this_page > 0 and this_page <= contents.total_page_count %} 
<a class="c-blog-pagination-v2__number {% if this_page == current_page_num %}c-blog-pagination-v2__number--active{% endif %}"
    href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}

    {% if next_page_num %}
    <a class="c-blog-pagination-v2__button c-blog-pagination-v2__button--next"
      href="{{ blog_page_link(next_page_num) }}">
      <span class="c-blog-pagination-v2__button-label">Next</span>
    </a>
    {% endif %}
</div>
{% endif %}
  </div>
</div>

 

Thanks!

0 Upvotes
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Blog pagination

SOLVE

Hi @jpineda91 ,

 

I do not see the loop you have to use to display your blog posts. It should look something like this:

{% for post in contents %}
// Render your blog card here.
{% endfor %}

If you use this, your code should work.



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.