Create a grid system rendering out all posts but allow one to be customised

Developer Support CMS Development
1

Hello,

I’m hoping someone can help me out with a small issue I’m having.

This is my first time using Hubspot and Hubl.

I’m creating a blog layout similar to Hubspot’s design, and I have almost everything in place, however, when rendering out the blog posts I want to be able to skip a block so I can customise what the text says.

For some context here is what I have so far

30dbdd140c606e43b96777c1287bf187.jpg
30dbdd140c606e43b96777c1287bf187.jpg3840×1080 198 KB

The third smaller box on the left (the box with the black blackground), I or someone else needs to be able to change this to whatever we like, but I still need all posts to be rendering in in correct order.

So ideally the layout should be

post 1 | post 2

-----------------------

custom | post 3

But I’m unsure how to go about this.

Currently I have the following

<section class="posts-grid"> 
{% set rec_posts = blog_recent_posts('default', 6) %}
{% for rec_post in rec_posts %}
 <article class="post {% cycle '','','horizontal-post','long-post','','' %}">
 {% if rec_post.post_list_summary_featured_image %}
 <img src="{{ rec_post.post_list_summary_featured_image }}" alt="{{ rec_post.featured_image_alt_text }}">
 {% endif %}

 <div class="blog-listing-info">
 <a href="{{ rec_post.absolute_url }}">
 <h2 class="blog-listing-title">
 {{ rec_post.name }}
 </h2>
 </a>

 <div class="{% cycle 'hidden','hidden','','hidden','hidden','hidden' %}">
 <a href="{{ rec_post.absolute_url }}" class="btn btn-white read-article-btn">Read article</a>
 </div>

 <p class="blog-listing-tag {% cycle '','','hidden','','','' %}">
 {% if rec_post.topic_list %}
 {% for topic in rec_post.topic_list %}
 <a href="{{ blog_tag_url(group.id, topic.slug) }}" class="topic-name">{{ topic.name }}.</a>{% if not loop.last %},{% endif %}
 {% endfor %}
 {% endif %}
 -
 {% set initialPostWords = rec_post.post_body|wordcount %}
 {% set calculatedPostWords = (initialPostWords/100) * 100 %}
 {% set finishedPostWords = calculatedPostWords|divide(300)|round(2) %}
 {% set number = finishedPostWords|round %}
 {% if number < 1 %}
 {% else %}
 {{ finishedPostWords|round }} minute read
 {% endif %}
 </p>
 </div>
 </article>
{% endfor %}
</section>

horizontal-post being the blue box that I want to be able to customise.

Any help is appreciated.

2

Hi @benbagley,

I want to pull in a few subject matter experts to see if they have any tips for you.

@Stephanie-OG, @tjoyce do you have any suggestions for @benbagley?

Thanks,
Jenny

3

Thanks @jennysowyrda !

Hi Ben,

I would probably use loop.index to break into the loop and do something differently with your third post, so you could have something like:

<section class="posts-grid"> 
{% set rec_posts = blog_recent_posts('default', 6) %}
{% for rec_post in rec_posts %}
 {% if loop.index == 3 %}
 <article>Your custom article</article>
 <article class="post {% cycle '','','horizontal-post','long-post','','' %}">
 ...
 </article>
 {% else %}
 <article class="post {% cycle '','','horizontal-post','long-post','','' %}">
 ...
 </article>
 {% endif %}
{% endfor %}
</section>

I hope that helps!

|300HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

4

So this works, but I still need to skip the first post in the list as well.

5

Hi Ben,

Skipping the first post in the list follows the same logic of using the loop.index and a conditional:

{% if loop.index > 1 %}

You could have something like:

<section class="posts-grid"> 
{% set rec_posts = blog_recent_posts('default', 6) %}
{% for rec_post in rec_posts %}
 {% if loop.index > 1 %}  {% if loop.index == 3 %}
 <article>Your custom article</article>
 <article class="post {% cycle '','','horizontal-post','long-post','','' %}">
 ...
 </article>
 {% else %}
 <article class="post {% cycle '','','horizontal-post','long-post','','' %}">
 ...
 </article>
 {% endif %}  {% endif %}{% endfor %}
</section>

There might be another solution without nesting loops, perhaps switching the

{% else %}

to an

{% elif loop.index > 1 %}

? If I’m not mistaken (I haven’t tested this), the nested loops option starts from the second post and so the “third” is the fourth post originally whereas in this case the third is actually the third and the remainder start from the second post.

Stephanie O’Gay Garcia

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

6

Yeah I figured it out, had to have two loops.

7

Hi Ben - I realised that I should also point out that when you’re doing the

{% if loop.index == 3 %}

it’s replacing that third post with what’s in there, so you’ll want to add the code for the different element as well as for the third post so that it’s not skipped.

I hope that makes sense!

Stephanie O’Gay Garcia

HubSpot Design / Development

Website | Contact