BuddyDev

Search

Blurry-avatar-images

  • Keymaster
    (BuddyDev Team)
    Posts: 24344
    Brajesh Singh on March 28, 2023 at 11:28 am #48959

    Hi Carsten,
    You need to make sure that the image dimension that you are using is less than or equal to the cropped image.

    Since BuddyPress sets 2 sizes(thumbnail 50px, full 150px), if you use thumb at larger than 50 and full larger than 150px, they will not look sharp.

    You can use the code from my post to set your own larger avatar sizes.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 28, 2023 at 11:43 am #48962

    Hi Brajesh, so where is BP using the two formats, thumbnail size 50×50 for widgets and directories, and full size on profile page?

    You wrote that BuddyPress sets 2 sizes(thumbnail 50px, full 150px).

    But if you are using Member Types Pro, the full image size is 260×260?

    https://imgur.com/ul80OtB

    “if you use thumb at larger than 50 and full larger than 150px, they will not look sharp.”

    Just to clarify, so if I want to use larger than 150px, eg. 450px for my full width size on mobile, I should just add this size to this code?
    https://buddydev.com/changing-default-avatar-size-croppedused-by-buddypress/

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 28, 2023 at 1:25 pm #48963

    Hi Brajesh, if you are not using Member Types Pro or the changing default avatar code, does BP then create two sizes of avatars, a 50×50, and an 150x150px of the image you upload and crop?

    Where are they stored?

    Regards
    Carsten

  • Keymaster
    (BuddyDev Team)
    Posts: 24344
    Brajesh Singh on March 28, 2023 at 6:07 pm #48966

    Hi Carsten,
    Thank you for the replies.
    Member Types Pro will not have any effect on your css/avatar other than it filters the default avatar.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 28, 2023 at 6:16 pm #48969

    Hi Brajesh, thank you, now my avatars are sharp in the profile header, but the avatars in the widgets are not.

    https://imgur.com/YgI3gua

    “if you use thumb at larger than 50 and full larger than 150px, they will not look sharp.”

    But an avatar smaller than that, like in a widget, should be sharp then?

    In which case should I use the code below?

    Regards
    Carsten

    if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
    define( 'BP_AVATAR_THUMB_WIDTH', 50 ); //change this with your desired thumb width
 
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
    define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); //change this with your desired thumb height
 
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
    define( 'BP_AVATAR_FULL_WIDTH', 260 ); //change this with your desired full size,weel I changed it to 260 :)
 
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
    define( 'BP_AVATAR_FULL_HEIGHT', 260 ); //change this to default height for full avatar
  • Keymaster
    (BuddyDev Team)
    Posts: 24344
    Brajesh Singh on March 28, 2023 at 6:42 pm #48970

    Hi Carsten,
    Thank you.

    I had a look at the widget. The widget is using thumbnail and the size it uses is 50px but you are using css to force it to be 110px and that is causing the issue.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 28, 2023 at 6:52 pm #48971

    Hi Brajesh, thank you for informing me.

    When I change the size to 50x50px, of course the avatars gets smaller.

    https://imgur.com/8NoHGJz

    If I want to maintain bigger avatars 110×110, in widgets, and 450x450px in profile like in this illustration, what would be the correct procedure instead of css?

    https://imgur.com/ovjKoWE

    Regards
    Carsten

    • This reply was modified 1 year, 4 months ago by calu.
  • Keymaster
    (BuddyDev Team)
    Posts: 24344
    Brajesh Singh on March 28, 2023 at 7:23 pm #48974

    Please make sure to change this

    
if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
    define( 'BP_AVATAR_THUMB_WIDTH', 50 ); //change this with your desired thumb width
 
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
    define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); //change this with your desired thumb height
 
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
    define( 'BP_AVATAR_FULL_WIDTH', 260 ); //change this with your desired full size,weel I changed it to 260 :)
 
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
    define( 'BP_AVATAR_FULL_HEIGHT', 260 ); //change this to default height for full avatar

    to

    
if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
    define( 'BP_AVATAR_THUMB_WIDTH', 110 ); //change this with your desired thumb width
 
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
    define( 'BP_AVATAR_THUMB_HEIGHT', 110 ); //change this with your desired thumb height
 
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
    define( 'BP_AVATAR_FULL_WIDTH', 450 ); //change this with your desired full size,weel I changed it to 260 :)
 
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
    define( 'BP_AVATAR_FULL_HEIGHT', 450 ); //change this to default height for full avatar

    That should help you resolve it.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 28, 2023 at 7:30 pm #48975

    Hi Brajesh, thanks for the clarification, now it all make sense.

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1105
    calu on March 29, 2023 at 8:16 pm #48998

    Except for this:

    https://imgur.com/hKXUqyL

    Why is the “Who’s Online” widget avatar not sized the same as the “Most Visited Users” widget avatars?

    All custom css is turned off.

    Regards
    Carsten

You must be logged in to reply to this topic.

This topic is: not resolved