Custom Top Posts widget with Image, Length & Topic

SOLVE
Highlighted
Regular Visitor

Hi

I'd like to create a custom sidebar widget which lists the most popular posts with the following information:

 

-Title

-Topic

-Length to Read

- Featured Image.

 

At the moment I can only list Title and Image by using:

{% post_listing "top_posts" select_blog='//Your blog name//', label='Featured posts', overrideable=False, list_title='Featured posts', listing_type='popular', max_links=5, include_featured_image='true' %}

The code im using to calculate time to read is:

 

 <span class="reading-minutes">
{% set initialPostWords = content.post_body|wordcount %}
{% set calculatedPostWords = (initialPostWords/100) * 100 %}
{% set finishedPostWords = calculatedPostWords|divide(200)|round(2) %}
{% set number = finishedPostWords|round %}
{% if number < 1 %}

{% else %}
{{ finishedPostWords|round }} minute read
{% endif %}
</span>

How can I insert this in the listings along with the topic?

 

Thanks in advance.

 

Reply
0 Kudos
1 Accepted solution

Accepted Solutions
Top Contributor

Hey there,

 

The approach I'd recommend would be to use the blog_popular_posts function rather than a post listing module

http://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-popular-posts

 

That function will return a set number of posts which you can then iterate through and pull out any HubL variables from the post that you need in any layout that you'd like.

 

This tutorial should help get you started:

http://designers.hubspot.com/docs/tutorials/printing-sets-of-blog-posts-on-page-templates

3 Replies
Top Contributor

Hey there,

 

The approach I'd recommend would be to use the blog_popular_posts function rather than a post listing module

http://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-popular-posts

 

That function will return a set number of posts which you can then iterate through and pull out any HubL variables from the post that you need in any layout that you'd like.

 

This tutorial should help get you started:

http://designers.hubspot.com/docs/tutorials/printing-sets-of-blog-posts-on-page-templates

Regular Visitor

Many thanks

 

Solution for those who need it:

 

 <div class="cell-wrapper layout-widget-wrapper block">
        <h3 class="margin">Popular Posts</h3>
        {% set posts = blog_popular_posts('default', 5) %}
        {% for post in posts %}

     {% unless content.absolute_url == post.absolute_url %}
    
  
        <div class="widget-module">
            <ul>
                <li>
                    <a href="{{ post.absolute_url }}" title="{{ post.name }}">
                        <article>
                            <h1>{{ post.name }}</h1>
                            
                            <span class="reading-minutes">
                                {% set initialPostWords = post.post_body|wordcount %}
                                {% set calculatedPostWords = (initialPostWords/100) * 100 %}
                                {% set finishedPostWords = calculatedPostWords|divide(200)|round(2) %}
                                {% set number = finishedPostWords|round %}
                                {% if number < 1 %}
                                
                                {% else %}
                                {{ finishedPostWords|round }} minute read
                                {% endif %}
                            </span>
                            
                            <span class="topics">| {% if post.topic_list %}
                             
                                {% for topic in post.topic_list %}
                                    {{ topic.name }}{% if not loop.last %}, {% endif %}
                                {% endfor %}
                           
                        {% endif %}</span>
                            
                        </article>
                    </a>
                </li>
            </ul>
        </div>
    
    
         {% endunless %}
         {% endfor %}


</div><!--end layout-widget-wrapper -->

 
Regular Advisor

Smiley Happy

Reply
0 Kudos