How to Create Custom Blog Post Summaries for Blog Listing Pages

Highlighted
HubSpot Alumni

This is a guide for creating a separate field within the blog post editor in order to write a summary of the post, which will then display as the post's summary on the blog's listing pages. It's an alternative to using the beginning of the post body text or even the Meta Description, which I've seen used as well. This is something I've helped a few people to create, so I figured it might be helpful to others to have a guide written down. The common use case for something like this is when the opening text of a blog post isn't actually useful to display as summary text on a listing page.

 

The first step is to create a custom module. Name it "Blog Post Summary". You can change the name if you'd like, but just keep in mind that you'll need to then adjust some of the code below. Make the module available for blog templates and make it a local module. Add one text field and name the field "Summary Text". Don't add anything into the HTML + HubL field; we'll be printing our HTML through the blog content module's listing template. But by adding a field to a module like this, we can add text to this field from within the blog post editor, and then access it from the listing pages. Publish your module.

 

Now head to your blog template and add your newly created "Blog Post Summary" module. You can add it anywhere; I'd suggest somewhere in the footer. If you're using separate templates for post and listing pages, you'll need to add this module to the template for blog post pages.

 

Next, head into the listing template of the blog content module. And if you're using separate templates for listing and post pages, make sure you're now in the template for listing pages. Locate the code that you're currently using to display the blog post summaries. That might look something like this:

 

 

<p>{{ content.post_list_content|truncatehtml(200, "...", false) }}</p>

 

 

You're going to replace that code with the code below. Just a few things to keep in mind while you're doing this:

 

  1. If you've named your custom module or its field differently from how I have, that will need to be adjusted in this code below.
  2. There are two lines where, if a post doesn't have a custom summary, the first 200 characters of the post body will be pulled in. This is the default summary that's pulled from the post body field. If your "default" that you're replacing looks different (like for example if you're limiting to 300 characters instead of 200), you should adjust that in the code below.
  3. If you're not looping through the blog's contents dictionary with a loop like {% for content in contents %} , then you'll need to adjust the references in the below code from content to whatever you've named your variable. So if for example you're looping through the blog posts with {% for item in contents %} , then you'll want to use something like {{ item.post_list_content }} instead of {{ content.post_list_content }} .

So now replace the code that you're currently using to display blog post summaries with the following:

 

 

