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

[Arnox]

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.

 

[Jordyn]

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

Ok mate, remove this from your code for XF.2.1:

.message-cell.message-cell--user .avatar.avatar--default.avatar--default--text, .avatar.avatar--l
{
    font-size: 90px;
    display: block;
    position: relative;
}

So now you will be just using this:

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

 

[tourmeister]

That fixed it. Thanks!

 

[dbk]

Hi there -

I just had my site migrated from vBulletin and am trying to get a handle on this. I just tried the latest suggestions from @Jordyn and my avatars are still super blurry. Is this a product of the migration and the original avatar sizes or can it be fixed? The sizing and centering on dynamic avatars is fine.

Secondarily, I need avatars to be rectangular in proportion. My forum is a car forum, and unfortunately a square avatar basically dictates only one view, which virtually nobody has as their avatar.

Thanks!

 

[tourmeister]

I never really got the blurry issue fixed without the users simply having to upload a new avatar. If they tried to keep their previous avatar from vB, it just stayed blurry. Also, a LOT of their images got cropped in strange ways.

It seems that right now, if you have a rectangular image, XF uses the short dimension as the size of the new square avatar. So the ends of the rectangle get cut off. It would be nice if XF used the long dimension of the rectangle and just left a clear background above/below the image.

My forum is a car forum, and unfortunately a square avatar basically dictates only one view, which virtually nobody has as their avatar.

My forum is a motorcycle forum, so I frequently have the same issue.

 

[dbk]

Searching around, I'm getting the feeling I may just have to tell everyone to load new avatars. That sucks but people will live.

The Width:Height ratio of the cars is close to 4:1 so a 1:1 ratio definitely isn't optimal.

 

[tourmeister]

Searching around, I'm getting the feeling I may just have to tell everyone to load new avatars. That sucks but people will live.

This is basically what I have had to do.

The Width:Height ratio of the cars is close to 4:1 so a 1:1 ratio definitely isn't optimal.

It is not quite that bad for most motorcycles, but basically the same issue. If we could just figure out how to disable the cropping feature that forces the image to be square based on the short dimension, all would be good.

 

[Jordyn]

I have never had the blurry issue. Maybe because I had mine set at unlimited, idk.

But changing the height and max height to 170px. Or 20px more than your widths should look Ok?

 

[tourmeister]

But changing the height and max height to 170px. Or 20px more than your widths should look Ok?

Will that force a square image to be distorted to fit the rectangle size?

 

[Jordyn]

Will that force a square image to be distorted to fit the rectangle size?

I'll do some testing first man.

 

[dbk]

Will that force a square image to be distorted to fit the rectangle size?

It seemed to when I tried it, which ultimately is not that big a deal IF you tell all users to reset their avatars, but I have grumpy people who've been using the same avatars for over a decade.

 

[Jordyn]

It seemed to when I tried it, which ultimately is not that big a deal IF you tell all users to reset their avatars, but I have grumpy people who've been using the same avatars for over a decade.

Are you able to PM me a example link please. Like, I'm guessing it's common for any smaller avatar to become distorted if enlarged. But yeah, I get ya with the older members though.

 

[Gri]

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:

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

That's a wonderful solution for all kinds of posts. Thank you.