Adding Blog Posts w/ Pagination To Website Page

eslobrown — Tue, 19 Apr 2022 18:14:07 GMT

Hello,

I am looking to add at least 4 featured blog posts from a specific tag/category to a website page. I have a module for this but I have two issues:

1. Blog posts 1 and 2 appear horizontally, next to each other. When I increase the number of blog posts from the default of 2 to 4, blog post 3 appears indented under post 1, and blog post 4 appears under post 3. What I'd like to see is blog post 3 appear without the indent under post 1 and post 4 appear directly under post 2.

2. How do I add pagination so that users can see additional posts within that category? I want 4 posts to be featured on that page but want the user to be able to see all available posts.

Below is the my current module code. Any help would be greatly appreciated.

<div class="overlapping-div-wrapper" style="background-color: rgba({{ module.overlapping_bg_color.color|convert_rgb }},{{ module.overlapping_bg_color.opacity/100 }});">
<div class="container">
<div>
<h2 class="overlapping-div-title-white">
{{ module.heading }}
</h2>
</div>
<div class="overlapping-div-container">
{% if module.multiple_tags %}
{% set posts = blog_recent_tag_posts('44639786360', [module.tag_field, module.tag_2], 2) %}
{% else %}
{% set posts = blog_recent_tag_posts('44639786360', [module.tag_field], 3) %}
{% endif %}
{% for post in posts %}
<div class="span6">
{% if post.featured_image %}
<div class="overlapping-div-image-2" style="background-image:url('{{ post.featured_image }}');">
</div>
{% else %}
<div class="overlapping-div-image-2" style="background-image:url('{{ module.generic_image.src }}');">
</div>
{% endif %}
<div class="overlapping-div-text-2">
<a href="{{ post.absolute_url }}"><h3>{{ post.name }}</h3></a>
<p style="margin-bottom: 40px!important;">{{ post.post_list_content|striptags|truncate(150, breakword=False, end='...') }}</p>
<a class="related_blogs_cta" href="{{post.absolute_url}}">Read More</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>

Re: Adding Blog Posts w/ Pagination To Website Page

dennisedson — Wed, 20 Apr 2022 00:55:05 GMT

@Anton , any thoughts?

@eslobrown , do you have an example link?

Re: Adding Blog Posts w/ Pagination To Website Page

eslobrown — Wed, 20 Apr 2022 01:35:29 GMT

Thanks for the reply @dennisedson. Following is a link to the Hubspot preview page: https://tinyurl.com/eb9fkh94

As you can see (on desktop, at least), the third post appears indented under the first post, while the 4th post appears under the 3rd, when it should appear to the right of the third.

I’d settle for just getting the alignment of the four posts right here without the pagination as we can just link to the second page of the blog tag page (https://tinyurl.com/3nvp2jwt), when available.

Thanks again!

Re: Adding Blog Posts w/ Pagination To Website Page

dennisedson — Wed, 20 Apr 2022 17:03:23 GMT

@eslobrown

In my opinion, the best way to tackle this is by using css's flex rule.

Here is what I would add (for desktop, you would make changes as you reduce screen size

On the container:

.overlapping-div-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

on the items:

.overlapping-div-container .span6 { width: calc(50% - 1rem); margin: 0; background: #fff; }

This is how it looks for me with that code:

and style away 🙂

Re: Adding Blog Posts w/ Pagination To Website Page

eslobrown — Wed, 20 Apr 2022 18:15:20 GMT

@dennisedson, really appreciate the reply. Unfortunately, even with your help, this is a bit outside my scope so I'm going to be reaching out to a professional developer for help. Feel free to reach out directly if you have someone you'd recommend.

Thanks again.

topic Re: Adding Blog Posts w/ Pagination To Website Page in CMS Development

Adding Blog Posts w/ Pagination To Website Page

Re: Adding Blog Posts w/ Pagination To Website Page

Re: Adding Blog Posts w/ Pagination To Website Page

Re: Adding Blog Posts w/ Pagination To Website Page

Re: Adding Blog Posts w/ Pagination To Website Page