COS-Blog

How can I enable the blog avatar?

Last updated: October 6, 2015

For all newly created blog templates the blog author avatar option is enabled by default. If your blog template was created prior to August 18th, 2013 you will need to edit your template to enable this feature.

To begin, navigate to Content > Design Manager and locate your blog's template in the Custom folder under Blog.

Click on the name of the Template - doing so will open the Template for editing. Next, click on Edit Post Template from within the Blog Content module.

In the HTML of the Blog Post Template HTML at line 11 (if you haven't modified the template considerably) is a line of code that looks like this:

{# {% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img width="35 px" src="{{ content.blog_post_author.avatar }}"> </div> {% endif %} #}

Remove the beginning and trailing {# and #} tags from that line.

The finished product should look like:

{% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img width="35px" src="{{ content.blog_post_author.avatar }}"> </div> {% endif %}

In HubL, or HubSpot Markup Language, {# and #} are the opening and closing tags for comments. When new features are added into HubSpot's templates we automatically insert them into all templates new and old. If the template is old we comment out the code to prevent any disruption for our customers that have made modifications that might be adversely affected by making our updates live.

To enable the avatar feature on the Blog Listings page locate the following code on (or around) line 41. If this line of code is not appearing in the template on (or around) line 41 you will need to add this block of code to your template:

{#{% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img width="35 px" src="{{ content.blog_post_author.avatar }}" alt="{{content.blog_author.display_name}}"> </div> {% endif %}#}

As with the blog post body code modification you will need to remove the {# and #} tags from the outside of this entry.

The finished product should look like:

{% if content.blog_post_author.avatar %} <div class="hs-author-avatar"> <img width="35 px" src="{{ content.blog_post_author.avatar }}" alt="{{content.blog_author.display_name}}"> </div> {% endif %}

When you've removed the comment tags click Publish Changes on the template to push the changes live to your HubSpot blog.

Any new blog templates you create in HubSpot will automatically include this avatar functionality by default.