XF 2.0 Avatar Size

invictus

Active member
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
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
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
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
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?
 

Lukas W.

Well-known member
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
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?
 

CyberAP

Well-known member
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.
 

[xFv]

Well-known member
I have tried everything I can think off trying to get dynamic height for the message avatar using css.
I am using a 300x600 image avatar, I upped the size in message macros, and this is what I am using for css:
Code:
.message-cell .avatar--l
{
    width: 96px;
    height: auto;
}
Any Help is very much appreciated.
 
Last edited:

CyberAP

Well-known member
This would work only with modern browsers (no IE):

CSS:
body .avatar.size--ANY
{
    width: ANY;
    height: ANY;
}

body .avatar img:not(.cropImage)
{
    object-fit: contain; /* or object-fit: cover; if you want avatars to cover the box completely */
}

Replace ANY with your selectors and dimensions. Don't use auto there. Also, don't forget to change the actual size property in xf:avatar.
 

tourmeister

Active member
This would work only with modern browsers (no IE):

CSS:
body .avatar.size--ANY
{
    width: ANY;
    height: ANY;
}

body .avatar img:not(.cropImage)
{
    object-fit: contain; /* or object-fit: cover; if you want avatars to cover the box completely */
}

Replace ANY with your selectors and dimensions. Don't use auto there. Also, don't forget to change the actual size property in xf:avatar.

Will that code fix the issue with the images being blurry?
 

tourmeister

Active member
I found a great solution here,


Start at post #5 in the thread and read down from there.
 
Top