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?

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

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

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? [תמונה]

[תמונה] Mittineague: It might be easier to use the largest? It saves internet bandwidth if you’re downloading a smaller image. [תמונה] Mittineague: there are 16 copies of each uploaded avatar 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.

[תמונה] Drew_Warwick: slightly different process now. 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.

[תמונה] Mittineague: Widgets is the way to go for this. I’m not familiar with Widgets. Any pointers?

[תמונה] Drew_Warwick: Any pointers? 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 [תמונה] A tour of how the Widget (Virtual DOM) code in Discourse works Development This is out of date. See Widgets, the Widget API and their roadmap? The latest builds of Discourse are much faster at rendering topics thanks to our re-written post stream. I’ve written up our new plugin API but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works. What’s a Virtual DOM? A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq… . [תמונה] Updating Discourse Plugins, taking the first step Development I have to fully read the new plugin api format but my first problem actually has to do with this error: The discourse/components/post-menu object has been removed from Discourse and your plugin needs to be updated. PostMenu is a pretty important one and as far as I can tell does exist upon searching the Discourse repo on github. This is what is in the plugin: import PostMenu from 'discourse/components/post-menu'; import StringBuffer from 'discourse/mixins/string-buffer'; import { iconHTML } f… . [תמונה] Using the JS API Developer Guides Discourse’s JavaScript API allows themes and plugins to make extensive customizations to the user experience. The simplest way to use it is to create a new theme from the admin panel, click “Edit Code”, and then head to the JS tab. For file-based themes, the API can be used by creating a file in the api-initializers directory. For theme’s that’s {theme}/javascripts/api-initializers/init-theme.gjs, and for plugins, it’s {plugin}/assets/javascripts/discourse/api-initializers/init-plugin.js. The c…

If the script in the first topic @Mittineague linked is what you’re looking for, most up to date version if it helps: api.changeWidgetSetting('post-avatar', 'size', '70'); The effect is the same, but going through the plugin API should be more reliable, I think.

[תמונה] Yuun: The effect is the same, but going through the plugin API should be more reliable, I think. Absolutely, always prefer the api method, it will continue working for much longer cause we can add backwards compat as needed.

Here are two guides to increase the size of the avatars on posts and on the homepage Latest without the effect blurred: [תמונה] How to increase avatars size on posts without making them blurred Development loudspeaker warning This guide is now deprecated in favour of the theme component Avatar Size and Shape warning loudspeaker play_button Original Content https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606

How to increase Discourse avatar resolution with JS?

Product Support

sam (Sam Saffron) 1 באפריל,‏ 2016,‏ 12:34am 10

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

נושא		תגובות	צפיות
How to increase Header avatar size? Development	15	3814	9 בינואר,‏ 2019
How to increase avatars size on posts without making them blurred Development	11	13392	5 בדצמבר,‏ 2018
Size topic avatar Product Support	17	2574	15 בפברואר,‏ 2018
Adding a new Avatar Size in Admin Settings Product Support	4	2403	27 ביולי,‏ 2016
Increase avatar of Latest. Product Support	7	1301	11 ביוני,‏ 2018

How to increase Discourse avatar resolution with JS?

נושאים קשורים