Profile Image Looks Blurry After Resizing

Support
1

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

2

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

4 Likes
3

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

4

is definitely 120x120.

1 Like
5

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.!!

Profile%20-%20manik755%20-%20Biafland%20(1)
Profile - manik755 - Biafland (1).png1346×625 186 KB

6

Here’s the original image.

Robert%20G%20Maines
Robert G Maines.jpg768×768 92.2 KB

7

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

https://github.com/discourse/discourse/blob/637850d8672855574aea8a43e5e1c1ad40ce0861/app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs#L2

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

https://github.com/discourse/discourse/blob/84d4c81a26bb585f67809c6f8af25c2a385de754/app/assets/javascripts/discourse/lib/utilities.js.es6#L19

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
8

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

2 Likes
9

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