Filter blog content module according to blog tags/topics on listing template
lösung
Hi!
I would like to ask how can I able to filter the recent posts to this blog content template , currently this code will make all of the recent posts appear. We want to modify it by arranging it according to categry for example this type of topic.
Whiskey Content
Feature three articles
Tequila Content
Feature three articles
I have this type of filter set-up in one of ourr homepage, and tried to insert in below the blog-section div, but it seems won't work.
{% set topic_posts = blog_recent_topic_posts(4488098559, 'whiskey-content', 3) %}
<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 }}"> </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 %}
<div class="post-item">
{% if not simple_list_page %}
<a href="{{content.absolute_url}}">
<div class="post-body clearfix">
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}">
</div>
{% endif %}
<div class="custom-date">
{{ content.publish_date_local_time.strftime('%d') }}
{{ content.publish_date_local_time.strftime('%B') }}
</div>
<div class="post-header">
<h2>{{ content.name }}</h2>
</div>
<!--post summary-->
</div>
</a>
{% else %}
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<!-- Numbered Pagination -->
<div class="blog-pagination">
{% 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 %}
<div class="blog-pagination-left">
{% if contents.total_page_count > 5 %}
{% if current_page_num >= 4 %}
<a href="{{ blog_page_link(1) }}">1</a>
<a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
{% endif %}
{% endif %}
</div>
<div class="blog-pagination-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 {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
{% endif %}
{% endfor %}
</div>
<div class="blog-pagination-right">
{% if contents.total_page_count > 5 %}
{% if contents.total_page_count - current_page_num > 2 %}
<a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
<a href="{{ blog_page_link(contents.total_page_count) }}">{{ contents.total_page_count }}</a>
{% endif %}
{% endif %}
</div>
<div class="pager">
{% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}">« Previous</a>{% endif %}
{% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}">Next »</a>{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% set tag_posts = blog_recent_tag_posts('default', ['marketing', 'fun', 'inbound'], 3) %}
{% for tag_post in tag_posts %}
<div class="post-title">{{ tag_post.name }}</div>
{% endfor %}
Notice that the for loop from the Hubl docs example is almost exactly like the contents loop, except that it is looping through the "tag_posts" variable, which is holding feed you create when setting the "tag_posts" variable. This:
{% set tag_posts = blog_recent_tag_posts('default', ['marketing', 'fun', 'inbound'], 3) %}
sets the variable, and this:
{% for tag_post in tag_posts %}
<div class="post-title">{{ tag_post.name }}</div>
{% endfor %}
loops through the items in the variable.
You could modify the {% for content in contents %} loop to use the variable you create at the top of your code:
% set topic_posts = blog_recent_topic_posts(4488098559, 'whiskey-content', 3) %}
is at the top of your code, so replace contents with topic_post:
{% for content in contents topic_posts %}
{% endfor %}
and this would be the cleanest way to replace the default feed with your custom feed. However, this isn't the best option for working directly in your blog template, as you would lose some default functionality such as pagination, simple list view, native topic filter (www.website.com/blog/topic/topic-name) and etc. it is best to use the contents variable.
You can use both in a template though. You can also use conditional login to check for the type of view being requested to serve the contents loop for the specific view types, i.e. use the contents loop if a simple list view is being accessed but use custom feed functions if it is the main listing page. The best way to go about this will depend on the specifics of what you are trying to accomplish.
Try this. You have to place this into a custom module (call it custom blog list):
{#################################################}
{############### Macros ###############}
{#################################################}
{# -- Macro: renders post markup --
-- Loops selected blog to output post item markup -- #}
{% macro post_feed(x) %}
{# -- if "x" isn't "contents" change it to a custom feed -- #}
{% unless x == contents %}
{% set x = blog_recent_tag_posts('default', x, 5) %}
{% endunless %}
{% for content in x %}
{# -- post-item --
-- Outermost wrapper for your post items -- #}
<div class="post-item">
{# -- if not simple_list_page --
-- checking to see if uses is accessing a "simple list" version of your blog list -- #}
{% if not simple_list_page %}
{# -- post-item link --
-- wrapping every element in post item -- #}
<a href="{{content.absolute_url}}">
{# -- post-body --
-- uses loop item featured image, date, and name -- #}
<div class="post-body clearfix">
{# -- loop item image -- #}
{% if content.post_list_summary_featured_image %}
{# image wrapping div -- #}
<div class="hs-featured-image-wrapper">
{# -- image element -- #}
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}">
</div>
{% endif %}
{# -- date wrapping div -- #}
<div class="custom-date">
{# -- publish date "day" -- #}
{{ content.publish_date_local_time.strftime('%d') }}
{# -- publish date "month" -- #}
{{ content.publish_date_local_time.strftime('%B') }}
</div>
{# -- name h2 wrapping div -- #}
<div class="post-header">
{# -- h2 wrapping loop item name -- #}
<h2>{{ content.name }}</h2>
</div>
</div>
</a>
{% else %}
<h2 class="post-listing-simple"> <a href="{{content.absolute_url}}">{{ content.name }}</a> </h2>
{% endif %}
</div>
{% endfor %}
{% endmacro %}
{#################################################}
{############### Output ###############}
{#################################################}
<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 'topic' is true --
-- This code will ONLY show IF on a topic url (www.website.com/blog/topic/topic_name) #}
{% if topic %}
{# -- calling post_feed macro, sending blog contents to it -- #}
{{ post_feed(contents) }}
{# -- Else if 'topic' is not true --
-- This shows UNLESS on a topic url (www.website.com/blog/topic/topic_name) #}
{% else %}
{# -- calling post_feed macro, sending a topic slug to it -- #}
{{ post_feed('whiskey-content') }}
{{ post_feed('tequila-content') }}
{{ post_feed('air-water-show-content') }}
{{ post_feed('halloween-content') }}
{{ post_feed('new-years-content') }}
{{ post_feed('st-patricks-day-content') }}
{% endif %}
</div>
</div>
</div>
save the module. on the left side bar of the custom module editor scroll down until you see "Template Usage". Copy the "usage snippet". my looks like this:
{% module "module_156107096182818" path="/Khoatic_Modules/background Color test" %}
Go to the listing template editor of the blog content module in the blog template, delete every thing (or comment it out) and paste your custom module snippet.
I built a macro that takes one argument. if that argument is "contents" it will loop through the "contents" variable. Otherwise it will try to use that argument as a topic slug for filtering a custom feed. Notice how I call the macro several times with a unique topic slug each time.
{% set tag_posts = blog_recent_tag_posts('default', ['marketing', 'fun', 'inbound'], 3) %}
{% for tag_post in tag_posts %}
<div class="post-title">{{ tag_post.name }}</div>
{% endfor %}
Notice that the for loop from the Hubl docs example is almost exactly like the contents loop, except that it is looping through the "tag_posts" variable, which is holding feed you create when setting the "tag_posts" variable. This:
{% set tag_posts = blog_recent_tag_posts('default', ['marketing', 'fun', 'inbound'], 3) %}
sets the variable, and this:
{% for tag_post in tag_posts %}
<div class="post-title">{{ tag_post.name }}</div>
{% endfor %}
loops through the items in the variable.
You could modify the {% for content in contents %} loop to use the variable you create at the top of your code:
% set topic_posts = blog_recent_topic_posts(4488098559, 'whiskey-content', 3) %}
is at the top of your code, so replace contents with topic_post:
{% for content in contents topic_posts %}
{% endfor %}
and this would be the cleanest way to replace the default feed with your custom feed. However, this isn't the best option for working directly in your blog template, as you would lose some default functionality such as pagination, simple list view, native topic filter (www.website.com/blog/topic/topic-name) and etc. it is best to use the contents variable.
You can use both in a template though. You can also use conditional login to check for the type of view being requested to serve the contents loop for the specific view types, i.e. use the contents loop if a simple list view is being accessed but use custom feed functions if it is the main listing page. The best way to go about this will depend on the specifics of what you are trying to accomplish.
Filter blog content module according to blog tags/topics on listing template
lösung
@Jsum Thank you for the help, I already sort the tags according to the content we wish
to have.
My concern would be how do I use both of the templates since I would want to insert a link "view all articles" related the topic for example all the whiskey content https://news.besocialscene.com/topic/whiskey-content. I presume after I make the template live. I would not be able to use the existing template anymore and as what you have said I will lost the pagination as well?
'is_listing_view' is true if the user is looking at any version of the listing page for the blog. use this to have your listing layout and individual post in the same tempalte.
simple_list_page:
{% if simple_list_page %}{% endif %}
'simple_list_page' is true if the user goes to a blog link where the posts would be listed out in a simplified manner. I believe this applies to date filtered pages, topic filtered pages, all blogs, etc. I don't use this much so I'm a little rusty on its use.
using if/else logic you can configure your blog to use different methods for showing your posts:
{% if topic %}
{# for content in contents loop to show topic specific list with default hubspot blog features #}
{% else %}
{# custom blog feed #}
{% endif %}
You can combine, nest, and use these conditions multiple times in multiple places in a template. A good reference for this are the blog content markup examples in the HubL docs.
There is also a list of blog variables in the HubL docs, with descriptions.
You'll have to get creative with the logic, but I have built some pretty crazy listing pages so I'm sure you can do what you are wanting here.
Filter blog content module according to blog tags/topics on listing template
lösung
@Jsum , I really appreciate your help on this. I just want to ask a follow-up question. This code already works for the listing template, but when I tried to open the topic links the {% if topic %} {% endif %} won't run and would just view the listing template.
{% set whiskey_content = blog_recent_topic_posts(BlogIdNumber, 'whiskey-content', 3) %}
{% set tequila_content = blog_recent_topic_posts(BlogIdNumber, 'tequila-content', 3) %}
{% set air_water_show_content = blog_recent_topic_posts(BlogIdNumber, 'air-water-show-content', 3) %}
{% set halloween_content = blog_recent_topic_posts(BlogIdNumber, 'halloween-content', 3) %}
{% set new_years_content = blog_recent_topic_posts(BlogIdNumber, 'new-years-content', 3) %}
{% set st_patricks_day_content = blog_recent_topic_posts(BlogIdNumber, 'st-patricks-day-content', 3) %}
{% if is_listing_view %}
// This code here already works //
{% endif %}
{% if topic %}
<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 }}"> </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 %}
<div class="post-item">
{% if not simple_list_page %}
<a href="{{content.absolute_url}}">
<div class="post-body clearfix">
{% if content.post_list_summary_featured_image %}
<div class="hs-featured-image-wrapper">
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}">
</div>
{% endif %}
<div class="custom-date">
{{ content.publish_date_local_time.strftime('%d') }}
{{ content.publish_date_local_time.strftime('%B') }}
</div>
<div class="post-header">
<h2>{{ content.name }}</h2>
</div>
<!--post summary-->
</div>
</a>
{% else %}
<h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}
</div>
{% endfor %}
</div>
{% if not simple_list_page %}
<!-- Numbered Pagination -->
<div class="blog-pagination">
{% 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 %}
<div class="blog-pagination-left">
{% if contents.total_page_count > 5 %}
{% if current_page_num >= 4 %}
<a href="{{ blog_page_link(1) }}">1</a>
<a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
{% endif %}
{% endif %}
</div>
<div class="blog-pagination-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 {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
{% endif %}
{% endfor %}
</div>
<div class="blog-pagination-right">
{% if contents.total_page_count > 5 %}
{% if contents.total_page_count - current_page_num > 2 %}
<a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
<a href="{{ blog_page_link(contents.total_page_count) }}">{{ contents.total_page_count }}</a>
{% endif %}
{% endif %}
</div>
<div class="pager">
{% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}">« Previous</a>{% endif %}
{% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}">Next »</a>{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
It looks like you are trying to get use the {{ topic }} variable to recognize the feeds from your custom functions.
The {{ topic }} variable is set by the blog system. it is set to false unless you are on a topic url (www.website.com/blog/topic/topic_name). if on a topic url {{ topic }} equals the slug of the topic in the url. Also, the {% for content in contents %} loop will automatically filter your posts by the {{ topic }} when on a topic url.
I see that you are using the contents loop inside your topics condition. are the posts showing up filtered to the topic in the url?
I see. {{ is_listing_view }} is always true when you are on a listing page, whether your looking at a topic filtered list, an archive list, a simple list, or the default list. This variable is used to differentiate between a listing view and a post view:
{% if is_listing_view %}
{# All of your list specific markup goes here, even your {{topic}} logic. #}
{% else %}
{# your individual post markup goes here #}
{% endif %}
All of your listing specific markup should should in the true area of the {% if is_listing_view %} statement. Inside this condition you can create the logic to change the markup based on if filtering by topic or etc.
Filter blog content module according to blog tags/topics on listing template
lösung
@Jsum , really thank you , I am on the verge of pulling my hair. Now I get it why both of the templates appear when I am on the topic list url, for example the design here should be inside {% if topic %} , https://news.besocialscene.com/topic/whiskey-content what happened is that below it the code
{% if is_listing_view %}, still appears because the is_listing_view is still true and It still inside a topic list.
Do you know any alternative on how to separate both so that the when on topic list the the code inside the {% if is_listing_view %} disappears when on topic list?.
Try this. You have to place this into a custom module (call it custom blog list):
{#################################################}
{############### Macros ###############}
{#################################################}
{# -- Macro: renders post markup --
-- Loops selected blog to output post item markup -- #}
{% macro post_feed(x) %}
{# -- if "x" isn't "contents" change it to a custom feed -- #}
{% unless x == contents %}
{% set x = blog_recent_tag_posts('default', x, 5) %}
{% endunless %}
{% for content in x %}
{# -- post-item --
-- Outermost wrapper for your post items -- #}
<div class="post-item">
{# -- if not simple_list_page --
-- checking to see if uses is accessing a "simple list" version of your blog list -- #}
{% if not simple_list_page %}
{# -- post-item link --
-- wrapping every element in post item -- #}
<a href="{{content.absolute_url}}">
{# -- post-body --
-- uses loop item featured image, date, and name -- #}
<div class="post-body clearfix">
{# -- loop item image -- #}
{% if content.post_list_summary_featured_image %}
{# image wrapping div -- #}
<div class="hs-featured-image-wrapper">
{# -- image element -- #}
<img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{{ content.name }}">
</div>
{% endif %}
{# -- date wrapping div -- #}
<div class="custom-date">
{# -- publish date "day" -- #}
{{ content.publish_date_local_time.strftime('%d') }}
{# -- publish date "month" -- #}
{{ content.publish_date_local_time.strftime('%B') }}
</div>
{# -- name h2 wrapping div -- #}
<div class="post-header">
{# -- h2 wrapping loop item name -- #}
<h2>{{ content.name }}</h2>
</div>
</div>
</a>
{% else %}
<h2 class="post-listing-simple"> <a href="{{content.absolute_url}}">{{ content.name }}</a> </h2>
{% endif %}
</div>
{% endfor %}
{% endmacro %}
{#################################################}
{############### Output ###############}
{#################################################}
<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 'topic' is true --
-- This code will ONLY show IF on a topic url (www.website.com/blog/topic/topic_name) #}
{% if topic %}
{# -- calling post_feed macro, sending blog contents to it -- #}
{{ post_feed(contents) }}
{# -- Else if 'topic' is not true --
-- This shows UNLESS on a topic url (www.website.com/blog/topic/topic_name) #}
{% else %}
{# -- calling post_feed macro, sending a topic slug to it -- #}
{{ post_feed('whiskey-content') }}
{{ post_feed('tequila-content') }}
{{ post_feed('air-water-show-content') }}
{{ post_feed('halloween-content') }}
{{ post_feed('new-years-content') }}
{{ post_feed('st-patricks-day-content') }}
{% endif %}
</div>
</div>
</div>
save the module. on the left side bar of the custom module editor scroll down until you see "Template Usage". Copy the "usage snippet". my looks like this:
{% module "module_156107096182818" path="/Khoatic_Modules/background Color test" %}
Go to the listing template editor of the blog content module in the blog template, delete every thing (or comment it out) and paste your custom module snippet.
I built a macro that takes one argument. if that argument is "contents" it will loop through the "contents" variable. Otherwise it will try to use that argument as a topic slug for filtering a custom feed. Notice how I call the macro several times with a unique topic slug each time.