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

Arnox · Nov 22, 2018

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 · Dec 26, 2018

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 · Dec 27, 2018

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

Lukas W. · Dec 27, 2018

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.

Jordyn · Dec 27, 2018

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

tourmeister · Jan 7, 2019

Lukas W. said:
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...

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 · Jan 7, 2019

Jordyn said:
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.

tourmeister said:
Waa Waa Waa... 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 · Jan 7, 2019

Thank you. That seems to have helped!

tourmeister · Jan 7, 2019

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

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

Arnox · Jan 7, 2019

tourmeister said:
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.

tourmeister · Jan 7, 2019

Fixed!! Thank you!!

Jordyn · Jan 7, 2019

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.

tourmeister · Jan 12, 2019

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,

The letters are all shifted.

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

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 · Jan 12, 2019

tourmeister said:
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?

tourmeister · Jan 12, 2019

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 · Jan 13, 2019

tourmeister said:
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;
}

tourmeister · Jan 13, 2019

Perfect! Thanks!

tourmeister · Feb 5, 2019

So I just updated to XF 2.10. The dynamic text avatars are now shifted UP toward the top of the avatar,

instead of down like they were before in XF 2.012 as shown 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

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.

Jordyn · Feb 5, 2019

@tourmeister has your Dynamic avatar text size (%) or Dynamic avatar base line height changed at all mate?

tourmeister · Feb 5, 2019

Jordyn said:
@tourmeister has your Dynamic avatar text size (%) or Dynamic avatar base line height changed at all mate?

Set at default, 60% and 1.04. The only thing changed is the corner radius because I don't want the round avatars.

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

Active member

Active member

Active member

Well-known member

Well-known member

Active member

Active member

Active member

Active member

Active member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Active member

Active member

Well-known member

Active member

Similar threads

We value your privacy