BuddyDev

Search

Blurry-avatar-images

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48880

    Hi there, sorry for reaching out again.

    I have discovered that my uploaded avatars are blurry after cropping.

    My WP media size setting is

    Thumbnail size 150, and increasing this to 300 makes no difference.

    I have tried another theme with out custom css, and I have renamed my bp-custom.php to rule out any custom code as well, but same result.

    Uploaded image

    https://imgur.com/isqQMOt

    After cropping

    https://imgur.com/3rQgLrg

    The topic has been discussed before without getting closer to an ansver.

    https://buddypress.org/support/topic/blurry-avatar-images/

    Any idea why this is happening, and how to solve it?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48881

    Just checked the Recent Visitors list, and this is what the uploaded avatar looks like, the size of the avatar is smaller than the anonymous avatars.

    https://imgur.com/NFMIZNR

    Does this give a clue of what is going on here?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48882

    In Members Directory, the avatar sizes are the same

    https://imgur.com/cLYHZCo

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on #48915

    Hi Carsten,
    I am sorry I could not assist you earlier.
    My guess is it is related to BP constants for the avatar width/height. I will check it on your site tomorrow and assist you.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48916

    Hi Brajesh, thank you very much for looking into this.

    Regards
    Carsten

  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on #48923

    Hi Carsten,
    Thank you for your patience.
    I had a look at the site today.
    Your problem is you are using css to force the image to have a dimension quiet larger than the original one.
    That’s causing the blurry avatar.

    My suggestion is to use the code from this post and re-upload avatars.
    https://buddydev.com/changing-default-avatar-size-croppedused-by-buddypress/

    Hope that helps.
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48926

    Hi Brajesh, thank you for investigating this issue on my page.

    You wrote that problem is that I’m using css to force the image to have a dimension quiet larger than the original one.

    I tested the issue with another theme, without any custom css, with same result. Please clarify what css that might be?

    https://buddydev.com/changing-default-avatar-size-croppedused-by-buddypress/
    By default, Buddypress allows thumb size to be 50×50 (pixels) and full size to be 150px X 150 px.

    I don’t necessarily want an avatar size greater than 150px, and I don’t think I have made any changes to this, where do I find this setting, nothing under Options about avatar size anymore?

    Does this have anything to do with the WP Dashboard Media settings, what should the image sizes be for Thumbnail, Medium and Large here?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48927

    Hi there, I’m using this snippet to use different default avatar based on BuddyPress Member Types.

    The image size was set to 300×300 so maybe this was causing the issue?

    I changed the avatar sizes to 50×50 so now they are all blurry. What can I do about that?

    https://imgur.com/b3lHV9e

    Regards
    Carsten

    //Using different default avatar based on BuddyPress Member Types
    
     function buddydev_set_default_use_avatar_based_on_member_type( $avatar, $params) {
        $user_id = $params['item_id'];
     
        $type = bp_get_member_type( $user_id );
     
        if ( $type == 'man' ) {
            $avatar = 'https://domain/wp-content/uploads/2021/08/Avatar-man-50x50-1-e1679832244590.jpeg';
        } elseif( $type =='woman' ) {
            $avatar = 'https://domain/wp-content/uploads/2021/08/Avatar-woman50x50-1-e1679831984556.jpeg';
        } else {
            $avatar = 'https://domain/wp-content/uploads/2022/08/mystery-man.jpeg';//get_template_directory_uri() . '/assets/images/unknown.png';
        }
     
        return $avatar;
    }
     
    add_filter( 'bp_core_default_avatar_user', 'buddydev_set_default_use_avatar_based_on_member_type', 10, 2 );  
    
  • Keymaster
    (BuddyDev Team)
    Posts: 24190
    Brajesh Singh on #48949

    Hi Carsten,
    Thank you for the reply.
    The above code has n effect.

    Here is a screenshot showing you the issue.

    https://ibb.co/2F4htz0

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1105
    calu on #48952

    Hi Brajesh, thanks for in detail pointing at where the issue is in my custom css file.
    I’t strange, because I tested the issue with another theme, bypassing my custom css, but it was still blurred. It might have been a caching issue.

    The images is still not as sharp as when they are in the cropping tool, but I guess this is befor the 50×50 px compression. When the avatar then is enlarged like in this mobile view, it gets a little blurred.

    https://imgur.com/9HqXuoL

    For having the avatar full size on mobile, covering the cover image and the whole item header, I’m using this css code:

    @media (max-width: 768px)
    #item-header-cover-image #item-header-avatar img {
        width: 450px;
        padding-top: 20px;
    }

    Does this code setting the width to 450px, effect the sharpness as well, as the css you pointet out?

    If yes, how do I achieve an avatar in full width on mobile without blurring?

    Should I be using the snippet from here

    https://buddydev.com/changing-default-avatar-size-croppedused-by-buddypress/

    Setting the BP_AVATAR_FULL_WIDTH’, to 450px?

    Is that how I should understand the use of this snippet?

    Regards
    Carsten

You must be logged in to reply to this topic.

This topic is: not resolved