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 %} #}
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<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 %}
<!-- Blog category page -->
{% 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>