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
public/uploads/default/optimized/1X/
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');
</script>

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.