Insert featured posts at the top of the listing

Developer Support CMS Development
1

Hi guys,

I have a blog listing page. Blog posts are displayed based on the date of publication from the most recent to the oldest one. I want to display some specific articles on top of the most recent articles. I followed the instructions given in previous tickets, adding a “featured” tag to the articles I want to display on top of the listing page,. Then, based on the HubSpot documentation, I added the code snippet linked to the blog_recent_tag_posts (see below).

It should be ok, but it doesn’t display the post with the “featured” tag on top of the listing. Any guess to resolve my problem ?

Thank you !

{% extends “../layouts/base-blog-listing.html” %}
{% block body %}
<div class=“blog-listing”>
{% if blog_author %}
{# Author Block Listing - You can manage it here #}
<div class=“section hero-section”>
<div class=“container”>
<div class=“row”>
<div class=“col-md-8 offset-md-2”>
<h1 class=“mb-2 text-center”>{{ blog_author.display_name }}</h1>
<p class=“text-center”>{{ blog_author.bio }}</p>
</div>
</div>
</div>
</div>
{% elif tag %}
{# Tag Listing - You can manage it here #}
<div class=“hero-classic-listing position-relative z-lg”>
<div class=“container-xl”>
<ul itemscope itemtype=“BreadcrumbList - Schema.org Type” class=“breadcrumb mb-3”>
<li itemprop=“itemListElement” itemscope itemtype=“ListItem - Schema.org Type”>
{% if group.language.languageTag == “en” %}
<a itemprop=“item” href=“/”><span itemprop=“name”>Home</span></a>
{% else %}
<a itemprop=“item” href=“/”><span itemprop=“name”>Accueil</span></a>
{% endif %}
<meta itemprop=“position” content=“1” />
</li>
<li itemprop=“itemListElement” itemscope itemtype=“ListItem - Schema.org Type”>
{% if group.language.languageTag == “en” %}
<a itemprop=“item” href=“https://blog.drivequant.com/”><span itemprop=“name”>Blog</span></a>
{% else %}
<a itemprop=“item” href=“DriveQuant - Le blog de l'assurance connectée”><span itemprop=“name”>Blog</span></a>
{% endif %}
<meta itemprop=“position” content=“2” />
</li>
</ul>
</div>
<div id=“” class=“hero-blog-listing pt-2 pt-lg-6 pb-0”>
<div class=“container”>
<div class=“row”>
<div class=“col-md-6”>
<div class=“wrapper-img d-flex align-items-center justify-content-center bg-white mb-1”>
<img class=“img-fluid lazy loaded”
src=“https://blog.drivequant.com/hubfs/2021%20-%20Website/Icons/Blog/Vector.svg”>
</div>

<div class=“title mb-2”>
<h1>{#{{ page_meta.html_title|split(’ | ‘)|last|regex_replace(“[^a-zA-Z]”, “”) }} #}
{{tag|replace(’-‘,’ ')|capitalize}}
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=“listing-blog position-relative z-lg pt-6”>
<div class=“container”>

{{ blog_recent_tag_posts(“default”, “featured”, 5) }}

{% set tag_posts = blog_recent_tag_posts(“default”, [“featured”], 3, “AND”) %}

{% for tag_post in tag_posts %}

<div class=“post-title”>{{ tag_post.name }}</div>

{% endfor %}

{% for post in contents %}
{% if loop.index == 1 %}
<div
class=“featured-post post d-flex flex-column flex-lg-row justify-content-md-between position-relative rounded bg-white p-2”>
<a class=“post-link d-block rounded overflow-hidden mr-md-2 mr-lg-3” href=“{{ post.absolute_url }}”>
<div class=“position-relative post-img rounded overflow-hidden”>
<img class=“img-fluid lazy fit-cover”
src=“data&colon;image/svg+xml,%3Csvg xmlns=‘SVG namespace’ viewBox=‘0 0 {{ post.featured_image.width }} {{ post.featured_image.height }}’%3E%3C/svg%3E”
data-src=“{{ post.featured_image }}” alt=“{{ post.featured_image_alt_text }}” />
</div>
</a>
<div class=“content-wrapper d-flex flex-column justify-content-between”>
<div>
<div class=“container-tags mt-1 md-md-0”>
{% for tag in post.tag_list %}
<a class=“label text-blue sm” href=“{{ blog_tag_url(group.id, tag.slug) }}”>{{
tag.name
}}</a>
{% if not loop.last %} <span class=“text-blue”> - </span> {% endif %}
{% endfor %}
</div>
<p class=“title h3”>
{{ post.name }}
</p>
<p class=“description dark”>{{ post.meta_description|striptags|truncatehtml(235) }}</p>
</div>
<div class=“bottom d-flex justify-content-between”>
<p class=“text-blue”>{{post.publish_date|datetimeformat(‘%d/%m/%Y’)}}</p>
<p class=“btn inline”>{% if group.language.languageTag == “en” %}Read
article{% else %}Lire l’article{%
endif %}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class=“pt-6 pb-3”>
<div class=“container”>
<div class=“row”>
<div class=“col-lg-2”>
{% module “module_16800802635652” path=“/DriveQuant/modules/search-input”, label=“Personalized search input” %}
{% set my_tags = blog_tags(‘default’, 250) %}
<div class=“tags d-flex flex-row flex-lg-column my-2 mt-lg-4”>
<div class=“tag-wrapper is-selected mr-1 mr-lg-0”>
{% if group.language.languageTag == “en” %}
<a class=“label sm text-grey d-block text-uppercase text-decoration-none py-1”
href=“https://blog.drivequant.com/”>All</a>
{% else %}
<a class=“label sm text-grey d-block text-uppercase text-decoration-none py-1”
href=“DriveQuant - Le blog de l'assurance connectée”>Tous</a>
{% endif %}
</div>
{% for item in my_tags|sort(False, False, “name”) %}
<div class=“tag-wrapper”>
<a class=“label sm text-grey d-block text-decoration-none text-uppercase py-1 mr-1 mr-lg-0”
href=“{{ blog_tag_url(group.id, item.slug) }}”>{{ item
}}</a>
</div>
{% endfor %}
</div>
</div>
<div class=“col-lg-10”>
<div class=“list d-flex flex-column flex-md-row justify-content-md-between flex-wrap”>
{% for post in contents %}
{% if loop.index > 1 %}
<div
class=“single-post d-flex flex-column justify-content-between post bg-light-grey position-relative rounded mb-2 p-2”>
<a class=“post-link d-block” href=“{{ post.absolute_url }}”>
<div class=“position-relative post-img rounded overflow-hidden”>
<img class=“img-fluid lazy fit-cover”
src=“data&colon;image/svg+xml,%3Csvg xmlns=‘SVG namespace’ viewBox=‘0 0 {{ post.featured_image.width }} {{ post.featured_image.height }}’%3E%3C/svg%3E”
data-src=“{{ post.featured_image }}” alt=“{{ post.featured_image_alt_text }}” />
</div>
</a>
<div class=“content-wrapper d-flex flex-column justify-content-between h-100”>
<div>
<div class=“container-tags mt-1”>
{% for tag in post.tag_list %}
<a class=“label text-blue sm” href=“{{ blog_tag_url(group.id, tag.slug) }}”>{{
tag.name
}}</a>
{% if not loop.last %} <span class=“text-blue”> - </span> {% endif %}
{% endfor %}
</div>
<p class=“title h4”>
{{ post.name }}
</p>
</div>
<div class=“bottom d-flex justify-content-between mt-4”>
<p class=“text-blue”>{{post.publish_date|datetimeformat(‘%d/%m/%Y’)}}</p>
<p class=“btn inline”>{% if group.language.languageTag == “en” %}Read
article{% else %}Lire l’article{%
endif %}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% else %}
<!--Classic Listing - You can manage it here -->
<div class=“hero-classic-listing position-relative z-lg”>
<div class=“container-xl”>
<ul itemscope itemtype=“BreadcrumbList - Schema.org Type” class=“breadcrumb mb-3”>
<li itemprop=“itemListElement” itemscope itemtype=“ListItem - Schema.org Type”>

{% if group.language.languageTag == “en” %}
<a itemprop=“item” href=“https://www.drivequant.com/”><span itemprop=“name”>Home</span></a>
{% else %}
<a itemprop=“item” href=“DriveQuant | Experts de la Télématique Smartphone”><span itemprop=“name”>Accueil</span></a>
{% endif %}
<meta itemprop=“position” content=“1” />
</li>
<li itemprop=“itemListElement” itemscope itemtype=“ListItem - Schema.org Type”>
{% if group.language.languageTag == “en” %}
<a itemprop=“item” href=“https://blog.drivequant.com/”><span itemprop=“name”>Blog</span></a>
{% else %}
<a itemprop=“item” href=“DriveQuant - Le blog de l'assurance connectée”><span itemprop=“name”>Blog</span></a>
{% endif %}
<meta itemprop=“position” content=“2” />
</li>
</ul>
</div>
{% module “module_16373132715831” path=“/DriveQuant/modules/hero-blog-listing”, label=“hero-blog-listing” %}
</div>
<div class=“listing-blog position-relative z-lg pt-6”>
<div class=“container”>
{% for post in contents %}
{% if loop.index == 1 %}
<div
class=“featured-post post d-flex flex-column flex-lg-row justify-content-md-between position-relative rounded bg-white p-2”>
<a class=“post-link d-block rounded overflow-hidden mr-md-2 mr-lg-3” href=“{{ post.absolute_url }}”>
<div class=“position-relative post-img rounded overflow-hidden”>
<img class=“img-fluid lazy fit-cover”
src=“data&colon;image/svg+xml,%3Csvg xmlns=‘SVG namespace’ viewBox=‘0 0 {{ post.featured_image.width }} {{ post.featured_image.height }}’%3E%3C/svg%3E”
data-src=“{{ post.featured_image }}” alt=“{{ post.featured_image_alt_text }}” />
</div>
</a>
<div class=“content-wrapper d-flex flex-column justify-content-between”>
<div>
<div class=“container-tags mt-1 md-md-0”>
{% for tag in post.tag_list %}
<a class=“label text-blue sm” href=“{{ blog_tag_url(group.id, tag.slug) }}”>{{
tag.name
}}</a>
{% if not loop.last %} <span class=“text-blue”> - </span> {% endif %}
{% endfor %}
</div>
<p class=“title h3”>
{{ post.name }}
</p>
<p class=“description dark”>{{ post.post_summary|striptags|truncatehtml(235) }}</p>
</div>
<div class=“bottom d-flex justify-content-between”>
<p class=“text-blue”>{{post.publish_date|datetimeformat(‘%d/%m/%Y’)}}</p>
<p class=“btn inline”>{% if group.language.languageTag == “en” %}Read
article{% else %}Lire l’article{%
endif %}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class=“pt-6 pb-3”>
<div class=“container”>
<div class=“row”>
<div class=“col-lg-2”>
{% module “module_16800802635652” path=“/DriveQuant/modules/search-input”, label=“Personalized search input” %}
{% set my_tags = blog_tags(‘default’, 250) %}
<div class=“tags d-flex flex-row flex-lg-column my-2 mt-lg-4”>
<div class=“tag-wrapper is-selected mr-1 mr-lg-0”>
{% if group.language.languageTag == “en” %}
<a class=“label sm text-grey d-block text-uppercase text-decoration-none py-1”
href=“https://blog.drivequant.com/”>All</a>
{% else %}
<a class=“label sm text-grey d-block text-uppercase text-decoration-none py-1”
href=“DriveQuant - Le blog de l'assurance connectée”>Tous</a>
{% endif %}
</div>
{% for item in my_tags|sort(False, False, “name”) %}
<div class=“tag-wrapper”>
<a class=“label sm text-grey d-block text-decoration-none text-uppercase py-1 mr-1 mr-lg-0”
href=“{{ blog_tag_url(group.id, item.slug) }}”>{{ item
}}</a>
</div>
{% endfor %}
</div>
</div>
<div class=“col-lg-10”>
<div class=“list d-flex flex-column flex-md-row justify-content-md-between flex-wrap”>
{% for post in contents %}
{% if loop.index > 1 %}
<div
class=“single-post d-flex flex-column justify-content-between post bg-light-grey position-relative rounded mb-2 p-2”>
<a class=“post-link d-block” href=“{{ post.absolute_url }}”>
<div class=“position-relative post-img rounded overflow-hidden”>
<img class=“img-fluid lazy fit-cover”
src=“data&colon;image/svg+xml,%3Csvg xmlns=‘SVG namespace’ viewBox=‘0 0 {{ post.featured_image.width }} {{ post.featured_image.height }}’%3E%3C/svg%3E”
data-src=“{{ post.featured_image }}” alt=“{{ post.featured_image_alt_text }}” />
</div>
</a>
<div class=“content-wrapper d-flex flex-column justify-content-between h-100”>
<div>
<div class=“container-tags mt-1”>
{% for tag in post.tag_list %}
<a class=“label text-blue sm” href=“{{ blog_tag_url(group.id, tag.slug) }}”>{{
tag.name
}}</a>
{% if not loop.last %} <span class=“text-blue”> - </span> {% endif %}
{% endfor %}
</div>
<p class=“title h4”>
{{ post.name }}
</p>
</div>
<div class=“bottom d-flex justify-content-between mt-4”>
<p class=“text-blue”>{{post.publish_date|datetimeformat(‘%d/%m/%Y’)}}</p>
<p class=“btn inline”>{% if group.language.languageTag == “en” %}Read
article{% else %}Lire l’article{%
endif %}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Pagination - You can manage it here -->
</div>
{% endif %}
<div class=“container”>
{% if contents.total_page_count > 1 %}
<nav class=“blog-pagination d-flex justify-content-end pb-3”>
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
{% if current_page_num > 1 %}
<a class=“previous d-flex justify-content-center align-items-center text-decoration-none mr-1”
href=“{{ blog_page_link(last_page_num) }}”>
</a>
{% endif %}
<div class=“container-pagination-link d-flex justify-content-center align-items-center”>
{% for page in page_list %}
{% set this_page = current_page_num + page + offset %}
{% if this_page > 0 and this_page <= contents.total_page_count %} <a
class=“blog-pagination__number-link d-flex justify-content-center align-items-center text-decoration-none {{ "
blog-pagination__link--active” if this_page==current_page_num }}" href=“{{ blog_page_link(this_page) }}”>
{{
this_page }}</a>
{% endif %}
{% endfor %}
</div>
{% if current_page_num < contents.total_page_count %}<a
class=“next d-flex justify-content-center align-items-center text-decoration-none ml-1 {{ "
blog-pagination__next-link--disabled” if !next_page_num }}" href=“{{ blog_page_link(current_page_num + 1) }}”>
</a>
{% endif %}
</nav>
{% endif %}
</div>

</div>
{% endblock body %}

2

Hi @Valentin_3 ,
Hope you are well.
For looping through the featured posts, you can use:

 {% set tag_posts = blog_recent_tag_posts("default", "featured", 3) %}
 {% for tag_post in tag_posts %}
 <div class="post-title">{{ tag_post.name }}</div>
 {% endfor %}

Are you then trying to remove these articles from the main section to avoid duplicates ? Or is this functionality ok ?
If so, you will have to create an array of the featured ids and when looping through the post, check that the post is not in the featured ids.
Hope that helps and if you need any more help on it, feel free to reach out.