XF 2.0 Avatar Size
- Thread starter invictus
- Start date
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:
Please not that any change to that can cause blurry avatars.
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.
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
Basic example in message_macros:
Change
To this
Then use CSS and downscale that avatar to the desired dimensions. Repeat this step for any avatar occurrences.
<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" />
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
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
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
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.
Gator
Well-known member
What exactly would the CSS downscale look like if you don't mind me asking?
CyberAP
Well-known member
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]](/community/data/avatars/m/90/90390.jpg?1701363589){kind=avatar}
[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:
Any Help is very much appreciated.
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;
}
Last edited:
CyberAP
Well-known member
This would work only with modern browsers (no IE):
Replace ANY with your selectors and dimensions. Don't use
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
Will that code fix the issue with the images being blurry?
tourmeister
Active member
I found a great solution here,
xenforo.com
Start at post #5 in the thread and read down from there.
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.
Similar threads
- Question
