How to increase Discourse avatar resolution with JS?

Support
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?

2

Take a peek at this method (and the post above it):
Don’t look at this, aparently it’s out of date
https://meta.discourse.org/t/how-to-change-topic-avatar-size/20689/5?u=deanmarktaylor

3

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

4 Likes
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?

optimized-avatars.png716×457 139 KB

2 Likes
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.

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.

1 Like
7

I’m not familiar with Widgets. Any pointers?

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
https://meta.discourse.org/t/avatar-size-handlebars-script-no-longer-working/29230?u=mittineague

others are

.

.

4 Likes
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.

6 Likes
10

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

2 Likes
13

Here are two guides to increase the size of the avatars on posts and on the homepage Latest without the effect blurred:

https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606

4 Likes