Profile Image Looks Blurry After Resizing

I was trying to restyle and resize the profile image on user profile page using css. After resizing profile image through css it looks blurry and can’t find a way to fix the issue. Here’s a sample profile link to see the issue: Profile - manik755 - Biafland

You’re upsizing a 120x120 image to 500x500… You should use a higher quality image instead.

4 Likes

I’m using a 768x768px image on the sample profile.

is definitely 120x120.

1 Like

Well, the original image is 768x768px. But its getting resized to 120x120 after uploading which should be 500x500 or any of my defined image size for profile. I don’t know how to change the dimension for profile image.

However, its showing a 500x500 image but its originally the system resized image of 120x120.!!

Here’s the original image.

This happens because the avatar size requested in that template is “huge”

“huge” here means 120px for normal DPI screens and 240px for high DPI screens.

If you want to request 500px avatars, you need to override the template here

you can do it like so (in the Header section of your theme)

<script type="text/x-handlebars" data-template-name="components/user-profile-avatar">
<div class='user-profile-avatar'>
  {{bound-avatar user "500"}}
  {{#if user.primary_group_name}}
    {{avatar-flair
      flairURL=user.primary_group_flair_url
      flairBgColor=user.primary_group_flair_bg_color
      flairColor=user.primary_group_flair_color
      groupName=user.primary_group_name}}
  {{/if}}
  {{plugin-outlet name="user-profile-avatar-flair" args=(hash model=user) tagName='div'}}
</div>
</script>

You can read more about overriding Discourse templates here

Please note that if you override a template, and it changes in Discourse core, you need to update your override.

6 Likes

That’s great. It worked like a charm. Thank you

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.