Hubspot Blog - Split styles of how posts are listed


#1

Hi there,

I am looking to see if its possible to split how my blog posts display on the main blog listings page.

I was looking to display the first three most recent posts horizontally and then any post after the first three vertically. Is this possible?

Thanks in advance.

K


#2

You could do this with CSS by targeting nth-child for the styling. That might get a little complicated if you aren’t familiar with how they work.

You could also edit your blog listing template file to check the index of the loop. Change the class on the listing piece to style it differently.

{% for content in contents %}
    {% if loop.index < 4 %}
          <div class="post-item horizontal-item"> <!---all the other listing html here --></div>
   {% else %}
          <div class="post-item vertical-item"> <!---all the other listing html here --></div>            
    {% endif %}
{% endfor %}

You could also wrap this up into a much smaller amount of code if you wanted to, if all the content was the same

{% for content in contents %}
    <div class="post-item {% if loop.index < 4 %}horizontal-item{% else %}vertical-item{% endif %}">
        <!---all the other listing html here -->
    </div>            
{% endfor %}

#3

Thank you for your detailed reply Nick, I really appreciate it.

Unfortunately the template works with a sidebar also, so i would run into complications with the layout.

It is currently split between two blog content areas to accommodate the sidebar:

(1st blog content area)
<-------ARTICLE 1--------> <-------ARTICLE 2--------> <-------ARTICLE 3-------->

(2nd blog content area)
<---------START OF VERTICAL ARTICLES--------------> <-------SIDEBAR-------->

Could you see a workaround for this?

Best Regards,

Kev


#4

Can you provide a link so I can check this out?

If I’m reading this right, you will need to do two calls to your blog. You might want to separate them by topics so you can make this happen, otherwise you are going to have a really crazy time with this layout.