1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Preventing XenForo from squashing and stretching avatars?

Discussion in 'Styling and Customization Questions' started by DarkUnderlord, May 9, 2013.

  1. DarkUnderlord

    DarkUnderlord Member

    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).
  2. speedway

    speedway Well-Known Member

    Jake Bunce likes this.
  3. DarkUnderlord

    DarkUnderlord Member

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

    DarkUnderlord Member

    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?
  5. James

    James Well-Known Member

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

    DarkUnderlord Member

    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. :/
  7. James

    James Well-Known Member

  8. Shelley

    Shelley Well-Known Member

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

    James Well-Known Member

    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 likes this.
  10. Shelley

    Shelley Well-Known Member

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

    DarkUnderlord Member

    No worries.

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

Share This Page