Pagination for Combined Blogs

[Woodsy]

Hi all, I'm working on combining two hubspot blogs into one listing. I have got both blogs showing but I need to add javascript pagination as the standard Hubspot blog pagination doesn't support combined blog listings. Could anyone share example html and JS of how to implement this please? I have included the code for the listing that I'm working on. Thanks for any help.

<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
{# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #}
<div class="post-listing{% if simple_list_page %}-simple{% endif %}">
{% if blog_author %}
<div class="hs-author-profile">
<h2 class="hs-author-name">{{ blog_author.display_name }}</h2>
{% if blog_author.avatar %} <div class="hs-author-avatar"> <img width="35 px" src="{{ blog_author.avatar }}" loading="lazy" alt="{{ blog_author.display_name }}"> </div> {% endif %}
<div class="hs-author-bio">{{ blog_author.bio }}</div>
{% if blog_author.has_social_profiles %}
<div class="hs-author-social-section">
<span class="hs-author-social-label">Find me on:</span>
<div class="hs-author-social-links">
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook fa fa-facebook"><span class="hs-screen-reader-text">Facebook</span></a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin fa fa-linkedin-square"><span class="hs-screen-reader-text">Linkedin</span></a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter fa fa-twitter-square"><span class="hs-screen-reader-text">Twitter</span></a>
{% endif %}
{% if blog_author.google_plus %}
<a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus fa fa-google-plus-square"><span class="hs-screen-reader-text">Google Plus</span></a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<br />
<h2 class="hs-author-listing-header">Recent Posts</h2>
{% endif %}
<!-- sets a variable for a the 5 most recent posts of my default CMS blog -->
{% set blog_one_posts = blog_recent_posts('default', limit=3) %}<!-- sets a variable for a the 5 most recent posts of my blog id 47082700. You can find the blog id in the URL of the blog dashboard for a particular blog-->
{% set blog_two_posts = blog_recent_posts('5110413671', limit=3) %} <!-- combines the two variables into a single variable and sorts them by publish date. Please note the sort filter requires all three parameters -->
{% set all_posts = (blog_one_posts + blog_two_posts) | sort(true, false, 'publish_date') %}
<!-- loop through posts in custom all posts variable -->
{% for post in all_posts %}
<div class="post-item">
{% if not simple_list_page %}
{% if post.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<a href="{{post.absolute_url}}" title="" class="hs-featured-image-link">
<img src="{{ post.post_list_summary_featured_image }}" loading="lazy" class="hs-featured-image" alt="{{ post.featured_image_alt_text }}">
</a>
</div>
{% endif %}
<div class="post-header clearfix">
<h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2>
<p id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author"><span class="fa fa-calendar"></span>
{{ post.publish_date_localized }} / by
{%if content.blog_post_author %}
<a class="author-link" href="{{ post.absolute_url }}/author/{{ post.blog_post_author.slug }}">{{ post.blog_post_author.display_name }}</a>
{% endif %}
{% if content.topic_list %}
posted in
{% for topic in content.topic_list %}
<a class="topic-link" href="{{ post.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
{% endif %}

<!--comments-->
<span class="custom_listing_comments"><span class="fa fa-comment"></span>
<a href="{{post.absolute_url}}#comments-listing">
{% set comments_number = content.comment_list|length %}
{% if comments_number == 1 %}
{% set comments_label = "Comment" %}
{% else %}
{% set comments_label = "Comments" %}
{% endif %}
{{ comments_number }} {{ comments_label }}</a>
</span>
</p>

</div>
<div class="post-body clearfix">
<!--post summary--> {{ post.post_list_content|safe }}
</div>
<a class="more-link" href="{{ post.absolute_url }}">Read More </a><a class="fa fa-chevron-right" href="{{ post.absolute_url }}"></a>

<hr > {% else %}
<h2 class="post-listing-simple"><a href="{{post.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
</div>
{% endfor %}
</div><!--Blog-Pagination-->
Pagination to go here...



</div>
</div>

[Indra]

Hi @Woodsy,

It's possible with hubl to do the filter when using query parameters.

I have setup a sample code how to set it up with just 2 arrays. You just have to convert it to blog posts.

Hope this will help solve your problem.

{# Set blogs #}
{% set posts_1 = ['blog 1.1','blog 1.2','blog 1.3','blog 1.4','blog 1.5'] %}
{% set posts_2 = ['blog 2.1','blog 2.2','blog 2.3','blog 2.4','blog 2.5'] %}
{% set all_posts = (posts_1 + posts_2)  %}

{# show all posts #}
{{ all_posts }}

{# Set fefault 'page_num' if query param is not set #}
{% if not request.query_dict.page_num %}
  {% set page_num = 1 %}{# Set default to 1 #}
  {# Set 'page_num' by query paramater #}
{% elif request.query_dict.page_num %}
  {# Set page_num if query_dict page number exists #}
  {% set page_num = request.query_dict.page_num %}
{% endif %}

{# Set pagination variable #}
{% set batch_num =  2 %} {# amount of items to display #}
{% set offset = 1 %} {# Set offset default #}
{% set total = all_posts|length %} {# Total posts available #}
{% set total_pages = (total / batch_num)|round(0, 'ceil') %} {# Total pages #}
<br>
{# show total pages #}
total pages: {{ total_pages }}
<br>

{% for column in all_posts|slice(batch_num,' ') %}
  {# Only display the items of the current page #}
  {% if loop.index == page_num %}
  <div class="blog-listing__grid blog-listing__grid--page-{{ loop.index }}" data-batch_num="{{ batch_num }}" data-offset="{{ offset }}" data-total="{{ total }}" data-total_pages="{{ total_pages }}" data-absolute_url="{{ absolute_url }}"> 
    {% for item in column %}
    !{{ item|tojson }}!
    {% endfor %}
  </div>
  {% endif %}
{% endfor %}

{# Hide pagination if there is only 1 page #}
{% if total_pages != '1' %}
<div class="blog-pagination" data-total-pages="{{ total_pages }}">
  <div class="blog-pagination-left">
    {% if page_num != 1 %}
    <a class="first-posts-link" href="{{ content.absolute_url }}?page_num={{ 1 }}">❮❮</a>
    {% endif %}

    {% if page_num > 1 %}
    <a class="previous-posts-link" href="{{ content.absolute_url }}?page_num={{ page_num|add(-1) }}">❮</a>
    {% endif %}
  </div>

  <div class="blog-pagination-center">

    {% if page_num|add(-2) >= 1 %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(-2) }}">{{ page_num|add(-2) }}</a>{% endif %}

    {% if page_num|add(-1) >= 1 %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(-1) }}">{{ page_num|add(-1) }}</a>{% endif %}

    <a class="active" href="{{ content.absolute_url }}?page_num={{ page_num }}">{{ page_num }}</a>

    {% if page_num|add(1) <= total_pages %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(1) }}">{{ page_num|add(1) }}</a>{% endif %}

    {% if page_num|add(2) <= total_pages %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(2) }}">{{ page_num|add(2) }}</a>{% endif %}

    {% if page_num <= 2 %}
    {% if page_num|add(3) <= total_pages %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(3) }}">{{ page_num|add(3) }}</a>{% endif %}
    {% endif %}

    {% if page_num == 1 %}
    {% if page_num|add(4) <= total_pages %}<a href="{{ content.absolute_url }}?page_num={{ page_num|add(4) }}">{{ page_num|add(4) }}</a>{% endif %}
    {% endif %}
  </div>

  <div class="blog-pagination-right">
    {% if total_pages > page_num %}
    <a class="next-posts-link" href="{{ content.absolute_url }}?page_num={{ page_num|add(1) }}">❯</a>
    {% endif %}

    {% if total_pages != page_num %}
    <a class="last-posts-link" href="{{ content.absolute_url }}?page_num={{ total_pages }}">❯❯</a>
    {% endif %}
  </div>
</div>
{% endif %}

[natsumimori]

Thank you for your post @Woodsy .

Hi @Indra , is this something you can assist with?