Create a grid system rendering out all posts but allow one to be customised
SOLVE
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
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.
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.
Create a grid system rendering out all posts but allow one to be customised
SOLVE
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.
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.
Create a grid system rendering out all posts but allow one to be customised
SOLVE
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.