CMS Development

jpineda91
Colaborador

Blog pagination

resolver

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 Me gusta
2 Soluciones aceptadas
Teun
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog pagination

resolver

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.


Ver la solución en mensaje original publicado

BarryGrennan
Solución
Colaborador líder

Blog pagination

resolver

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

 

 

Ver la solución en mensaje original publicado

7 Respuestas 7
jpineda91
Colaborador

Blog pagination

resolver

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 Me gusta
BarryGrennan
Solución
Colaborador líder

Blog pagination

resolver

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
Solución
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog pagination

resolver

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
Colaborador

Blog pagination

resolver

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 Me gusta
Teun
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog pagination

resolver

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 Me gusta
jpineda91
Colaborador

Blog pagination

resolver

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 Me gusta
Teun
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Blog pagination

resolver

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.