Using different default Avatar for BuddyPress Users based on profile fields or member type
You may be knowing how to setup a default avatar for user? If not, You can now. Here is a link to our definitive guide to BuddyPress avatars. In this tutorial, we will be concentrating on how to use different avatars for users based on some criteria. It is kind of using multiple default avatar for users, applying proper avatar based on some criteria.
It may be a good fit for educational(teacher, student), dating(male,female) or other kind of BuddyPress sites where the user can be classified into multiple types.
Before delving further, let us quickly disable the gravatar.
Step 1:- Disable Gravatar
1 | add_filter( 'bp_core_fetch_avatar_no_grav', '__return_true' ); |
Well done!
What would you like to do next? Change avatar? Ok. Before we do that, we need to decide what will be the basis for the classification of users. Or in other words, what will be the criteria that we use to apply different avatars.
There are multiple possibilities but we will be dealing with two cases here:-
- Applying different default avatar based on profile field
- or Applying different default avatar based on Member Type
- I am not covering role, but you can easily adapt the 2nd example for roles too.
Example 1:- Using different default avatar based on BuddyPress profile field
The example is based on following assumptions:-
- We have a profile field named Gender (with id=32), It is just for example
- The possible values are "Male", "Female"
- We want to display different default avatar for Male, Female members
Here is what we are going to do:-
- Use http://example.com/male.png when the field is set to "Male"
- Use http://example.com/female.png when the field is set to "Female"
- Use http://example.com/unknown.png when the field is not set
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function buddydev_set_default_avatar_based_on_profile_field_data( $avatar, $params ) { $user_id = $params['item_id']; $field_id_or_name = 32;//Gender field Id, You may use field name e.g 'Gender'; //I suggest using id for performance reasons $gender = xprofile_get_field_data( $field_id_or_name, $user_id ); $gender = strtolower( $gender ); if ( $gender == 'male' ) { $avatar = 'http://example.com/male.png'; } elseif( $gender =='female' ) { $avatar = 'http://example.com/female.png'; } else { $avatar = 'http://example.com/unknown.png'; } //note, you may play with the $param['type'] and use different image for full|thumb return $avatar; } add_filter( 'bp_core_default_avatar_user', 'buddydev_set_default_avatar_based_on_profile_field_data', 10, 2 ); |
You can extend it the way you want. If you are trying to load avatars from your theme/child theme, you should also look at get_template_directory_uri(), get_stylesheet_directory_uri() instead of hard coding the url.
Let us see another example with Member Type:-
If you are not familiar with BudyPress member types, our tutorials, BuddyPress Member Type Generator, BP Xprofile Member Type Field plugin may help.
Example:- Using different avatar based on BuddyPress User Member Types
Assumptions are important. Let us have some:)
- We have two member types defined namely "male", "female"
- "male", "female" are the unique member type names. You can use any label for them
- We want to display different default avatar for male/female members.
- A user may not have a member type associated or may have some other member type associated. In that case, we simply use another fallback image
That's enough I guess. Now here is what we will do:-
- Use http://example.com/male.png when the member type is "male"
- Use http://example.com/female.png when the member type is "female"
- Use http://example.com/unknown.png when member type is not set or not one of the above
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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 == 'male' ) { $avatar = 'http://example.com/male.png';// get_template_directory_uri() . '/assets/images/male.png'; } elseif( $type =='female' ) { $avatar = 'http://example.com/female.png';//get_template_directory_uri() . '/assets/images/female.png'; } else { $avatar = 'http://example.com/unknown.png';//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 ); |
And if you are wondering where do you put these codes, don't worry! You can put the code in bp-custom.php(in plugins directory) or the functions.php of your theme.
People forget easily, I hope you are not like that. Still reminding again, don't forget the code from first step. That's all. have fun 🙂
Hi Brajesh,
Once again, you are the first stop when looking for Buddypress answers.
Thanks for this. It will come in handy.
Cheers,
Allan
Can I ask what page this code is being placed on?
It is not working for me on functions.php
Hi Jim,
You can put it into your bp-custom.php
https://buddydev.com/docs/buddypress-guides/what-is-bp-custom-php/
Hello ! Is it possible to create a default avatar by membership level ? Thans a lot !
Hello ! Thank you for this page. I created types and used you code to add custom avatar by type. But it doesn't work. I created a bp-custom.php file in the Buddypress repertory. I added this code into this file:
Would you say me what is wrong ?
Thank you very much for your help !
Hi Halloy,
You will need to create the bp-custom.php in your wp-content/plugins directory or you can put the code in your theme's functions.php too.
Regards
Brajesh
Hi Brajesh ! thanks for your reply ! If I undertand well, the bp-custom.php must be directly in the plugins directory ? Not in the budypress directory ? If I do that, the website is in 500 error.. So I tried with functions.php. But nothing happend. Would you say me what is wrong ? I created 3 types of member : classique, premium and jeunepro. With 3 images.The code is followinf. Added at the end of funciuns.php
Thanks a lot !!!
Hi CDS,
Thank you.
1. Please make sure to change example.com with the actual url
2. Your code seems to be missing a line
Also, Let us continue it on the forum here.
https://buddydev.com/support/forums/topic/custom-avatar-by-type/
Regards
Brajesh