How to change topic avatar size?


Anyone know how to edit the topic only avatar? I tried to edit img.avatar but it break in other places

Size topic avatar
(Sam Saffron) #2

Having trouble parsing this… but if you mean

No built in support for this at the moment, you would need a custom plugin and it would be tricky.

You can do this in CSS but avatars would be blurry. I am fine to amend it so we “figure out” avatar size based on existing CSS, but this is not done quite yet.


Yep I meant that
I see so it’s not easily changed :frowning:

(Rodrigo) #4

I’ve been mucking around with the CSS and editing the code directly… So far I found this:

‘ImaMarty’ is my username on the forum… I managed to change the width and height of the avatar to 120px, also by pointing the img source to /user_avatar/ 120 /10.png (minus spaces) and it looks exactly how I want it without any other part of the site changing…

<div class="topic-avatar">
      <div class="contents">
          <a href="/users/ImaMarty" classnames="trigger-user-card main-avatar" data-user-card="ImaMarty"><img src="/user_avatar/" class="avatar" title="ImaMarty" height="120" width="120"></a>          

I changed in the < head > component to this (not sure if proper place to put it)

    border-top:1px solid #e9e9e9;

But as you guessed it, the WHOLE forum changes to 120px, and blurred, the 45px x 45px default mostly…

How can I i get /user_avatar/ 45 /10.png
to be
/user_avatar/ 120 /10.png as shown in the above automatically.


(Kane York) #5

Put this in </head>.

<script type='text/x-handlebars' data-template-name='post/poster-avatar.raw'>
<a href="{{post.usernameUrl}}" classNames="trigger-user-card {{classNames}}" data-user-card="{{post.username}}">{{avatar post imageSize="120"}}</a>

The change is imageSize="120", of course.

How to increase Discourse avatar resolution with JS?
(Rodrigo) #6

GENIUS!!! Starting to take shape now, thanks heaps :smile:

Increase Avatar Size to 120x120 pixels
(Sebastian) #7

Please share your results, @SiriusAnkh :smile:

(Joe Fedric) #8

Hey all, I’m just not able to get the script to use the higher resolution avatars working. Not sure what I’m missing, but I have a blurry avatar issue, that I’d love to get rid of. Forums are here, fwiw:


(Sam) #9

The script above (the plugin API version) is what ya need now.

(Joe Fedric) #10

This is what I’m using, no? I have a few extra classes added as an attempt to be more specific, but the script does not seem to be impacting the quality of the avatar. I still get 32x32px images in my current-user avatar…


(cpradio) #11

Did you check your corresponding avatar sizes setting?

(Sam) #12

I don’t think any of those except for post-avatar do anything, but that’s the correct form, yeah.

(Joe Fedric) #13

Those additional lines were more out of desperation, I was targeting a class, but clearly it doesn’t work.

Didn’t think of this, but I have 45x45, 60x60, and 120x120 listed. No 32x32 there (removed), so I’m not sure what’s going on.

(Joe Fedric) #14

All the values I’ve tried still give me this:

I noticed that the image briefly went from 32px to 64px, but I had not changed anything when it switched, and it promptly switched back to the lower 32px resolution. So confused.

(Sam) #15

Ah, that widget setting is only for the avatar size within a topic, not in the header.

(Joe Fedric) #16

Right. I need to access the larger avatar size images for the header. It’s tiny by default, and only increasing the size does not increase the resolution.

(Sam) #17

You can change the avatar size in the header as described here: How to increase Header avatar size?

But it’s not an especially good idea to do so…

Maybe if we ask @eviltrout really nicely to add a setting for the header avatar, as well? :slight_smile:

(Joe Fedric) #18

Brilliant! That’s what I was looking for. I guess I didn’t search well enough - shame on me, I have to search for solutions all day and simply overlooked that thread.

I’d like to note, I did not increase the image size very much (from 32px to 50px), but that blur was killing me. I had to change the ‘medium’ to ‘huge’, to get the resolution corrected, but I’m very glad it is now displaying correctly. I don’t really care much for settings/toggles, as long as I can get it working, though that would be a nice option to have for the less technically inclined.


(Sam) #19

I haven’t used that script myself, but you should be able to just use 50 as the size instead of using ‘huge’ and downscaling, I think? That might be a better idea than using huge, which is 120px… maybe… I’m forgetting about that.

Make sure to check your site on mobile as well, maybe you don’t want avatars that large there. :slight_smile:

Using the plugin API’s changeSetting thing is more about making the customization much less likely to break in the future, not (as much) about the difficulty of the code.

(Joe Fedric) #20

The mobile version is also restricted to 50px, which looks fine. I tried using 50 and 60, but the image was still blurry, so I’ll stick with the 120px - both ‘huge’ and ‘120’ work fine.

I’m also seeing some blur in the post-avatar, now that the current-user avatar is clear. Any quick way to increase the resolution in the same way we did for the current-user avatar? These are slightly larger at 70x70px, though the 120px avatar should look fine there.