Innovation Icon

Let's Make Something Amazing Together

We always provide our best creative ideas at the highest level. Tell us about your project and we will make it work.

InnovateBringing innovative solutions to complex problems

AutomateStreamlining processes through automation

DominateLeading the market with exceptional results

Build Smarter and Launch FasterEfficient development for rapid deployment

We were designing the Hubspot theme and working on the blog listing and blog post of Hubspot, by default there was no author image shown, so we had to make some code changes to show the author's avatar.

Demo of Hubspot blog listing page

In the template type blog_post, we add the following code to show the author's image, name, and published date of the HubSpot blog. You can get the author image URL with {{ content.blog_post_author.avatar}}


  
      {% if content.blog_post_author.avatar %}
      
        
      
      {% endif %}
      
        
          
            {{ content.blog_post_author.display_name }}
          
          
            {{ content.publish_date_localized }}

CSS added are below:

.blog-post__meta_content, .blog-post__meta{
  display: flex;
  flex: 1;
}
.blog-post__meta a{
  color: #01afd7 !important;
  text-decoration: none;
}

.blog-author-img img{
  width: 70px;
  border-radius: 50%;
  margin-right: 10px;
}
.blog-author-name{
  align-items: center;
  display: flex;
}

With these additions we are able to show the author section below:

We are HubSpot-certified developers from Phoenix Arizona, USA, so if you guys need any help on HubSpot development, please contact us or email us directly at webocreation.com@gmail.com. Please let us know if you have any questions or suggestions, please subscribe to our YouTube Channel and you can see more in Salesforce, Marketo, Pardot, and Hubspot. You can also find us on Twitter and Facebook. Enjoy!