Blog Author Avatar Size

[Chris-Higgins]

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

[Mna573]

The ideal size for a blog author avatar can vary depending on the design and layout of your website, but a common recommendation is to use a square image with dimensions around 150x150 pixels. This size is large enough to display a clear and recognizable image of the author's face or profile picture without taking up too much space on the page. However, you can adjust the size based on your website's specific design requirements while ensuring that the image remains crisp and visually appealing.

[psdtohubspot]

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]

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

[psdtohubspot]

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 · Accepted solution]

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.

[psdtohubspot]

Very Happy you find this solution 🙂

Have a nice day.

[Chris-Higgins]

---

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