# Adding an editable module to a Blog Listing template

**URL:** <https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671>\
**Category:** CMS Development\
**Created:** [January 8, 2017, 10:14pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671 "2017-01-08T22:14:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbarbara](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbarbara/32/10081_2.png) [@dbarbara](https://community.hubspot.com/u/dbarbara)\
**Post date:** [January 8, 2017, 10:14pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/1 "2017-01-08T22:14:33Z")

</div>

My client wants a full-width editable “Featured” box above the posts on the Blog Listing page (screenshot). Will they have to edit the template itself, or is there another way?

From what I can tell, it’s not possible to populate a featured post box dynamically, but they are fine with adding an image and text manually along with a link the featured post.

What I want to avoid is the client having to edit the listing template itself each time they want to change the content of the “Featured” box. Is this possible?

Am just learning HubL, but fine with taking it on if that’s the way to go. Well versed in HTML/CSS.

 ![Blog-sample-layout.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/d/edc5d716ae90365900ab1a78c1e149e9668183dc.jpeg)

---

<div class="post-metadata">

**Author:** ![relabidin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/relabidin/32/10664_2.png) [@relabidin](https://community.hubspot.com/u/relabidin)\
**Post date:** [January 9, 2017, 4:21pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/2 "2017-01-09T16:21:01Z")

</div>

Hi @dbarbara,

The simplest way I can think of to add a ‘Featured’ box to the top of the listing page would be to add a Rich Text module at the top of the template. You could give the module (or group of modules) custom CSS classes and then write some CSS to style them. Then, your clients could simply edit the images/text in the module when the featured area needed to be updated. I understand that editing the template each time could be a pain for your client, though.

You could also use a [Custom Module](https://knowledge.hubspot.com/articles/kcs_article/cos-general/what-are-custom-modules) for your ‘Featured’ box, this way your client wouldn’t need to edit the template itself to make changes, but they still would need to edit the Custom Module in Design manager any time they wanted a change.

There may be a more elegant/dynamic solution using HubL, but I am not well versed enough in HubL to provide a great solution.

@ndwilliams3 @stefen do you guys have any ideas for solutions here? Thank you for your continued help in our community.

Rami

---

<div class="post-metadata">

**Author:** ![dbarbara](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbarbara/32/10081_2.png) [@dbarbara](https://community.hubspot.com/u/dbarbara)\
**Post date:** [January 9, 2017, 4:51pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/3 "2017-01-09T16:51:35Z")

</div>

Hi Rami,

Thanks for the input on making the Featured Module a Custom Module. Will do that for now, since the client needs to see a result today.

But any additional ideas/solutions are still greatly appreciated.

Barbara

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [January 9, 2017, 5:16pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/4 "2017-01-09T17:16:09Z")

</div>

It’s a HubSpot limitation. There is no way to edit the blog listing pages.

Another possible work-a-round would be to use HubDB but that might be more complicated than just using a custom module or a global module.

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [January 10, 2017, 4:44am UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/5 "2017-01-10T04:44:30Z")

</div>

If these will be featured posts from the blog.

Add another “Blog Content” Module in the template where you want the featured item.

In the listing template, add the following code and delete the contents of the post template.

Add classes, CSS and HTML markup to your preference.

```auto
<div class="featured-item">
 {% set topic_posts = blog_recent_topic_posts('{{ content.parent_blog.id }}', 'featured-post', 1 ) %}
 {% for topic_post in topic_posts %}
 {% if topic_post.post_list_summary_featured_image %}
 <div>
 <img src="{{ topic_post.post_list_summary_featured_image }}" class="hs-featured-image">
 </div>
 {% endif %}
 <div>
	 {% if topic_post.topic_list %}
	 <div id="hubspot-topic_data" class="list-topics">
	 {% for topic in topic_post.topic_list %}
	 <span class="topic-link">{{ topic.name }}</span>
	 {% endfor %}
	 </div>
	 {% endif %}
 <h3>{{ topic_post.name }}</h3>
 <p>{{ topic_post.post_list_content|truncatehtml(150, "...", false) }}</p>
 <p><a href="{{topic_post.absolute_url}}">Read the article</a>
 </div>
 {% endfor %}
 </div>

```

Add a topic tag called “Featured Post”.

Your client can then tag posts with “Featured Post” and it will show the latest post tagged. Each time a new post is tagged, the feature will be updated.

---

<div class="post-metadata">

**Author:** ![relabidin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/relabidin/32/10664_2.png) [@relabidin](https://community.hubspot.com/u/relabidin)\
**Post date:** [January 10, 2017, 2:25pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/6 "2017-01-10T14:25:03Z")

</div>

Wow that’s great!

---

<div class="post-metadata">

**Author:** ![dbarbara](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbarbara/32/10081_2.png) [@dbarbara](https://community.hubspot.com/u/dbarbara)\
**Post date:** [January 12, 2017, 2:14am UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/7 "2017-01-12T02:14:54Z")

</div>

Thanks so much for the solution!

Yes, a Featured Post item is what we want to place at the top of the Blog Listing page. Is it possible to implement your solution in the Listing template?

> * * *
> 
> In the listing template, add the following code and delete the contents of the post template.

Can you clarify what you mean by “delete the contents of the post template”?

Referring to the screenshot of the Listing template as it is now, could you indicate what I should delete from the Blog Content module?

Thanks.

 ![Listing-page-center.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/6c445b3e08f32d009f7c108327a3d4b38525c474.png)  
Listing page template with Featured post above Blog content

---

<div class="post-metadata">

**Author:** ![ndwilliams3](https://avatars.discourse-cdn.com/v4/letter/n/c4cdca/32.png) [@ndwilliams3](https://community.hubspot.com/u/ndwilliams3)\
**Post date:** [January 12, 2017, 3:41pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/8 "2017-01-12T15:41:40Z")

</div>

Yes, you don’t necessary to add another blog content module. You can add the code above and incorporate it into your existing listing template.

If you incorporate the code into your exisitng listing template you don’t need to delete anything.

If you did add another blog content module to the template, you would not want the post content showing twice. One module would include only a listing template for the feature and the second would be your primary listing and post content.

Here are a couple of screenshots.

**Add to existing listing template:**

 ![large.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/4/04b09434f31bac90e6c52fab70c7d248f4ce1a8c.png)

**Create a new blog content module:**

 ![Screen Shot 2017-01-12 at 9.34.21 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/0/e09ea8bb3566d9dec5350e51a2cabce97c504e53.png)

---

<div class="post-metadata">

**Author:** ![dbarbara](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbarbara/32/10081_2.png) [@dbarbara](https://community.hubspot.com/u/dbarbara)\
**Post date:** [January 12, 2017, 10:55pm UTC](https://community.hubspot.com/t/adding-an-editable-module-to-a-blog-listing-template/671/9 "2017-01-12T22:55:01Z")

</div>

Thank you for clarifying, I appreciate your help!
