Add image as profile photo

Hi,

Try this:

add_filter( 'bp_get_displayed_user_avatar', 'my_custom_avatar', 10, 3);
function my_custom_avatar($avatar, $r, $args) {
    // Get the src of the original avatar.
    $array = array();
    preg_match('/src="([^\"]*)"/i', $avatar, $array);
    if (count($array) > 1) {
        $old_url_avatar = $array[1];
        // Get the new url of image.
        $uploads = wp_upload_dir();
        $new_url_avatar = $uploads['baseurl'] . maybe_unserialize( BP_XProfile_ProfileData::get_value_byid( ID_OF_IMAGE_FIELD, bp_displayed_user_id() ) );

        // Replace the old src with the new url.
        $avatar = str_replace($old_url_avatar, $new_url_avatar, $avatar);
    }

    // Return the avatar.
    return $avatar;
}

Replace ID_OF_IMAGE_FIELD with the Id of the xprofile image field.

This code uses the “bp_get_displayed_user_avatar” filter to replace the original buddypress-wordpress avatar with an image uploaded using a buddypress xprofile custom field type.

Thanks, where would I put this code?

functions.php of your theme.

Hello,

I know I’m late entering this conversation, but I have tried to use the aforementioned code to accomplish this task, but without success.

There are 2 different files I tried working with. FUNCTIONS.PHP & THEME-FUNCTIONS.PHP, but it didn’t work. I copied the snippet verbatim, except I changed ID_OF_IMAGE_FIELD to Photo (which is the name of the image field I have declared with Xprofiles Custom Fields.

Is there anything obvious that I’m doing wrong?

Thanks!

Hi,

ID_OF_IMAGE_FIELD should be the id not the name. To know the id of your field, go Edit your field from wordpress admin and look at the url:

/wp-admin/users.php?page=bp-profile-setup&group_id=2&field_id=223&mode=edit_field

Here 223 is the id of my field.

Thank you for clearing that up.

Now, the photo is showing up in the user’s profile, but it is not being used as the user’s BP profile photo; the profile photo still shows the generic WP gravatar.

I apologize if I’m overlooking something. Is there another part of the code that needs editing?

It seems my code was only working in profile page. Please, replace my old code with this:

add_filter( 'bp_core_fetch_avatar', 'my_custom_avatar', 10, 2 );
function my_custom_avatar( $avatar, $params ) {
    if ( 'user' === $params['object'] ) {
        // Get the src of the original avatar.
        $array = array();
        preg_match( '/src="([^\"]*)"/i', $avatar, $array );
        if ( count( $array ) > 1 ) {
            $old_url_avatar = $array[1];
            // Get the new url of image.
            $uploads = wp_upload_dir();
            $img = maybe_unserialize( BP_XProfile_ProfileData::get_value_byid( ID_OF_IMAGE_FIELD, $params['item_id'] ) );
            if ( ! empty( $img ) ) {
                $new_url_avatar = $uploads['baseurl'] . $img;

                // Replace the old src with the new url.
                $avatar = str_replace( $old_url_avatar, $new_url_avatar, $avatar );
            }
        }
    }

    // Return the avatar.
    return $avatar;
}

In this code, I’m using another filter “bp_core_fetch_avatar” and instead of using “bp_displayed_user_id()” method to retrieve the user id, I’m using $params[‘item_id’]. I’m checking too if $params[‘object’] is “user” because it can be “blog” and “group”.

Try this. Remember to replace “ID_OF_IMAGE_FIELD” with your custom id.

I tried this, and I did replace ID_OF_IMAGE_FIELD with my custom id (which is 5518)

It still doesn’t make the image take the role of BP user profile photo.

I appreciate your help very much though. Please let me know if there’s anything else to try.

Mmm, weird, it’s working on my test site. Send me an url or a screenshot to see in which page this is not working.

In my test site, I can see the new photo everywhere now, members list, member’s profile, list of members in sidebar, …

Here is a link to my registration page. You can fill it in with generic info, and you will see the “Profile Photo” field at the bottom.

Thanks again!

Are you using a custom buddypress theme? Maybe your theme is using another method to display the avatars. Check the profile page template, it should be this file: buddypress/members/single/profile.php.

I’m using Graphene, it’s just a WordPress theme, not Buddypress. I looked at profile.php, but it doesn’t make a lot of sense to me. It mentions this, regarding changing avatars:

// Change Avatar
	case 'change-avatar' :
		bp_get_template_part( 'members/single/profile/change-avatar' );
		break;

Does this tell you anything helpful?

If not, I will consider switching to a BP theme. Which one are you using on your test site?

I’m not using a buddypress theme just Twenty Twelve. Sometimes buddypress themes are old and are using old filters, but this is not your case…

I don’t know why this is not working for you. In my test site, I’m using latest versions of buddypress, wordpress and my plugin. I’ve just added this code to the functions.php of my theme:

add_filter( 'bp_core_fetch_avatar', 'my_custom_avatar', 10, 2 );
function my_custom_avatar( $avatar, $params ) {
    if ( 'user' === $params['object'] ) {
        // Get the src of the original avatar.
        $array = array();
        preg_match( '/src="([^\"]*)"/i', $avatar, $array );
        if ( count( $array ) > 1 ) {
            $old_url_avatar = $array[1];
            // Get the new url of image.
            $uploads = wp_upload_dir();
            $img = maybe_unserialize( BP_XProfile_ProfileData::get_value_byid( ID_OF_IMAGE_FIELD, $params['item_id'] ) );
            if ( ! empty( $img ) ) {
                $new_url_avatar = $uploads['baseurl'] . $img;

                // Replace the old src with the new url.
                $avatar = str_replace( $old_url_avatar, $new_url_avatar, $avatar );
            }
        }
    }

    // Return the avatar.
    return $avatar;
}

Maybe you can try to output some values to see if at least your filter is used. Try this:

add_filter( 'bp_core_fetch_avatar', 'my_custom_avatar', 10, 2 );
function my_custom_avatar( $avatar, $params ) {
    var_dump($avatar);
    var_dump($params['object']);
    if ( 'user' === $params['object'] ) {
        // Get the src of the original avatar.
        $array = array();
        preg_match( '/src="([^\"]*)"/i', $avatar, $array );
        var_dump($array);
        if ( count( $array ) > 1 ) {
            $old_url_avatar = $array[1];
            // Get the new url of image.
            $uploads = wp_upload_dir();
            $img = maybe_unserialize( BP_XProfile_ProfileData::get_value_byid( ID_OF_IMAGE_FIELD, $params['item_id'] ) );
            var_dump($img);
            if ( ! empty( $img ) ) {
                $new_url_avatar = $uploads['baseurl'] . $img;

                // Replace the old src with the new url.
                $avatar = str_replace( $old_url_avatar, $new_url_avatar, $avatar );
            }
        }
    }

    // Return the avatar.
    return $avatar;
}

You should see the content of $avatar variable, $params[′object’] should contain “user”. You should see the content of $array variable and $img.

I think I was using the wrong ID after I gave it a 2nd try. It works perfect now!

Thanks very much for all your help & for your patience!

I won’t forget about you when & if my site becomes profitable.

You’re welcome! Good luck!