# Hiding the first 2 blog posts

**URL:** <https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670>\
**Category:** CMS Development\
**Tags:** javascript, html\
**Created:** [December 16, 2021, 2:51pm UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670 "2021-12-16T14:51:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MClarke12](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@MClarke12](https://community.hubspot.com/u/MClarke12)\
**Post date:** [December 16, 2021, 2:51pm UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/1 "2021-12-16T14:51:54Z")

</div>

Hi there!

On my blog page I’ve taken the first 2 blog posts and made them as simple cards within my hero at the top of the page, but I want to hide them from the actual blog listings. I managed to hide them using a function but when I did they were hidden but 2 blank spots appeared at the bottom as it didn’t pull the next 2 blogs from the next page. Is there anyway I can hide the 2 blog posts before the sorting of blogs per page is done to avoid these 2 empty spaces!

 ![Screenshot 2021-12-16 144742.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/4/d479549830ba434f4931b0d267d0d143b894e9d0.jpeg)

attached above example of what I’m trying to achieve!

Thank you!

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [December 16, 2021, 3:56pm UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/2 "2021-12-16T15:56:38Z")

</div>

Hello @MClarke12 ,

[here](https://community.hubspot.com/t5/CMS-Development/How-to-get-blog-post-which-is-start-from-second-blog-post-and/td-p/254568) is a similar post from @dennisedson .  
And here is a code example:

```lia-code-sample
{% set posts = blog_recent_posts('default', 5 ) %}
{% for post in posts %}
 {% if loop.index > 1 %}
<div class="blog-main">
<div class="feature-img-blogs">
<p class="icons"><a href="{{ post.absolute_url }}"><img src="{{ post.featured_image }}" alt="{{ post.name }}"></a></p>
</div>
<div class="post-name-blogs">
<h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
</div>
</div>
 {% endif %}
{% endfor %}

```

The only you must do is to change the 1 to 2 in the code i think.  
I hope this will help  
Best regards,

Özcan Eser

---

<div class="post-metadata">

**Author:** ![MClarke12](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@MClarke12](https://community.hubspot.com/u/MClarke12)\
**Post date:** [December 16, 2021, 4:23pm UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/3 "2021-12-16T16:23:52Z")

</div>

```lia-code-sample
 {# Blog listing #}
 {% set posts = blog_recent_posts('default', 5 ) %}
 {% for post in posts %}
 {% if loop.index > 2 %}

 {% for content in contents %}

 <article class="blog-index__post-wrapper">
 <div class="blog-index__post">
 {% if content.featured_image and group.use_featured_image_in_summary %}
 <a class="blog-index__post-image" 
 style="background-image: url('{{ content.featured_image }}');" 
 href="{{ content.absolute_url }}">
 </a>
 {% endif %}
 <div class="blog-index__post-content">
 <div>
 {% set featured_tag = content.topic_list | first %}
 {% if featured_tag %}
 <span class="blog-index__post-preheader">{{ featured_tag }}</span>
 {% endif %}
 <h3><a href="{{ content.absolute_url }}">{{ content.name }}</a></h3>
 {% if content_group.show_summary_in_listing %}
 <p>{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
 {% endif %}
 </div>
 <div class="blog-index__post-meta" style="display:none">
 <span class="blog-index__post-author">
 {{ content.blog_post_author }}
 </span>
 <span class="blog-index__post-date">
 {{ content.publish_date | datetimeformat('%b %e, %Y') }}
 </span>
 </div>
 </div>
 </div>
 </article>
 {% endfor %}

 {% endif %}
{% endfor %}
 {# End blog listing #}

```

This is how my Blog posting logic works, have I done this incorrectly here? Can’t seem to get it to work

---

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [December 17, 2021, 8:59am UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/4 "2021-12-17T08:59:32Z")

</div>

Hi @MClarke12, in your code you are looping through blog posts twice, which is unnecessary. Try something like this:

```lia-code-sample
{# Blog listing #}
 {% set posts = blog_recent_posts('default', 8 ) %}
 {% for post in posts %}
 {% if loop.index > 2 %}

 <article class="blog-index__post-wrapper">
 <div class="blog-index__post">
 {% if post.featured_image and group.use_featured_image_in_summary %}
 <a class="blog-index__post-image" 
 style="background-image: url('{{ post.featured_image }}');" 
 href="{{ post.absolute_url }}">
 </a>
 {% endif %}
 <div class="blog-index__post-content">
 <div>
 {% set featured_tag = post.topic_list | first %}
 {% if featured_tag %}
 <span class="blog-index__post-preheader">{{ featured_tag }}</span>
 {% endif %}
 <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
 {% if content_group.show_summary_in_listing %}
 <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
 {% endif %}
 </div>
 <div class="blog-index__post-meta" style="display:none">
 <span class="blog-index__post-author">
 {{ post.blog_post_author }}
 </span>
 <span class="blog-index__post-date">
 {{ post.publish_date | datetimeformat('%b %e, %Y') }}
 </span>
 </div>
 </div>
 </div>
 </article>

 {% endif %}
 {% endfor %}
 {# End blog listing #}

```

Since you want to hide the first 2 articles but still show 6 more article cards, you have to get 8 blog posts from blog\_recent\_posts.

Then, loop through those posts and start displaying content after the second element.

By doing this, your first two elements will not show while the other six will.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![MClarke12](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@MClarke12](https://community.hubspot.com/u/MClarke12)\
**Post date:** [December 17, 2021, 11:56am UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/5 "2021-12-17T11:56:35Z")

</div>

Hi thank you for this! It’s almost perfect but page 1 and 2 are showing the same 6 blog posts? I’ll mark this as solution but if you could see what might be causing both pages to just display the same 6 will be really greatful!!!

---

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [December 17, 2021, 1:55pm UTC](https://community.hubspot.com/t/hiding-the-first-2-blog-posts/48670/6 "2021-12-17T13:55:49Z")

</div>

@MClarke12 in that case you don’t need the blog\_recent\_posts functionality, you can use the variable {{contents}} for that and loop through all articles in your blog.

Then add some variables to work as “offset” when you are in other pages and use it as condition for your loop, something like this:

```lia-code-sample
{# Blog listing #}

 {% set page_offset = current_page_num - 1 %} {# -1 if it starts at 1 #}
 {% set initial_offset = page_offset * 2 %} {# the post number it will start displaying #}
 {% set final_offset = initial_offset + 6 %} {# the last post it will display #}

 {% for post in contents %}
 {% if loop.index > initial_offset and loop.index < final_offset %}

 <article class="blog-index__post-wrapper">
 <div class="blog-index__post">
 {% if post.featured_image and group.use_featured_image_in_summary %}
 <a class="blog-index__post-image" 
 style="background-image: url('{{ post.featured_image }}');" 
 href="{{ post.absolute_url }}">
 </a>
 {% endif %}
 <div class="blog-index__post-content">
 <div>
 {% set featured_tag = post.topic_list | first %}
 {% if featured_tag %}
 <span class="blog-index__post-preheader">{{ featured_tag }}</span>
 {% endif %}
 <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
 {% if content_group.show_summary_in_listing %}
 <p>{{ post.meta_description | default(post.post_summary, true) | truncatehtml(150, '...', false) }}</p>
 {% endif %}
 </div>
 <div class="blog-index__post-meta" style="display:none">
 <span class="blog-index__post-author">
 {{ post.blog_post_author }}
 </span>
 <span class="blog-index__post-date">
 {{ post.publish_date | datetimeformat('%b %e, %Y') }}
 </span>
 </div>
 </div>
 </div>
 </article>

 {% endif %}
 {% endfor %}
 {# End blog listing #}

```

Please use the previous code as idea, don’t just copy&paste it because I didn’t try it in a live example 🙂