topic Re: Create a grid system rendering out all posts but allow one to be customised in CMS Development

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

benbagley — Wed, 02 Jan 2019 19:24:56 GMT

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.

Any help is appreciated.

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

jennysowyrda — Fri, 11 Jan 2019 21:13:41 GMT

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

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

Stephanie-OG — Tue, 15 Jan 2019 01:03:53 GMT

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!

HubSpot Design / Development

Website | Contact

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

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

benbagley — Wed, 06 Feb 2019 12:30:51 GMT

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

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

Stephanie-OG — Wed, 06 Feb 2019 13:13:32 GMT

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!

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

benbagley — Wed, 06 Feb 2019 13:55:43 GMT

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

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

Stephanie-OG — Thu, 07 Feb 2019 15:23:16 GMT

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