Profile Image Looks Blurry After Resizing

Support
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