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

XF 1.2 Changing avatar dimensions

Discussion in 'Styling and Customization Questions' started by Crimson, Mar 3, 2014.

  1. Crimson

    Crimson Member

    Hi guys. I want to change the avatar dimensions on my forum to 150x300 (or 150x200). How do I go about changing that? :)
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's hard-coded. Guide:

    http://xenforo.com/community/threads/which-style-property.31695/#post-363047

    Changing the default sizes will not retroactively rebuild the resized versions of avatars, and I am not aware of any tool for this.

    I suggest leaving the defaults alone. You can work with the existing "large" avatars. The "large" avatar images are original (not resized), and you can apply custom CSS to them to present them in any size you want. Example:

    http://xenforo.com/community/resources/avatars-big-tall.1741/
     
    Crimson likes this.
  3. Crimson

    Crimson Member

    Thanks, Jake!

    But, the image also stretches. Is there a way to avoid that? :)
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Can you show me the problem?

    Stretching is probably the result of forcing dimensions on the image. This example avoids that problem by setting a fixed width with an 'auto' height:

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

    Crimson Member

    The images are LQ right now but when I change the dimensions to 150 width and 300 height, the images stretch.

    http://cineforums.net/threads/how-did-you-find-us.59/

    It's currently in the same settings as said in your resource. :)
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You are still using the 'medium' size avatars. That means you didn't make the change to message_user_info like in that example. 'Medium' avatars are 96x96 native and will "stretch" if you use CSS to make them bigger. "Large" avatars are up to 192x192 native so you have more resolution to work with (assuming the original image is at least that big to begin with).
     
    Crimson likes this.
  7. Crimson

    Crimson Member

    Nevermind! I had forgotten to change from m to l in the message_user_info template.

    Thanks for your help, Jake! :)

    Edit: ninja'd. Yeah, my bad. :p
     
  8. Velox

    Velox New Member

    I'm having a similar problem. We changed it to "L," but if we upload an image that is bigger than the custom avatar size, it squishes it down and completely destroys the constrained proportions.

    Is there any way to stop this from happening? Even in vBulletin it keeps the images constrained when making them smaller to fit the avatar window. It also seems like the "custom crop" doesn't work in this state either since it doesn't expand to fit the new avatar size.
     
  9. Crimson

    Crimson Member

    You have to add the following to EXTRA.css

    [Admin CP > Appearance > Templates > EXTRA.css]

    Code:
    .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;
    }
    
    .messageUserInfo
    {
        width: 170px !important;
    }
    
    .message .messageInfo,
    #QuickReply
    {
        margin-left: 186px !important;
    }
     
  10. Velox

    Velox New Member

    Dino,

    I'm going to give this a go and see if that helps. Will this help with the constrained proportions as well? Does it correct the custom crop option when uploading an avatar?

    Thanks a bunch! I'll let you know if this helps!
     
  11. Velox

    Velox New Member

    Hey Dino -- this is what my CSS guy just told me... Any idea on this?

    "Yeah, got it set up. Only problem is height which can be anything unless I restrict it but then anything bigger it'll deform it."

    Any way to prevent it from deforming?
     
  12. mistypants

    mistypants Well-Known Member

    If any of your custom widths or heights are above 192px then you're going to be deforming the images -- 192 by 192 is the maximum size that Xenforo stores avatars. You can change this by editing avatar.php (forgot the exact path to the file).
     
  13. Velox

    Velox New Member

    @mistypants That's not true because we set the dimensions to 130x170 and the deformation was still taking place on anything larger than 170. Unless you mean something else and I'm not understanding.
     
  14. mistypants

    mistypants Well-Known Member

    Are you specifying these dimensions through CSS? If so, are you using an explicit width and height (e.g. all avatars are stretched to 130 by 170)? What I do is specify 200px as the max width, then set the height to auto. That way, smaller avatars are not stretched and larger ones keep their aspect ratio.
     
  15. Velox

    Velox New Member

    No, we're not. If an avatar is smaller than 130x170, it keeps its ratio and just makes the avatar box fit that avatar size, but if we go beyond the 130x170, it squishes it into the box... We tried to do the auto-height, but then if someone upload an avatar that is 500 pixels high, it allows for a towering avatar and that's kind of the opposite of what we want.
     
  16. mistypants

    mistypants Well-Known Member

    Could you link to a page with the problem? That way I can inspect. But to my knowledge, even if someone uploaded an image that was 500px in height, its maximum would still be 192px because that's the l avatar size in Xenforo. You could also just specify a maximum height.
     
  17. Velox

    Velox New Member

  18. mistypants

    mistypants Well-Known Member

    Code:
    .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 {
    height: auto;
    max-width: 130px !important; }
    Pretty sure that's all you need. It's not necessary to specify a maximum height because you're displaying the 'l' sized avatar, which will never exceed 192px (though XenForo still stores a larger version).
     
  19. Velox

    Velox New Member

    I'll try it out... Do I just C&P it like that or do I need to format it differently?
     
  20. Velox

    Velox New Member

    @mistypants Tried it... Look now. It pushed our avatars to a 290 pixel height... didn't constrain the aspect ration and limit it to 192.

    Any other ideas?
     

Share This Page