How to increase Discourse avatar resolution with JS?

(Drew) #1

I prefer to increase the avatar sizes on Discourse so I can see them better. You’ll run into an issue doing this though because since the avatar images are 45x45 pixels, if you stretch them they get blurry. I had been using a snippet of of javascript (not made by me, and I forgot where I found it) to upscale the resolution of avatars since around last September, but a month or two ago it stopped working. Here is what I was using:

var originalAvatarImg = Discourse.Utilities.avatarImg;

Discourse.Utilities.avatarImg = function(options) {
    if (options.size === 'large' || options.size === 45) {
        options.size = 120; 
    return originalAvatarImg(options); 

Discourse.Utilities.avatarImg({size: "large"});

What was changed in Discourse in the past month or two that would break this, and how can I change that code to fix it?

(Dean Taylor) #2

Take a peek at this method (and the post above it):
Don’t look at this, aparently it’s out of date

(Kane York) #3

That’s out of date with the widget post rendering, I think.

(Mittineague) #4

From what I see in
there are 16 copies of each uploaded avatar ranging from 20x20 to 360x360
Notice the end of the file names. It might be easier to use the largest?

(Drew) #5

It saves internet bandwidth if you’re downloading a smaller image.

Yeah, I had discovered that there were multiple sizes and Discourse didn’t just use the biggest one when the avatars were blurry after resizing them. I could watch for each element created in a userscript and update the avatars to use an image URL that pointed to an image with a higher resolution, but manually updating each and every element gets hairy. Prior to some of Discourse’s recent changes, the fix was as simple as changing a Discourse setting, and I assume that’s still possible but is accomplished through a slightly different process now.

(Mittineague) #6

Perhaps not so "slightly"
With the vdom perf improvement the post template is gone. And as riking mentioned Widgets is the way to go for this.

(Drew) #7

I’m not familiar with Widgets. Any pointers?

(Mittineague) #8

Not many. I’m still going through the “getting familiar” stage for the most part and haven’t had time to try any of it yet.

I have a few topics bookmarked.
The one likely to be of most interest to you is

others are



(Sam) #9

If the script in the first topic @Mittineague linked is what you’re looking for, most up to date version if it helps:

<script type="text/discourse-plugin" version="0.2">
    api.changeWidgetSetting('post-avatar', 'size', '70');

The effect is the same, but going through the plugin API should be more reliable, I think.

(Sam Saffron) #10

Absolutely, always prefer the api method, it will continue working for much longer cause we can add backwards compat as needed.