Custom buddypress avatars

Posted on

I’ve got a project over at www.mtbikenow.com that is powered by the buddypress framework. While technically a plugin developed for WordPress, it’s really a whole lot more robust than your typical plugin.

That being said, default avatars (from any web application) are high on the list of bad site aesthetics. Really makes things look unfinished and unpolished in my opinion. The buddypress set of icons is now exception:

Some user avatars:

And some group avatars:

Not cool 🙂 Fortunately there is a very easy fix for this. So, let’s create your very own (default) custom buddypress avatars. Start by making your way over to the (buddypress) functions.php file and plug in the following php code:

function myavatar_add_default_avatar( $url )
{

return get_stylesheet_directory_uri() .'/_inc/images/default-grav.png';
}
add_filter( 'bp_core_mysteryman_src', 'myavatar_add_default_avatar' );

function my_default_get_group_avatar($avatar) {

global $bp, $groups_template;

if( strpos($avatar,'group-avatars') ) {

return $avatar;
}

else {
$custom_avatar = get_stylesheet_directory_uri() .'/_inc/images/default-group-avatar.png';

My default avatar is named “default-grav.png”. You’ll have to change that to whatever the name of you file is and be sure the URL path is correct.

And for group avatars:

if($bp->current_action == "")
return '<img width="'.BP_AVATAR_THUMB_WIDTH.'" height="'.BP_AVATAR_THUMB_HEIGHT.'" src="'.$custom_avatar.'" class="avatar" alt="' . attribute_escape( $groups_template->group->name ) . '" />';
else
return '<img width="'.BP_AVATAR_FULL_WIDTH.'" height="'.BP_AVATAR_FULL_HEIGHT.'" src="'.$custom_avatar.'" class="avatar" alt="' . attribute_escape( $groups_template->group->name ) . '" />';
}
}
add_filter( 'bp_get_group_avatar', 'my_default_get_group_avatar');

Again, you’ll have to “default-group-avatar.png” to whatever your file name is, check the URL path and fill in any specs as needed. That’s it!


Tags: , , , ,

Need WordPress Support? Get 10% of your subscription by using coupon "subscription10"
WordPress Maintenance Plans
Your turn. Join the conversation.
Questions? Post 'em bellow or find me on Twitter.
To post code: <pre> <code> Your code here </code></pre>
  • nice and informative post..

    Thanks
    Rohan

  • steve

    How do I create 12 random avatars like ‘monsters’ instead of just one? Half my users don’t upload avatars. Thanks

  • Hey Steve –
    So maybe a few default images? Like 10 or so? I’m not 100% sure as I’ve never tried, but this might work:

    1) Create your defulault images and name them:

    default-grav-1.png
    default-grav-2.png
    default-grav-3.png

    And so on..

    2) Then do something like this.

    function myavatar_add_default_avatar( $url ){
        $randomNumber = rand(5, 15); 
        $imgPath =  '/_inc/images/default-grav-' .  $randomNumber . '.png';
    return $imgPath;
    }
    
    add_filter( 'bp_core_mysteryman_src', 'myavatar_add_default_avatar' );
    

    So set the $randomNumber variable to the ‘rand’ function wich generates a random number. The first argument is the min the second being the max.

    Add that variable to your new image path and it should randomly assign a number and, int turn, target a random gravatar for your avatar-less users.

    I haven’t tried this, but would be interested to hear if it works. Also not sure if the gravatar will actually stay with the user or if it’ll change with each page reload – or something along those lines.

    Now I’m curious.

  • steve

    Hi Justin, I tried your code. Just working locally with xampp. The only thing that happened is that I lost the default mystery man gravatar for a different type of gravatar? I am just using 3 avatars for now.
    $randomNumber = rand(1, 3);

    Its odd that it is generating the random gravatar from 1 to 3 but they are all the same image:
    Src=http://www.gravatar.com/avatar/
    259106c9a5487302e463981844241391?d=images/default_avatar_3.png&s=50

  • Well, like I said, I haven’t tested it. That being said, If it’s generating three differnt URLS, it should work. Are u using local or remote avatars?

    Can you post the exact code you are using?

  • steve

    Using local avatars.

    /* custom avatars */
    function myavatar_add_default_avatar( $url ){
    $randomNumber = rand(1, 3);
    $imgPath = '_inc/images/default_grav_' . $randomNumber . '.png';
    return $imgPath;
    }
    
    add_filter( 'bp_core_mysteryman_src', 'myavatar_add_default_avatar' );
    
    
  • The src to the image you posted isn’t local. So, something is up.

    Src=http://www.gravatar.com/avatar/
    259106c9a5487302e463981844241391?d=images/default_avatar_3.png&s=50

    Also, I know i didn’t post it before, but you’ll still need to return the get_stylesheet_directory_uri() function before your image path.

    function myavatar_add_default_avatar( $url ){
    	$randomNumber = rand(5, 15); 
    	$imgPath =  '/_inc/images/default-grav-' .  $randomNumber . '.png';
      
    return get_stylesheet_directory_uri() .$imgPath;
    }
    add_filter( 'bp_core_mysteryman_src', 'myavatar_add_default_avatar' );
    
  • steve

    It works now. The avatars do change when the page is refreshed.Not a big deal i guess. If people don’t want to add a personal avatar than so be it.

    I just thought it made the site look more active with different random avatars.
    thanks

  • I was fairly certain that would happen. There would have to be a preference stored in the database for each user in order for the avatar to stay with them.

    Could be done with some work, bot sure it really adds much as you can use as many default avatars as you’d like this way.

    Anyway, glad I could help.

  • steve

    I think you should sticky this code for others.
    cheers
    Steve

  • Pingback: Multiple custom buddypress avatars | Justin W. Hall()

  • hi very tanks very.

  • Hi thanks for the post very informative, particularly with the changes that have been made to gravatar that seem to be affecting buddy press v1.6