Preventing XenForo from squashing and stretching avatars?

[DarkUnderlord]

Ok, on my forum we actually have an avatar gallery that was wonderfully made for us. Admins upload images into the gallery and users can choose from them.

However, XenForo insists on making every avatar a 96x96 pixel box. Our avatars often have varying widths and heights, are sometimes small, or sometimes tall. The current setup results in squished avatars or horribly pixellated stretched ones.

As I understand it, XenForo uses some hokey pre-set s m l sizes and rather than displaying the image between image tags, displays it as a "css background". This means that the box of css with this avatar set as the backgropund *needs* to have a set height and width, otherwise nothing is displayed.

And rather annoyingly, max-height and max-width - either of which would scale the images appropriately, don't work.

My question is: How can I rip-out this "s m l" crap and have the avatars appropriately scaled via css?

I had thought of simply calling the avatar image in the "message_user_info" template (where it currently has "<xen:avatar user="$user" size="m" />") and putting it within image tags there, but I'm unsure how to do that (and if I replace "m" with "l" there I still get bad style formatting with lots of unnecessary extra white-space around the avatar).

I also can't find the actual style code that creates the avatars in the templates to edit it (that is, turns the above line into the "<span class="img l" style="background-image: url('data/avatars/m/16/16640.jpg?1366264473')"></span>" code that displays the avatar image in the thread view).

 

[speedway]

Not sure how to do what you want to do but have you seen this:

http://xenforo.com/community/resources/avatars-big-tall.1741/

May give you some insight how to address the problem....

Cheers

 

[DarkUnderlord]

Oh, that was awesome. Thanks!

The: img="true" parameter in the avatar display actually makes it show as a real image, so you can scale it correctly using default in-built browser functionality.

 

[DarkUnderlord]

Ugh, it seems XenForo has some in-built image width and height code in it somewhere that I need to kill.

All avatars are now being displayed with code like: <img src="data/avatars/l/9/9531.jpg?1368069580" width="192" height="192" alt="UserName">

The max-width and max-height I set work great are limiting big avatars... but smaller avatars get stretched to those maxs because of the 'width="192"' code in the image tag itself.

Anyone know how to remove plz?

 

[James]

Ugh, it seems XenForo has some in-built image width and height code in it somewhere that I need to kill.

All avatars are now being displayed with code like: <img src="data/avatars/l/9/9531.jpg?1368069580" width="192" height="192" alt="UserName">

The max-width and max-height I set work great are limiting big avatars... but smaller avatars get stretched to those maxs because of the 'width="192"' code in the image tag itself.

Anyone know how to remove plz?

XenForo/Template/Helper/Core.php line 1570.

Instead of editing the core files (if you don't want to) you could create an add-on to overwrite the helper.

 

[DarkUnderlord]

Thanks! And yeah I might have to look into doing that (coding it as an add-on). The enforced avatar sizes everywhere don't play well with the collection of smaller and non-square images in our gallery. :/

 

[James]

Thanks! And yeah I might have to look into doing that (coding it as an add-on). The enforced avatar sizes everywhere don't play well with the collection of smaller and non-square images in our gallery. :/

http://xenforo.com/community/resources/how-to-create-your-own-helpers.332/

 

[Shelley]

http://xenforo.com/community/resources/how-to-create-your-own-helpers.332/

Just curious about this. Wouldn't having the avatars at the dimensions at their original dimensions cause the .messageUserBlock to be varies sizes? Adverse effects being the widths are of different sizes and be terribly out of alignment? Just more curious and than providing any feedback on the suggestion.

 

[James]

Just curious about this. Wouldn't having the avatars at the dimensions at their original dimensions cause the .messageUserBlock to be varies sizes? Adverse effects being the widths are of different sizes and be terribly out of alignment? Just more curious and than providing any feedback on the suggestion.

Provided the width remains consistent, only the height will vary.

The implementation of it is directly up to the OP, they could just remove the height attribute leaving the width fixed; which I think is what the OP wants.

But yes, if both are moved then there's a good chance the widths of the message block will vary

Speaking of which: @OP, the medium and small avatars are generated at the preset dimensions of 48x48 and 96x96, you cannot change that with CSS without causing stretching/squashing to occur. You'll have to use the large avatars.

 

[Shelley]

Provided the width remains consistent, only the height will vary.

The implementation of it is directly up to the OP, they could just remove the height attribute leaving the width fixed; which I think is what the OP wants.

But yes, if both are moved then there's a good chance the widths of the message block will vary

Thanks James. I'm wanting to shake my post area up a little and wondering which direction I want to go and thought since it's partially relevant I'd ask about it.

Apologies OP for barging in. Thanks again James.

 

[DarkUnderlord]

No worries.

Speaking of which: @OP, the medium and small avatars are generated at the preset dimensions of 48x48 and 96x96, you cannot change that with CSS without causing stretching/squashing to occur. You'll have to use the large avatars.

Yeah, I'm finding this out... Thanks to the link for coding a helper, I'll have to dig into that at some point.