CMS Development

CSarzana
Participant | Elite Partner
Participant | Elite Partner

Limit listing articles in blog homepage

SOLVE

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">&nbsp;</a>
								{% endif %}
								{% if blog_author.linkedin %}
								<a href="{{ blog_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">&nbsp;</a>
								{% endif %}
								{% if blog_author.twitter %}
								<a href="{{ blog_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">&nbsp;</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">&nbsp;</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>



0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Limit listing articles in blog homepage

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

8 Replies 8
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Limit listing articles in blog homepage

SOLVE

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

0 Upvotes
CSarzana
Participant | Elite Partner
Participant | Elite Partner

Limit listing articles in blog homepage

SOLVE

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

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Limit listing articles in blog homepage

SOLVE

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
natsumimori
Community Manager
Community Manager

Limit listing articles in blog homepage

SOLVE

Hi @CSarzana ,

 

Thank you for reaching out to the Developers Forum!

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

0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Limit listing articles in blog homepage

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
BRichards
Member

Limit listing articles in blog homepage

SOLVE

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?

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Limit listing articles in blog homepage

SOLVE

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
BRichards
Member

Limit listing articles in blog homepage

SOLVE
Thank you for the update.