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

XF 1.2 Remove HTML dimensions from avatars in posts

Discussion in 'XenForo Questions and Support' started by rellek, Aug 10, 2013.

  1. rellek

    rellek Well-Known Member


    is there a (simple) way to remove width and height attributes from the img tag that displays avatars in posts?
    I'd like to have them sized using CSS since I have to use the "l" version because of animated gifs. And old avatars are mostly 60x60, so if there's
    <img src="data/..." width="192" height="192" />

    and CSS
    img {
        max-width: 96px;
        max-height: 96px;
    will make all avatars to be displayed with 96x96. If they were smaller, they will be stretched by the browser. So if those html attributes would be away, everything would be fine...

    Thanks! :)
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. JulianD

    JulianD Well-Known Member

    As an additional tip to you, if you use imagemagick you can have animated avatars :)
  4. rellek

    rellek Well-Known Member

    Thanks. Does this width: auto overwrite the dimensions in the img-tag? Then, I could tell the system to use the l-avatar (which is already in use) and to have a max-width (and height). My problem right now is that the html attribute tells the browser that the image is 192x192 and max-width sets it to 96x96. Even if the original image is just 60x60.

    Thanks, but the problem here is more that those avatars are smaller than the pre-defined sizes, so imagemagick would stretch them too (but preserve animation, though). :)
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes, using the img-type avatar allows for an 'auto' dimension like in the CSS in those instructions:

    .thread_view .messageList .messageUserInfo a.avatar img,
    .thread_view .quickReply .messageUserInfo a.avatar img,
    .conversation_view .messageList .messageUserInfo a.avatar img,
    .conversation_view .quickReply .messageUserInfo a.avatar img
    	width: 142px;
    	height: auto;
  6. rellek

    rellek Well-Known Member

    Thanks, this works fine. However, you don't have to hack extra.css, you can have this as a legit style property. It's in General, Avatar.

Share This Page