CMS Development

LapLabs
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

Hi All. I am a beginner in HubL.

I would like to show only the posts contain Feauture image in my blog listing page.

 

Below is my current situation (Blog Content > Listing) :

<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 %}">
            {% for content in contents%}

                {# The body of each post #}
                <div class="post-item">
                    {% if not simple_list_page %}  
                    <a href="{{ content.post_body }}" title="" target="_blank" class="hs-featured-image-link">
                        <div class="post-header">    
                            <div class="hs-featured-image-wrapper" style="background-image: url({{ content.post_list_summary_featured_image }});">
                            </div>
                        </div>
                      
                    </a>
                    {% endif %}
                </div>
              {# End of the body of each post #} 
            {% endfor %}
        </div>
    </div>
</div>

I believe 

include_featured_image

may be the related to this problem.I try servel times to put it in my code but it still fail.

 

Please help! Thanks a lot!

0 Upvotes
1 Accepted solution
mgrubbs
Solution
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

Hello LapLabs,

 

This document on the selectattr hubl filter should help you. 

 

There are a couple of ways to filter this down but they all revolve around checking if the post_list_summary_featured_image is set for the blog post in the list of posts.

 

The example code looks like this:

{% for content in contents|selectattr('post_list_summary_featured_image') %}
<div class="post-item">{% if content.post_list_summary_featured_image %}

 Breakdown:

contents|selectattr('post_list_summary_featured_image')

^^ This selects only blog posts that have a post_list_summary_featured_image attribute.

{% if content.post_list_summary_featured_image %}

 ^^ This checks to make sure that the post_list_summary_featured_image field has an actual value.

 

Your final code:

<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 %}">
            {% for content in contents|selectattr('post_list_summary_featured_image') %} {# < ADDING IN THE CHECK FOR 'post_list_summary_featured_image' %}
                
{% if content.post_list_summary_featured_image %} {# < ADDING IN THE CHECK FOR FEATURED IMAGE #}
{# The body of each post #}
<div class="post-item"> {% if not simple_list_page %} <a href="{{ content.post_body }}" title="" target="_blank" class="hs-featured-image-link"> <div class="post-header"> <div class="hs-featured-image-wrapper" style="background-image: url({{ content.post_list_summary_featured_image }});"> </div> </div> </a> {% endif %} </div>

{% endif %} {# < MAKE SURE TO CLOSE YOUR IF STATEMENT #}
      {# End of the body of each post #} {% endfor %} </div> </div> </div>

Hopefully that helps - there are LOTS of other ways to get to the same result but this one has support docs describing the process.

 

Best of luck,

Mike

 

 

View solution in original post

5 Replies 5
TomBennett
Participant | Elite Partner
Participant | Elite Partner

Only show the posts that contain Feature Image in Blog Listing

SOLVE

You can use

{% if content.post_list_summary_featured_image %}

to check if a blog post has a featured image.

 

So for example you could add it to your existing if statement:

{% if not simple_list_page and content.post_list_summary_featured_image %}

Hope that helps!

 

Edit: Mike beat me to it with a more elaborate response 🙂

mgrubbs
Solution
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

Hello LapLabs,

 

This document on the selectattr hubl filter should help you. 

 

There are a couple of ways to filter this down but they all revolve around checking if the post_list_summary_featured_image is set for the blog post in the list of posts.

 

The example code looks like this:

{% for content in contents|selectattr('post_list_summary_featured_image') %}
<div class="post-item">{% if content.post_list_summary_featured_image %}

 Breakdown:

contents|selectattr('post_list_summary_featured_image')

^^ This selects only blog posts that have a post_list_summary_featured_image attribute.

{% if content.post_list_summary_featured_image %}

 ^^ This checks to make sure that the post_list_summary_featured_image field has an actual value.

 

Your final code:

<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 %}">
            {% for content in contents|selectattr('post_list_summary_featured_image') %} {# < ADDING IN THE CHECK FOR 'post_list_summary_featured_image' %}
                
{% if content.post_list_summary_featured_image %} {# < ADDING IN THE CHECK FOR FEATURED IMAGE #}
{# The body of each post #}
<div class="post-item"> {% if not simple_list_page %} <a href="{{ content.post_body }}" title="" target="_blank" class="hs-featured-image-link"> <div class="post-header"> <div class="hs-featured-image-wrapper" style="background-image: url({{ content.post_list_summary_featured_image }});"> </div> </div> </a> {% endif %} </div>

{% endif %} {# < MAKE SURE TO CLOSE YOUR IF STATEMENT #}
      {# End of the body of each post #} {% endfor %} </div> </div> </div>

Hopefully that helps - there are LOTS of other ways to get to the same result but this one has support docs describing the process.

 

Best of luck,

Mike

 

 

LapLabs
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

It works! Great! 

 

May I ask a few more questions:

I wanna to show the first topic of a blog post. These code below will shown all the topics which not in my expect.

   {% for topic in content.topic_list %}
                                <a class="post_topic" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                             {% endfor %}

Can you help again?

0 Upvotes
mgrubbs
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

You can use the |first filter to grab the first value in a sequence.

 

In this case, you set a variable equal to the results of the content.topic_list sequence with the first filter. This gives you the dictionary for the first topic (which contains name and slug).

 

Then you just use .name or .slug to reference the attribute you want to insert in your html.

 

Try this:

{% set topic = content.topic_list|first %}
<a class="post_topic" href="{{ group.absolute_url }}/topic/{{topic.slug}}">{{ topic.name }}</a>

This should work but if it doesn't there are a few other ways to get to the same result.

 

 

Best,

Mike

0 Upvotes
LapLabs
Participant

Only show the posts that contain Feature Image in Blog Listing

SOLVE

Solved, thanks!

0 Upvotes