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
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.
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.
``
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.
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!
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.
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%}
Barry Grennan
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