{# create variable so that we know if the module exists in the post's content dictionary #}
{% set blogPostSummaryState = false %}

{# loop through the post's modules #}
{% for module in content.widgets %}

  {% if module.label == "Blog Post Summary" %}

    {# we've found the module, so let's set our variable to true #}
    {% set blogPostSummaryState = true %}

    {# is there a value in the summary text field? if yes, print it #}
    {% if module.body.summary_text and module.body.summary_text != "" %}
      <p>{{ module.body.summary_text }}</p>
    {# if not, print the default summary #}
    {% else %}
      <p>{{ content.post_list_content|truncatehtml(200, "...", false) }}</p>
    {% endif %} {# end if module.body.summary_text and module.body.summary_text != "" #}

  {% endif %} {# end if module.label == "Blog Post Summary" #}

  {# we only want to run this bit once, so we do it in the last loop iteration #}
  {# this is for existing posts that haven't yet been updated, because they won't have the module show up in their content dictionary #}
  {% if loop.last %}
    
    {# if we didn't find our module, print the default summary #}
    {% if blogPostSummaryState == false %}
      {{ content.post_list_content|truncatehtml(200, "...", false) }}
    {% endif %} {# end if blogPostSummaryState == false #}

  {% endif %} {# end if loop.last #}

{% endfor %} {# end for module in content.widgets #}

 

 

I've added comments that I think make the code more understandable. But this is really all there is to it. You should now be able to head into the editor for one of your blog posts. You'll find a module "Blog Post Summary" with a field "Summary Text" that you can edit. Save and update the post with some text in there and then check the listing page again. You should see that its summary has updated.

 

You can optionally add filters to your summary field like |truncatehtml() (documented here: https://designers.hubspot.com/docs/hubl/hubl-supported-filters#truncatehtml) if you want to ensure uniformity on the listing page.

 

If anyone has questions about setting this up or if anyone has other methods or any improvements to my method, feel free to leave some comments.

 

 

Leland Scanlan

HubSpot Developer Support
5 Replies 5
Highlighted
New Contributor

Hello, I don't get add a summary in my listing template. I tried to apply your code and I search for information but it doesn't work. 

I have this code in my listing posts template. Maybe the problem is in your point 3 but I don't know how I can solve the problem.

 

{% for content in contents %}
                        <div class="post-item">
                            <div class="post-content">
                            {% if not simple_list_page %}
                                <!-- Featured Image -->
                                {% if content.post_list_summary_featured_image %}
                                    <div class="hs-featured-image-wrapper">
                                        <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
                                            <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image">
                                        </a>
                                    </div>
                                {% endif %}
                                <!-- End Featured Image -->
                                <div class="blog-post-list-wrapper">
                                <!-- Start Header -->
                                <div class="post-header">
                                    <div class="header-content">
                                    <h3><a href="{{content.absolute_url}}">{{ content.name }}</a></h3>
                                    <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
                                        <p> by
                                        {%if content.blog_post_author %}
                                            <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a> on {{ content.publish_date_localized }}
                                        {% endif %}</p>
                                    </div>
                                    </div>
                                </div>
                                <!-- End Header -->
                                <!-- Start Post Body -->
                                <div class="post-body clearfix">
                                    <!--post summary-->
                                    <div class="post-summary">
                                        <div>
                                          {{content.post_list_content | truncatehtml (200, '..', false)}}
                                        </div>
                                        <div>
                                            {% if content_group.show_summary_in_listing %}
                                                <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                            {% endif %}

                                        </div>
                                    </div>
                                </div>
                                <!-- End Post Body -->
                                
                                <div class="custom_listing_comments">
                                    {% set comments_number =  content.comment_list|length %}
                                    {% set comments_label = "Comment" if comments_number == 1 else "Comments" %}
                                    {{ comments_number }} {{ comments_label }} <a href="{{content.absolute_url}}#comments-listing">Click here to read/write comments</a>
                                </div>
                                {% if content.topic_list %}
                                     <p id="hubspot-topic_data"> Topics:
                                        {% for topic in content.topic_list %}
                                            <a class="topic-link" href="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                                        {% endfor %}
                                     </p>
                                {% endif %}
                                </div>
                            {% else %}
                                <h2 class="post-listing-simple"><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
                            {% endif %}
                            </div>
                        </div>
                    {% endfor %}

Also, I made the custom modulo and It appears in my blog template.

 

summary text.PNG

I hope you can help me.

Thank you in advance

Reply
0 Upvotes
Highlighted
New Contributor

Hi @Cristinaferza ,

You are missing the custom module calling code that Leland mentioned above.

{% if module.body.summary_text and module.body.summary_text != "" %}
      <p>{{ module.body.summary_text }}</p>
    {# if not, print the default summary #}
    {% else %}
      <p>{{ content.post_list_content|truncatehtml(200, "...", false) }}</p>
    {% endif %} {# end if module.body.summary_text and module.body.summary_text != "" #}

Please add this code with you custom module and it's field name and that would work for you.

Thanks!
Shaban

Reply
0 Upvotes
Highlighted
New Contributor

Hello @shaban. Thank you for the fast reply Smiley Happy

I added but and I had the same problem

 

<div class="post-body clearfix">
                                    <!--post summary-->
                                    <div class="post-summary">
                                        <div>
                                        {% set blogPostSummaryState = false %}
                                        {% for module in content.widgets %}
                                          {% if module.label == "Blog Post Summary" %}
                                              {% set blogPostSummaryState = true %}
                                              {% if module.body.summary_text and module.body.summary_text != "" %}
                                                <p>{{ module.body.summary_text }}</p>
                                              {% else %}
                                                <p>{{ content.post_list_content|truncatehtml(200, "...", false) }}</p>
                                              {% endif %}
                                          {% endif %}
                                          
                                          {% if loop.last %}
                                            {% if blogPostSummaryState == false %}
                                              {{ content.post_list_content|truncatehtml(200, "...", false) }}
                                            {% endif %}
                                          {% endif %}
                                        {% endfor %}
                                        </div>
                                        <div>
                                            {% if content_group.show_summary_in_listing %}
                                                <a class="more-link" href="{{ content.absolute_url }}">Read More</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

And in my custom module: 

 

summary.PNG

I hope you can help me. Thank you!

Reply
0 Upvotes
Highlighted
New Contributor

Hi @Cristinaferza ,

 

ok, please confirm the following things are placed:

  1. You are using this code Blog Listing template not in Post Template.
  2. Custom module label should be named as  "Blog Post Summary".
  3. You have included the custom module in the same template.

After confirmation of above point, if it still doesn't work, please edit a post and add some content in the custom module's text field and hit update post button.

 

Thanks!
Shaban

Highlighted
New Contributor

I got it! I don't know how exactly but I copied the code again and it works...

Thank you @shaban for the support!


@shaban wrote:

Hi @Cristinaferza ,

 

ok, please confirm the following things are placed:

  1. You are using this code Blog Listing template not in Post Template.
  2. Custom module label should be named as  "Blog Post Summary".
  3. You have included the custom module in the same template.

After confirmation of above point, if it still doesn't work, please edit a post and add some content in the custom module's text field and hit update post button.

 

Thanks!
Shaban


 

Reply
0 Upvotes