Announcement

Collapse
No announcement yet.

Avatars blurry looking in postbit

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Avatars blurry looking in postbit

    As the topic says, the avatars of all our forum members get blurry. Not sure if this is a vB cloud issue or overall vB5 issue, but as I am running vB cloud I am posting this here.
    Some avatars look worse than others, but I guess that's up to how detailed and busy the original was.

    In Usergroup Manager the upload avatar maximum dimensions is set to 112x60
    The original picture used is 112x60 pixels
    The avatars shown in the users' profiles are 112x60 and not blurry
    The avatars show in postbit are 112x60 pixels, but blurry

    I DO HAVE some additional CSS added which stretches square 60x60 avatars into 112x60. But even those feel less blurry than the ones with the correct dimensions. If I remove this the square 60x60 px avatars remain square (no big deal), but the rectangular ones get various sizes. A few is 112x60, but some are smaller. Even if the picture uploaded are at those exact dimensions.

    Is it the CSS that is messing it up?
    Why isn't all avatars the same size even if the files uploaded are the same size originally (without the CSS)

    Is the only way to avoid this to make square avatars? And will they also look funky if I change the size in usergroup manager to be larger than 60x60 pixels (of course new pictures would need to be uploaded)?

    In postbit
    Click image for larger version  Name:	avatarprob1.png Views:	14 Size:	41.4 KB ID:	4414967

    In user profile
    Click image for larger version  Name:	avatarprob2.png Views:	11 Size:	41.3 KB ID:	4414968

    Code:
    /* Start over-ride postbit avatar size */
    .b-avatar--m > img {
        max-height: 60px;
        max-width: 112px !important;
    }
    .b-avatar--m {
        height: 100%;
        width: 100%;
    }
    .b-avatar--m > img {
        height: 60px;
        width: 112px !important;
    }
    /* End over-ride postbit avatar size */
    Last edited by Stigur; Sun 12th May '19, 9:37am.

  • #2
    The system isn't really designed to show rectangular avatars. The system is going to present a square thumbnail and then you're telling the browser to resize that. So vBulletin resizes the image down to fit the square of the thumbnail and then you stretch that out with CSS. This will lead to pixelation.

    The User Profile is designed to show the full size image at 200 X 200 pixels. So your smaller image can be shown without resizing.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • Stigur
      Stigur commented
      Editing a comment
      So, in short, what you are saying is that square avatars is the way to go in vb5?
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X