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

Arnox

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.
 

tourmeister

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

upnet

Active member
A lot of people want to display bigger avatars. I’m looking for the best way to do it too.
 

Lukas W.

Formerly katsulynx
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.
 

tourmeister

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

Arnox

Member
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;
}
}
 

tourmeister

Active member
Well... mostly anyway. When I am in a conversation, I get this,

192201

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

Arnox

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

Jordyn

Formerly EvilSS
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
 

tourmeister

Active member
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;
}
}
 

Jordyn

Formerly EvilSS
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/threads/how-to-enlarge-avatars-in-topic-view-without-blurriness.156674/#post-1312385

And is everything default in Style properties>>Avatars?
192488
 

tourmeister

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

Jordyn

Formerly EvilSS
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:

tourmeister

Active member
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.
 
Top