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

Arnox

Active member
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 upscaling from the standard 96x96 avatar size when I do so instead of downscaling from the 192x192 size as it's supposed to be doing. Reuploading an avatar doesn't fix it either.

I would provide a link to the forum but I've since removed the changes in setup.less, so it's now back to the default avatar size.
 
I am having this same issue. I don't need huge avatars. I set them to 120 X 120 because my users seem to like that (as do I). But they are slightly blurry no matter what I do with the original image before uploading it. I've tried a bigger image like the note says where you upload them (400 X 400 or bigger). But they still look like they are all slightly out of focus.
 
You'll need to change the respective places in the templates to load the higher resolution images prior to applying CSS to scale them. The CSS size is applied client side long after the image wa loaded, so you can't expect it to load the most appropriate image based on the size you define in CSS.
 
You'll need to change the respective places in the templates to load the higher resolution images prior to applying CSS to scale them. The CSS size is applied client side long after the image wa loaded, so you can't expect it to load the most appropriate image based on the size you define in CSS.

Waa Waa Waa... :p I am a total user, not a coder. I need a nice clean add-on that I can just install and go. I know nothing about CSS, templates, etc,... I just kind of fell into this whole admin thing. I had no idea what I was getting into all those years ago.
 
Try the template edit in message_macros, changing m to l as stated here? https://xenforo.com/community/threads/postbit-avatar-size.152096/#post-1273579

This worked perfectly! Thank you! I thought for a while that it couldn't be done.

Waa Waa Waa... :p I am a total user, not a coder. I need a nice clean add-on that I can just install and go. I know nothing about CSS, templates, etc,... I just kind of fell into this whole admin thing. I had no idea what I was getting into all those years ago.

Jordyn's solution works like a charm. No blurring. Basically, for every "parent" style you have (style that doesn't have anything inherited from another style), go into message_macros (search for it on the top right corner of the admin CP) and change size="m" to size="l" and then just copypasta this into the style's extra.less:


CSS:
.message--post .message-inner .avatar {
height: 120px;
width: 120px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}
 
Well... mostly anyway. When I am in a conversation, I get this,

View attachment 192201

But everything looks fine everywhere else. Did I miss something?

Damn it, you're right. We missed one other thing. OK, so we just need to add one more entry in extra.less

Instead, put all this in:

CSS:
.message--post .message-inner .avatar {
height: 120px;
width: 120px;
}

.message--conversationMessage .message-inner .avatar {
height: 120px;
width: 120px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}

Make sure to do it for each needed style as before. That should fix everything.
 
Awesome guys. I "think" i found a much more simple code which only effects Conversations and Posts. This doesn't mess up anything else on mobile etc.

Give this a test please.

If the avatar is bigger, go to Style properties>>Messages and change the Message user info block width "bigger". Example 160.
try this, as long as you do the template edit.

Edit the width to your liking's of course.
Add to extra.less
Code:
.avatar.avatar--l {
    max-width: 150px;
    width: 150px;
    height: 150px;
    max-height: 150px;
}

As stated in my other post,
Next, find in templates "message_macros"
Code:
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Replace the above code with this code.
Code:
<xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />

Works with XF2.0/2.1. Hope this is better guys.

192212
192213
 
Okay, so one last issue I just noticed. When reading a thread or viewing a conversation, users that have not uploaded avatars but have the letters all look like this,

192481

The letters are all shifted.

In a thread list in any forum, they look fine,

192482

Any idea what might be causing this?

This is what I have in my extra.ess

Code:
// Code for fixing blurry avatars
// the message_macros template was edited to change size from "m" to "l"
.message--post .message-inner .avatar {
height: 120px;
width: 120px;
}

.message--conversationMessage .message-inner .avatar {
height: 120px;
width: 120px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}
 
Okay, so one last issue I just noticed. When reading a thread or viewing a conversation, users that have not uploaded avatars but have the letters all look like this,

View attachment 192481

The letters are all shifted.

In a thread list in any forum, they look fine,

View attachment 192482

Any idea what might be causing this?

This is what I have in my extra.ess

Code:
// Code for fixing blurry avatars
// the message_macros template was edited to change size from "m" to "l"
.message--post .message-inner .avatar {
height: 120px;
width: 120px;
}

.message--conversationMessage .message-inner .avatar {
height: 120px;
width: 120px;
}

@media (max-width: 480px) {
.message--post .message-inner .avatar {
height: 48px;
width: 48px;
}
}
Hi mate,

I suggest removing my old code and trying this: https://xenforo.com/community/threa...-view-without-blurriness.156674/#post-1312385

And is everything default in Style properties>>Avatars?
192488
 
Everything is default for Avatar style properties.

I replaced the code I posted above with the code in the post you linked to.

Everything looks exactly the same and before...

Regular images are centered, but the letter based avatars are all shifted down so that the bottom of the letter is cut off.

I played around with Dynamic avatar base line height in the Avatar style properties and found that if I use a value of .75, the letters are centered top to bottom when viewing messages/conversations. However, when viewing a thread list where the avatars are smaller, they are now shifted up... 😕 I cannot find a value that gets both centered.
 
Everything is default for Avatar style properties.

I replaced the code I posted above with the code in the post you linked to.

Everything looks exactly the same and before...

Regular images are centered, but the letter based avatars are all shifted down so that the bottom of the letter is cut off.

I played around with Dynamic avatar base line height in the Avatar style properties and found that if I use a value of .75, the letters are centered top to bottom when viewing messages/conversations. However, when viewing a thread list where the avatars are smaller, they are now shifted up... 😕 I cannot find a value that gets both centered.
Try this mate. This is for 120px.
Code:
.avatar.avatar--l {
    max-width: 120px;
    width: 120px;
    height: 120px;
    max-height: 120px;
}
.message-cell.message-cell--user .avatar.avatar--default.avatar--default--text, .avatar.avatar--l
{
    font-size: 70px;
    display: block;
    position: relative;
}


140px
Code:
.avatar.avatar--l {
    max-width: 140px;
    width: 140px;
    height: 140px;
    max-height: 140px;
}
.message-cell.message-cell--user .avatar.avatar--default.avatar--default--text, .avatar.avatar--l
{
    font-size: 80px;
    display: block;
    position: relative;
}


150px
Code:
.avatar.avatar--l {
    max-width: 150px;
    width: 150px;
    height: 150px;
    max-height: 150px;
}
.message-cell.message-cell--user .avatar.avatar--default.avatar--default--text, .avatar.avatar--l
{
    font-size: 90px;
    display: block;
    position: relative;
}
 
Last edited:
So I just updated to XF 2.10. The dynamic text avatars are now shifted UP toward the top of the avatar,

194788

instead of down like they were before in XF 2.012 as shown here,


It only happens when viewing messages in a thread or conversation. When viewing nodes and node lists, they are centered.

User custom avatars are fine.

This is what I have in my extra.less

Code:
// Code for fixing blurry avatars
// the message_macros template was edited to change size from "m" to "l" on line 10
.avatar.avatar--l {
    max-width: 150px;
    width: 150px;
    height: 150px;
    max-height: 150px;
}
.message-cell.message-cell--user .avatar.avatar--default.avatar--default--text, .avatar.avatar--l
{
    font-size: 90px;
    display: block;
    position: relative;
}

My avatar settings in Style Properties are default except for the corner radius, which is set to 2 px.

I do still have edit in the message_macros template on line 10 to change the "m" to "l". If I change it back to "m", the dynamic avatar letters are centered again.
 
Back
Top Bottom