Hiding the first 2 blog posts

[MClarke12]

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!

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

Thank you!

[Oezcan]

Hello @MClarke12 ,

here is a similar post from @dennisedson .
And here is a code example:

{% 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

[MClarke12]

 {# 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

[albertsg]

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

{# 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!

[MClarke12]

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!!!

[albertsg]

@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:

{# 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