Adding an editable module to a Blog Listing template

SOLVE
dbarbara
Contributor

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.png

 

 

 

 

0 Upvotes
2 Accepted solutions

Accepted Solutions
dbarbara
Solution
Contributor

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 template with Featured post above Blog contentListing page template with Featured post above Blog content 

View solution in original post

ndwilliams3
Solution
Key Advisor

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

 

Create a new blog content module:

Screen Shot 2017-01-12 at 9.34.21 AM.png

 

 

 

 

 

 

View solution in original post

8 Replies 8
relabidin
HubSpot Alumni

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

dbarbara
Contributor

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

 

 

 

0 Upvotes
stefen
Key Advisor | Partner

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.

Stefen Phelps, Community Champion, Kelp Web Developer
ndwilliams3
Key Advisor

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.

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

 

relabidin
HubSpot Alumni

Wow that's great!

0 Upvotes
dbarbara
Solution
Contributor

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 template with Featured post above Blog contentListing page template with Featured post above Blog content 

View solution in original post

ndwilliams3
Solution
Key Advisor

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

 

Create a new blog content module:

Screen Shot 2017-01-12 at 9.34.21 AM.png

 

 

 

 

 

 

View solution in original post

dbarbara
Contributor

Thank you for clarifying, I appreciate your help!

0 Upvotes