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: https://community.biafland.com/u/manik755/summary

This happens because the avatar size requested in that template is “huge” app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs 637850d86 {{bound-avatar user "huge"}} {{#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'}} “huge” here means 120px for normal DPI screens and 240px for high DPI screens. app/assets/javascripts/discourse/lib/utilities.js.es6 84d4c81a2 return 20; case "small": return 25; case "medium": return 32; case "large": return 45; case "extra_large": return 60; case "huge": return 120; } return size; } export function escapeExpression(string) { // don't escape SafeStrings, since they're already safe if (string instanceof Handlebars.SafeString) { return string.toString(); } 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) {{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'}} 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.

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

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

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)]

Here’s the original image. [Robert%20G%20Maines]

Profile Image Looks Blurry After Resizing

Product Support

aronno755 (Aronno Bhowmick) December 21, 2018, 12:44pm 8

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

Topic		Replies	Views
How to increase Discourse avatar resolution with JS? Product Support	10	3748	January 2, 2019
Adding a new Avatar Size in Admin Settings Product Support	4	2402	July 27, 2016
How to increase avatars size on posts without making them blurred Development	11	13387	December 5, 2018
Arbitrary nonproportional image resizing Product Support	1	139	January 20, 2025
Increase avatar of Latest. Product Support	7	1299	June 11, 2018

Profile Image Looks Blurry After Resizing

Related topics