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.
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 %}
^^ 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.
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 %}
^^ 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.
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.