• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Avatar Size

invictus

Active member
#1
What is the recommended way to change avatar size for the default XF 2.0 theme?

I'd like them to be 150px wide and have a dynamic height if possible.

Thanks for the help.
 

CyberAP

Well-known member
#2
You can't change avatar physical size without writing an add-on, there's no such an option as avatar size. You can change the representational size by adjusting setup.less:

Code:
// AVATARS
@_avatarBaseSize: 96px;
@avatar-xxs: (@_avatarBaseSize) / 4;
@avatar-xs:  (@_avatarBaseSize) / 3;
@avatar-s:   (@_avatarBaseSize) / 2;
@avatar-m:   (@_avatarBaseSize);
@avatar-l:   (@_avatarBaseSize) * 2;
@avatar-o:   (@_avatarBaseSize) * 4;
Please not that any change to that can cause blurry avatars.
 

invictus

Active member
#3
Wow that seems like an obvious feature to overlook. Thanks for the info @CyberAP

The avatars are already being resized with what seems to be a very low jpg quality setting, so scaling up the display size will make them look very bad.

Is there a way to adjust quality settings for resized avatars? I tried uploading all kinds of images in various qualities, all of them get saved to mushy looking jpg's with visible artifacts.
 

CyberAP

Well-known member
#4
The solution would be identical to that in XF1. You edit all the templates that have <xf:avatar /> and increase the size to 1 step. Then you downscale them with CSS.

Basic example in message_macros:

Change
HTML:
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
To this
HTML:
<xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />
Then use CSS and downscale that avatar to the desired dimensions. Repeat this step for any avatar occurrences.
 

invictus

Active member
#5
Thanks again @CyberAP

Are you saying that by default, XF is creating a small image for avatars and then scaling it up for display at the default size in the default style? Is that why the avatars look so bad, and not due to a jpg quality/compression setting?
 

katsulynx

Well-known member
#6
Have a look into your data/avatars folder. Upon uploading, XenForo will create 5 versions of each avatar, scaled to the respective size. This will improve page load time especially for large avatars and mobile devices, but when you then try to enlarge a 48x48 (S Size) avatar, you'll obviously get blurry results.
 

invictus

Active member
#7
Have a look into your data/avatars folder. Upon uploading, XenForo will create 5 versions of each avatar, scaled to the respective size. This will improve page load time especially for large avatars and mobile devices, but when you then try to enlarge a 48x48 (S Size) avatar, you'll obviously get blurry results.
Thanks for the info.

It appears that my default theme is serving avatars from data/avatars/m/ directory. These are 96x96 which is the same as the display size. Meaning they are not being scaled up with CSS. The quality is just poor, so back to my previous question.

Is there a way to change the jpg quality/compression settings used when these images are created?
 

Gator

Active member
#9
It really should be an integral part of the forum software and included settings, but it's not. 96px is not very large and needs to be increased. I hope XF team reads this thread and make an effort to give us the ability to adjust the size in the near future.
 

CyberAP

Well-known member
#10
It really should be an integral part of the forum software and included settings, but it's not. 96px is not very large and needs to be increased. I hope XF team reads this thread and make an effort to give us the ability to adjust the size in the near future.
The actual size limit is 384px.