How to increase avatars size on posts without making them blurred

dev
1

:loudspeaker: :warning: This guide is now deprecated in favour of the theme component Avatar size and shape :warning: :loudspeaker:

1. Increase size and reposition the avatar

To increase the avatar size from 45px (default) to max 120px add the code above in your customize > themes > Desktop > CSS tab
(I mean, do you really need avatars bigger than 120px? :exploding_head:)
In the example above I increased the avatarā€™s size to 90px and repositioned it

/*Increase avatars*/

.topic-avatar {
  width: 90px;
  .avatar {
    width: 90px;
    height: 90px;
  }
}

/*Avatars in the embedded replies will remain the default size, 
increase or decrease the size according to your needs*/

.embedded-posts .topic-avatar {
  width: 45px;
  img.avatar {
    width: 45px;
    height: 45px;
  }
}

rtlrjtP.png1064Ɨ630 71 KB

But if you use the flair for the primary groups they will be too small now

2. (Optional) Increase size and reposition flairs

Letā€™s increase the flair a little. By default it is 14px, I double the size to 28px.
Depending on the size of the avatars you have chosen, you will have to increase or decrease the size of the flair accordingly.

/*Increase the flair size*/

.topic-avatar .avatar-flair {
  font-size: 28px;
  width: 30px;
  height: 30px;
}

/*Leave the default size on the embedded posts,
increase or decrease the size according to your needs*/

.embedded-posts.bottom .topic-avatar .avatar-flair {
  font-size: 14px;
  width: 20px;
  height: 20px;
}

3. No more blurred avatar.

Add this script under Desktop > Head tab. Remember to change the size (ā€˜90ā€™) with the size you have chosen

<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '90');
});
</script>

17 Likes
3

has this script been broken in Discourse 2 Beta 10? The 90px avatars look blurred (the one on the left).
39%20PM

5

I have tried this on a Material Design Theme and the ā€œfont-size:ā€ field is not changing the flair size no matter the size iā€™m setting. The width and height does change the position of the flair meaning they are working but the font-size not. Any ideas how to solve this?

6

I will take a look Monday Friday

3 Likes
7

@Mr.X_Mr.X have you tried to clear your browserā€™s cache?

This is the only reason why at the beginning I did not correctly load the component and the material design theme

3 Likes
8

is there any way to change the avatar size for topics of one category?

I know this can be done via css, but I want the javascript to be also limited for the specific category so that it doesnā€™t load large images for the unnecessary cases.

9

CSS doesnā€™t instruct a browser on what size images to get for the avatars. It instructs a browser on what size to render the images itā€™s served. What you need to be concerned about is not ā€œloading largeā€ images. But retaining quality when smaller dimension images are displayed larger than they are. (usually enlarging small images larger is a poor idea, but you should be able to get a bit of a tweak by OK)

10

p.s.: I donā€™t know how to explain what I mean, and thanks in advance for your patience.

to get a 90px image, for the avatar, as explained above, I should use a script:

now I want this script to work only for a specific category. is it possible to achieve this via js, such taht other categories get 45 px avatar as usual?

11

Thanks, it was me, not you. I was thinking you wanted to use CSS to control image size instead of modifying this

<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '90');
});
</script>

Iā€™m pretty sure I have seen JavaScript for using categories in conditional checks, but it will take me a while to track it down, if it exists.

3 Likes
12

It seems not to work after latest update.
HTML for topic avatars now looks like this:

<img alt="" width="45" height="45" src="/user_avatar/example.com/username/45/2710_1.png" title="Full Name" class="avatar">
3 Likes
13

I just tested the code from @Mittineague locally, and it works. The size of the image is set to 90px wide in the HTML:

image
image.png1028Ɨ420 61.6 KB

And the images display at 90px as well.

3 Likes
14

Yeah, after copypasting it it works once again, but no idea why, as only difference was this bit of code :face_with_raised_eyebrow:

<script type="text/discourse-plugin">
3 Likes