BuddyDev

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

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

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 tutorialsBuddyPress 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

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 🙂

One Response to Using different default Avatar for BuddyPress Users based on profile fields or member type

  • Hi Brajesh,
    Once again, you are the first stop when looking for Buddypress answers.
    Thanks for this. It will come in handy.
    Cheers,
    Allan

Leave a Reply

Are you looking for support?

Please ask support questions in BuddyDev Forum and help us serve you better. Please use comment for general discussion/feature suggestions.

Your email address will not be published. All the fields marked as * are required.

If you are posting code, please use <pre> { Your Code Block } </pre>. Example:- <pre> echo $name; </pre>

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">