Limit listing articles in blog homepage

CSarzana — Tue, 04 May 2021 09:09:31 GMT

Hi there, I'm working on a blog listing template made by other developers.

What I need is to limit to 4 items the articles under the title "Articoli scelti per te".

I don't know how the loop.index works so I'm not able to do what I want.

Can someone help me, please?

Here is my page code:

<div class="blog-section"> <div class="blog-listing-wrapper cell-wrapper"> <div class="blog-section"> <div class="blog-listing-wrapper cell-wrapper"> {# simple_list_page indicates the "blog/all" page, which is a list of links to every blog post #} <div class="post-listing{% if simple_list_page %}-simple{% endif %}"> {% if blog_author %} <div class="hs-author-profile"> <h2 class="hs-author-name">{{ blog_author.display_name }}</h2> {% if blog_author.avatar %} <div class="hs-author-avatar"> <img src="{{ blog_author.avatar }}" alt="{{ blog_author.display_name }}"> </div> {% endif %} <div class="hs-author-bio">{{ blog_author.bio }}</div> {% if blog_author.has_social_profiles %} <div class="hs-author-social-section"> <span class="hs-author-social-label">Find me on:</span> <div class="hs-author-social-links"> {% if blog_author.facebook %} <a href="{{ blog_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook"> </a> {% endif %} {% if blog_author.linkedin %} <a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin"> </a> {% endif %} {% if blog_author.twitter %} <a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter"> </a> {% endif %} {% if blog_author.google_plus %} <a href="{{ blog_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus"> </a> {% endif %} </div> </div> {% endif %} </div> <h3 class="hs-author-listing-header">Recent Posts</h3> {% endif %} {% for content in contents %} {% if loop.index == '1' %} <div class="postTop disFlex fullwidth"> <div class="post-item" style="background:{% if content.post_list_summary_featured_image %}url({{ content.post_list_summary_featured_image }}) no-repeat center top/cover;{% else %}#e7e7e7{% endif %}"> {% if content.post_list_summary_featured_image %} <div class="hs-featured-image-wrapper"> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"> <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"> </a> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link top-of-link"> </a> </div> {% endif %} {% if not simple_list_page %} <div class="post-header"> <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% if content.topic_list %} <p id="hubspot-topic_data"> {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %} </div> <div class="psPosts"> <div class="popularPosts o2 fullwidth"> {% set pop_posts = blog_popular_posts('30597594664', 2) %} <h5>I più popolari</h5> {% for pp in pop_posts %} {# {% if loop.index > '1' and loop.index < '4' %} #} <div class="post-item no"> {% if pp.post_list_summary_featured_image %} <div class="hs-featured-image-wrapper fullwidth" style="background:{% if pp.post_list_summary_featured_image %}url({{ pp.post_list_summary_featured_image }}) no-repeat center top/cover;{% else %}#e7e7e7{% endif %}"> <a href="{{pp.absolute_url}}" title="" class="hs-featured-image-link"> <img src="{{ pp.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"> </a> <a href="{{pp.absolute_url}}" title="" class="hs-featured-image-link top-of-link"> </a> </div> {% endif %} {% if not simple_list_page %} <div class="post-header fullwidth"> <h2><a href="{{pp.absolute_url}}">{{ pp.name }}</a></h2> {% if pp.topic_list %} <p id="hubspot-topic_data"> {% for topic in pp.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{pp.absolute_url}}">{{ pp.name }}</a></h2> {% endif %} </div> {# {% endif %} #} {% endfor %} </div> <div class="pSubscribe fullwidth"> <h2>Iscriviti al nostro blog</h2> <h6>Le novità e i migliori suggerimenti su marketing, vendite e servizi.</h6> {# {% blog_subscribe "subscribe_designers_blog" select_blog='30597594664', title='Subscribe to the Designers Blog', response_message='Thanks for Subscribing!', label='Blog Email Subscription', overrideable=False %} #}  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "6823630", formId: "b2953687-f500-47e1-a2b4-61f4e06c4094", css: '' }); </script> </div> </div> </div> {# {% elif loop.index > '1' and loop.index < '4' %} #} {% elif loop.index == '5' %} <div class="post-item showmeLast" style="background:{% if content.post_list_summary_featured_image %}url({{ content.post_list_summary_featured_image }}) no-repeat center top/cover;{% else %}#e7e7e7{% endif %}"> {% if content.post_list_summary_featured_image %} <div class="hs-featured-image-wrapper"> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"> <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"> </a> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link top-of-link"> </a> </div> {% endif %} {% if not simple_list_page %} <div class="post-header"> <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% if content.topic_list %} <p id="hubspot-topic_data"> {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %} </div> {% elif loop.index > '5' and loop.index <= '10' %} {% if loop.index == '6' %} <h5 class="articoli">Articoli scelti per te</h5> {% endif %} <div class="post-item simpleListing"> {% if not simple_list_page %} <div class="post-header fullwidth"> <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% if content.topic_list %} <p id="hubspot-topic_data"> {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %} </div> {% else %} <div class="post-item no"> {% if content.post_list_summary_featured_image %} <div class="hs-featured-image-wrapper fullwidth" style="background:{% if content.post_list_summary_featured_image %}url({{ content.post_list_summary_featured_image }}) no-repeat center top/cover;{% else %}#e7e7e7{% endif %}"> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"> <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"> </a> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link top-of-link"> </a> </div> {% endif %} {% if not simple_list_page %} <div class="post-header fullwidth"> <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% if content.topic_list %} <p id="hubspot-topic_data"> {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %} </div> {% endif %} {% endfor %} </div> <div class="blogListing tagShow fullwidth"> {% for content in contents %} <div class="post-item no"> {% if content.post_list_summary_featured_image %} <div class="hs-featured-image-wrapper fullwidth" style="background:{% if content.post_list_summary_featured_image %}url({{ content.post_list_summary_featured_image }}) no-repeat center top/cover;{% else %}#e7e7e7{% endif %}"> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link"> <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}"> </a> <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link top-of-link"> </a> </div> {% endif %} {% if not simple_list_page %} <div class="post-header fullwidth"> <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% if content.topic_list %} <p id="hubspot-topic_data"> {% for topic in content.topic_list %} <a class="topic-link" href="{{ blog_tag_url(group.id, topic.slug) }}"> {{ topic.name }}</a> {% if not loop.last %}{% endif %} {% endfor %} </p> {% endif %}  {% if is_listing_view %} <p id="hubspot-topic_data" class="catpage-tag"> {% for t in contents_tags %} {% if t.slug == topic %} <a class="topic-link" href="{{ blog_tag_url(group.id, t.slug) }}"> {{ t.name }}</a> {% endif %} {% endfor %} </p> {% endif %} </div> {% else %} <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2> {% endif %} </div> {% endfor %} </div> {% if not simple_list_page %} <div class="blog-pagination fullwidth p50-0 textCenter"> {% if last_page_num %} <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a> {% endif %} {% if next_page_num %} <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a> {% endif %} </div> {% endif %} </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { if (window.location.href.indexOf("/tag") > -1) { $('body').addClass('showtags'); } if (window.location.href.indexOf("/author") > -1) { $('body').addClass('showAuthor'); $('body').addClass('showtags'); } }); </script>

Re: Limit listing articles in blog homepage

natsumimori — Wed, 05 May 2021 04:20:15 GMT

Hi @CSarzana ,

Thank you for reaching out to the Developers Forum!

@Kevin-C and @Theodor , would you mind sharing your advice for @CSarzana ?

Re: Limit listing articles in blog homepage

Kevin-C — Wed, 05 May 2021 13:29:20 GMT

Thanks @natsumimori

Hey @CSarzana

So you actually shouldn't need to modify any code for this!

If you navigate to Settings(cog) > Website > Blog > Templates,

about halfway down the page is a section titled "Listing Page" with a number field.

You can input the number of blog posts you would like to show on the list pages.

Re: Limit listing articles in blog homepage

CSarzana — Wed, 05 May 2021 13:42:03 GMT

Hi Kevin, thank you so much!

I didn't know it was so simple!

Sorry, but I'm quite new in hubspot templating and still learning how to work correctly!

Thanks,

Camilla

Re: Limit listing articles in blog homepage

Kevin-C — Wed, 05 May 2021 14:16:10 GMT

Nothing to be sorry for! Lots to be learned and little time to learn it haha!

Re: Limit listing articles in blog homepage

webdew — Thu, 06 May 2021 12:22:10 GMT

Hi @CSarzana,

You have to add the below code:
Please add Blow the Code:

{% if loop.index < 4 %}{% endif %}.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

I am sharing screenshot to set limit accordinly

https://prnt.sc/12il48w

Re: Limit listing articles in blog homepage

BRichards — Thu, 09 Jun 2022 16:18:35 GMT

In the settings page, is there a way to differentiate between mobile and desktop? Say 8 for desktop but only 4 for mobile, for example?

Re: Limit listing articles in blog homepage

Kevin-C — Fri, 10 Jun 2022 00:28:31 GMT

Hey @BRichards

Not that im aware of natively. This could be done using hubl with css or via the API, but it going to be a lot of work for something that might “devalue” your search engine rankings.

Re: Limit listing articles in blog homepage

BRichards — Fri, 10 Jun 2022 01:17:34 GMT

Thank you for the update.

topic Re: Limit listing articles in blog homepage in CMS Development

Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage

Re: Limit listing articles in blog homepage