Blog Author Avatar Size

SOLVE
Chris-Higgins
Contributor | Platinum Partner

Hi everyone,

 

I'm using the below code to pull the profile photo of a blog post author into a template.  This works as expected, but the image is super tiny and really low resolution.

 

<img src="{{ content.blog_author.avatar }}">  

Is there a way to pull a larger / higher res version of this image into my template?  Need it to be about 150px wide.

 

Thanks!

 

Chris

1 Accepted solution

Accepted Solutions
Chris-Higgins
Solution
Contributor | Platinum Partner

I think I've solved this.  Looks like the issue is that if you're using the HubSpot Profile avatar (the default), you're restricted to a small / low res image (about 80px). If you upload an avatar in the blog author settings, you're able to use a larger / hiher resolution image.

 

Screenshot 2020-04-18 at 12.19.56.png

View solution in original post

6 Replies 6
psdtohubspot
Key Advisor

Hi @Chris-Higgins 

You can use the image as background because images are not always same we can manage form wrapper width

Replace this 

<img src="{{ content.blog_author.avatar }}">  


By this

<div class="post_ath_avatar" alt="{{ content.blog_post_author.display_name }}" style="background-image:url({{ content.blog_post_author.avatar }})"></div>


Add this style in your stylesheet

div.post_ath_avatar {
    background-size: cover;
    background-position: center;
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 100%;
    background-repeat: no-repeat;
    float: left;
    margin-right: 15px;
    border: 3px solid #000;
}

Let me know if any questions.

Happy to Help.
Thanks!
Ajit

Chris-Higgins
Contributor | Platinum Partner

Hi Ajit,

 

Thanks for your reply. I'm not sure this will fix the issue I've encountered though, as the image source is still low resolution. It appears that, regardless of the size of the avatar that I upload on the blog author page, HubSpot resizes it to 80 x 80.  See here:

 

https://hubspot-avatars.s3.amazonaws.com/577ea596c3a8986b71051726e1c89b93-80

 

I'm trying to determine whether there's a way to call a different "full resolution" version of the image using {{ content.blog_author.avatar }}, or if I should just hard code the image into the template.  Hope I've explained that properly?  😬

Chris-Higgins
Contributor | Platinum Partner

@Chris-Higgins wrote:

 

https://hubspot-avatars.s3.amazonaws.com/577ea596c3a8986b71051726e1c89b93-80

 Interestingly, if I change the end of the above URL (-80) to "-100", I get a 100 x 100 version of the image. I've tried a bunch of other numbers (150 / 200 / 500 / 1000), but can only get a result using "80" or "100".

0 Upvotes
psdtohubspot
Key Advisor

Hi @Chris-Higgins 
Can you please provide Blog URL here or in private message I will provide you code, you just paste inside your template.

Chris-Higgins
Solution
Contributor | Platinum Partner

I think I've solved this.  Looks like the issue is that if you're using the HubSpot Profile avatar (the default), you're restricted to a small / low res image (about 80px). If you upload an avatar in the blog author settings, you're able to use a larger / hiher resolution image.

 

Screenshot 2020-04-18 at 12.19.56.png

View solution in original post

psdtohubspot
Key Advisor

Very Happy you find this solution 🙂

Have a nice day.

0 Upvotes