Pagination of multiple recent post blog
<div class="blog-section">
<div class="blog-listing-wrapper cell-wrapper">
<div class="post-listing clearfix">
{% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->
{% set blog_two_posts = blog_recent_posts('6126300566', 200) %} <!-- 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_three_posts = blog_recent_posts('6130453958', 200) %}
{% set blog_four_posts = blog_recent_posts('6131348719', 200) %}
{% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date') %} <!-- combines the two variables into a single variable and sorts them by publish date. Please note the sort filter requires all three parameters -->
{% set page_size = 12 %} {# Define Page Size Here #}
{% set rowCount = all_posts|length %}
{% set pageCount =(rowCount/page_size)|round(0, 'ceil') %}
{% if request.query_dict.page %}
{% set page_num = request.query_dict.page|int %}
{% else %}
{% set page_num = 1 %}
{% endif %}
{% set offsetNum = (page_num-1)*page_size %}
{% set endIndex = offsetNum + page_size + 1 %}
{% set productsList = all_posts %}
{% for post in all_posts %}
{% if loop.index > offsetNum and loop.index < endIndex %}
<div class="post-item">
<div class="blogListDateBox">
{{ post.publish_date_local_time.strftime('%b') }} <br>{{ post.publish_date_local_time.strftime('%-m') }}
</div>
{% 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="{{ resize_image_url( post.post_list_summary_featured_image,643 ) }}" class="hs-featured-image" alt="{{ post.featured_image_alt_text | escape }}">
</a>
</div>
{% endif %}
<div class="post-header">
<h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2>
<div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
{{ post.parent_blog.name }}
- Posted by
{% if post.blog_post_author %}
{{ post.blog_post_author.display_name }} {{ post.blog_post_author.bio }}
{% endif %}
</div>
</div>
<div class="post-body clearfix">
<!--post summary-->
{{ post.post_list_content|safe|striptags|truncatehtml(150) }}
</div>
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ post.absolute_url }}">Continue Reading</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="blog-pagination clearfix">
{% set last_page = page_num - 1 %}
{% if page_num <= 1 %}
{% set last_page = "" %}
{% endif %}
{% set next_page = page_num + 1 %}
{% if page_num >= pageCount %}
{% set next_page = "" %}
{% endif %}
<ul class="table-pagination">
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if pageCount - page_num == 1 %}{% set offset = -1 %}
{% elif pageCount - page_num == 0 %}{% set offset = -2 %}
{% elif page_num == 2 %}{% set offset = 1 %}
{% elif page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<li class="prev-link {% if not last_page %} disabled {% endif %}" >
<a {% if last_page %} href="{{ request.path }}?page={{ last_page }}" {% endif %}>← Previous</a>
</li>
{% if pageCount > 5 %}
{% if page_num >= 4 %}
<li class="prev"><a href="{{ request.path }}?page=1">1</a></li>
<li><a class="elipses" href="{% if page_num <= 5 %}{{ request.path }}?page=1{% else %}{{ request.path }}?page={{ page_num - 5 }}{% endif %}">...</a></li>
{% endif %}
{% endif %}
{% for page in page_list %}
{% set this_page = page_num + page + offset %}
{% if this_page > 0 and this_page <= pageCount %}
<li><a {% if this_page == page_num %}class="active"{% endif %} href="{{ request.path }}?page={{ this_page }}">{{ this_page }}</a></li>
{% endif %}
{% endfor %}
{% if pageCount > 5 %}
{% if pageCount - page_num > 2 %}
<li><a class="elipses" href="{% if pageCount - page_num <= 5 %}{{ pageCount }}{% else %}{{ request.path }}?page={{ page_num + 5 }}{% endif %}">...</a></li>
<li><a href="{{ request.path }}?page={{ pageCount }}">{{ pageCount }}</a></li>
{% endif %}
{% endif %}
<li class="next {% if not next_page %} disabled{% endif %}"><a class="next-link" {% if next_page %} href="{{ request.path }}?page={{ next_page }}" {% endif %}>Next →</a>
</ul>
</div>
</div>
</div>
</div>
<div class="blog-listing-wrapper cell-wrapper">
<div class="post-listing clearfix">
{% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->
{% set blog_two_posts = blog_recent_posts('6126300566', 200) %} <!-- 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_three_posts = blog_recent_posts('6130453958', 200) %}
{% set blog_four_posts = blog_recent_posts('6131348719', 200) %}
{% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date') %} <!-- combines the two variables into a single variable and sorts them by publish date. Please note the sort filter requires all three parameters -->
{% set page_size = 12 %} {# Define Page Size Here #}
{% set rowCount = all_posts|length %}
{% set pageCount =(rowCount/page_size)|round(0, 'ceil') %}
{% if request.query_dict.page %}
{% set page_num = request.query_dict.page|int %}
{% else %}
{% set page_num = 1 %}
{% endif %}
{% set offsetNum = (page_num-1)*page_size %}
{% set endIndex = offsetNum + page_size + 1 %}
{% set productsList = all_posts %}
{% for post in all_posts %}
{% if loop.index > offsetNum and loop.index < endIndex %}
<div class="post-item">
<div class="blogListDateBox">
{{ post.publish_date_local_time.strftime('%b') }} <br>{{ post.publish_date_local_time.strftime('%-m') }}
</div>
{% 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="{{ resize_image_url( post.post_list_summary_featured_image,643 ) }}" class="hs-featured-image" alt="{{ post.featured_image_alt_text | escape }}">
</a>
</div>
{% endif %}
<div class="post-header">
<h2><a href="{{post.absolute_url}}">{{ post.name }}</a></h2>
<div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
{{ post.parent_blog.name }}
- Posted by
{% if post.blog_post_author %}
{{ post.blog_post_author.display_name }} {{ post.blog_post_author.bio }}
{% endif %}
</div>
</div>
<div class="post-body clearfix">
<!--post summary-->
{{ post.post_list_content|safe|striptags|truncatehtml(150) }}
</div>
{% if content_group.show_summary_in_listing %}
<a class="more-link" href="{{ post.absolute_url }}">Continue Reading</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="blog-pagination clearfix">
{% set last_page = page_num - 1 %}
{% if page_num <= 1 %}
{% set last_page = "" %}
{% endif %}
{% set next_page = page_num + 1 %}
{% if page_num >= pageCount %}
{% set next_page = "" %}
{% endif %}
<ul class="table-pagination">
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if pageCount - page_num == 1 %}{% set offset = -1 %}
{% elif pageCount - page_num == 0 %}{% set offset = -2 %}
{% elif page_num == 2 %}{% set offset = 1 %}
{% elif page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<li class="prev-link {% if not last_page %} disabled {% endif %}" >
<a {% if last_page %} href="{{ request.path }}?page={{ last_page }}" {% endif %}>← Previous</a>
</li>
{% if pageCount > 5 %}
{% if page_num >= 4 %}
<li class="prev"><a href="{{ request.path }}?page=1">1</a></li>
<li><a class="elipses" href="{% if page_num <= 5 %}{{ request.path }}?page=1{% else %}{{ request.path }}?page={{ page_num - 5 }}{% endif %}">...</a></li>
{% endif %}
{% endif %}
{% for page in page_list %}
{% set this_page = page_num + page + offset %}
{% if this_page > 0 and this_page <= pageCount %}
<li><a {% if this_page == page_num %}class="active"{% endif %} href="{{ request.path }}?page={{ this_page }}">{{ this_page }}</a></li>
{% endif %}
{% endfor %}
{% if pageCount > 5 %}
{% if pageCount - page_num > 2 %}
<li><a class="elipses" href="{% if pageCount - page_num <= 5 %}{{ pageCount }}{% else %}{{ request.path }}?page={{ page_num + 5 }}{% endif %}">...</a></li>
<li><a href="{{ request.path }}?page={{ pageCount }}">{{ pageCount }}</a></li>
{% endif %}
{% endif %}
<li class="next {% if not next_page %} disabled{% endif %}"><a class="next-link" {% if next_page %} href="{{ request.path }}?page={{ next_page }}" {% endif %}>Next →</a>
</ul>
</div>
</div>
</div>
</div>
Thanks very much for posting this!
ReplyDelete