# Custom Top Posts widget with Image, Length & Topic

**URL:** <https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314>\
**Category:** CMS Development\
**Created:** [September 13, 2017, 1:44pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314 "2017-09-13T13:44:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![d\_pearson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/d_pearson/32/47092_2.png) [@d\_pearson](https://community.hubspot.com/u/d_pearson)\
**Post date:** [September 13, 2017, 1:44pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/1 "2017-09-13T13:44:17Z")

</div>

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:

```auto
 <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.

---

<div class="post-metadata">

**Author:** ![DaniellePeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/daniellepeters/32/6115_2.png) [@DaniellePeters](https://community.hubspot.com/u/DaniellePeters)\
**Post date:** [September 13, 2017, 2:40pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/2 "2017-09-13T14:40:30Z")

</div>

Hey there,

The approach I’d recommend would be to use the blog\_popular\_posts function rather than a post listing module

> **[HubL functions - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/hubl/functions)**
>
> A reference listing of all of the available HubL functions.

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:

> **[HubL variables - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/hubl/variables)**
>
> HubSpot templates can use a host of predefined variables that can be used to render useful website and email elements. This page is a reference listing of those variables.

---

<div class="post-metadata">

**Author:** ![d\_pearson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/d_pearson/32/47092_2.png) [@d\_pearson](https://community.hubspot.com/u/d_pearson)\
**Post date:** [September 13, 2017, 3:14pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/3 "2017-09-13T15:14:27Z")

</div>

Many thanks

Solution for those who need it:

```auto
 <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 -->

```

---

<div class="post-metadata">

**Author:** ![srikanthkothala](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/srikanthkothala/32/93181_2.png) [@srikanthkothala](https://community.hubspot.com/u/srikanthkothala)\
**Post date:** [March 12, 2020, 8:17am UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/4 "2020-03-12T08:17:18Z")

</div>

Have been digging for an option to fetch popular posts from the month prior only.  
listing\_type=‘popular\_past\_month’ - Some how was not able to figure out how to implement this in the custom HubL code.

Even with multiple touch points with HubSpot team there hasn’t been any solution to populate popular posts past month.

---

<div class="post-metadata">

**Author:** ![tguyon](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tguyon/32/48852_2.png) [@tguyon](https://community.hubspot.com/u/tguyon)\
**Post date:** [July 19, 2018, 1:15pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/5 "2018-07-19T13:15:43Z")

</div>

Is there a solution that will pull popular posts from the month prior only?

---

<div class="post-metadata">

**Author:** ![andrewabogado](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/andrewabogado/32/105547_2.png) [@andrewabogado](https://community.hubspot.com/u/andrewabogado)\
**Post date:** [March 1, 2020, 9:31am UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/6 "2020-03-01T09:31:47Z")

</div>

I second this comment. I would like to see some control to show popular within a time period like monthly, quarterly, yearly, and all-time. Monthly would be great, to begin with.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [September 13, 2017, 3:22pm UTC](https://community.hubspot.com/t/custom-top-posts-widget-with-image-length-topic/3314/7 "2017-09-13T15:22:06Z")

</div>

![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)