Filter blog content module according to blog tags/topics on listing template

chrissa0000 · ‎06-03-2019

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">&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 %}
                <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>

Jsum · ‎06-04-2019

Hi @chrissa0000 ,

The Hubspot blog system provides a list of blogs using the {{ contents }} variable.

If you look in the code you provided, you will see a for loop that is similar to:

{% for content in contents %}
{% endfor %}

This is the standard method for listing out blog posts.

The function you shared at the top of your code is the standard function, provided in the hubl docs, for creating a feed of topic specfic posts.

https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-tag-posts

{% 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.

Let me know if this helps.

Need help? Hire Us Here

- Jonathan Sumner

Jsum · ‎06-20-2019

Hi @chrissa0000 ,

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.

- Jonathan Sumner

Jsum · ‎06-04-2019

Hi @chrissa0000 ,

The Hubspot blog system provides a list of blogs using the {{ contents }} variable.

If you look in the code you provided, you will see a for loop that is similar to:

{% for content in contents %}
{% endfor %}

This is the standard method for listing out blog posts.

The function you shared at the top of your code is the standard function, provided in the hubl docs, for creating a feed of topic specfic posts.

https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-tag-posts

{% 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.

Let me know if this helps.

Need help? Hire Us Here

- Jonathan Sumner

chrissa0000 · ‎06-05-2019

@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?

Jsum · ‎06-05-2019

Hey @chrissa0000 ,

There are a few HubL variables that you can use to change the behavior of a template.

topic:

{% if topic %}{% endif %}

'topic' is true if the user is looking at a topic specific list (www.website.com/blog/topic/topic_name).

is_listing_view:

{% if is_listing_view %}{% endif %}

'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.

Let me know if that helps.

Need help? Hire Us Here

- Jonathan Sumner

chrissa0000 · ‎06-13-2019

@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">&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 %}
                <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 %}

Jsum · ‎06-13-2019

Hi @chrissa0000 ,

No problem.

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?

- Jonathan Sumner

chrissa0000 · ‎06-13-2019

@Jsum , no it is not showing up the topic. When you click on it, the if listing template appears.

Jsum · ‎06-13-2019

@chrissa0000 ,

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.

- Jonathan Sumner

chrissa0000 · ‎06-14-2019

@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?.

chrissa0000 · ‎06-20-2019

{% else %}
<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">&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 %}

        <h3> <a href="https://news.besocialscene.com/topic/whiskey-content"> Whiskey Content  </a></h3> 
            {% for content in whiskey_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/whiskey-content" target="_blank" >View All Whiskey Articles</a></p> 
 </div>

            <h3> <a href="https://news.besocialscene.com/topic/tequila-content">Tequila Content </a> </h3> 
            {% for content in tequila_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/tequila-content" target="_blank" >View All Tequila Articles</a></p> 
 </div>
        <h3> <a href="https://news.besocialscene.com/topic/air-water-show-content">Air & Water Show </a> </h3> 
            {% for content in air_water_show_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/air-water-show-content" target="_blank" >View Air & Water Show Articles</a></p> 
 </div>



        <h3> <a href="https://news.besocialscene.com/topic/halloween-content"> Halloween Content </a> </h3> 
            {% for content in halloween_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/halloween-content" target="_blank" >View All Halloween Articles</a></p> 
 </div>
        <h3><a href="https://news.besocialscene.com/topic/new-years-content">New Years Content</a></h3> 
            {% for content in new_years_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/new-years-content" target="_blank" >View All New Year Articles</a></p> 
 </div>

        <h3> <a href="https://news.besocialscene.com/topic/st_patricks_day_content"> St. Patrick's Day Content </a></h3> 
            {% for content in st_patricks_day_content %}
                <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 class="view-all-articles">
    <p class="cta-blog-design"> <a href="https://news.besocialscene.com/topic/st-patricks-day-content" target="_blank" >View All St. Patrick's Articles</a></p> 
 </div>


        </div>

        {% if not simple_list_page %}
 <!-- Numbered Pagination -->

{% endif %}
        
  </div>
 </div>

{% endif %}

@Jsum , just in case you need this code as well

Jsum · ‎06-20-2019

Hi @chrissa0000 ,

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.

- Jonathan Sumner