XF 2.0 Avatar Size

[invictus]

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]

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:

// 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]

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]

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

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

To this

<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]

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.]

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]

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?

 

[Lukas W.]

I haven't seen anything in the ACP for that, so probably only with an add-on.

 

[Gator]

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]

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.

 

[Gator]

Then use CSS and downscale that avatar to the desired dimensions. Repeat this step for any avatar occurrences.

What exactly would the CSS downscale look like if you don't mind me asking?

 

[CyberAP]

What exactly would the CSS downscale look like if you don't mind me asking?

You explicitly set width and height of an element. If your image is displayed as a background image it's best to also set background-size: cover;

 

[[xFv]]

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:

.message-cell .avatar--l
{
    width: 96px;
    height: auto;
}

Any Help is very much appreciated.

 

[CyberAP]

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

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]

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

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?

 

[Lukas W.]

No. You'll need to load a higher resolution image before scaling it with CSS. The blurriness comes from upscaling and no CSS code will be able to solve that.

 

[tourmeister]

I found a great solution here,

XF 2.0 - How to enlarge avatars in topic view without blurriness?

I'm simply trying to enlarge the avatars just a bit in message view, but when I go into setup.less and make the medium size a little bigger (as seen here: https://xenforo.com/community/threads/avatar-size.135801/ ), it does work, but every avatar gets just a little bit blurry. Looks like it's...

xenforo.com

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