[Gelöst] Use a custom field as avatar in WordPress

[Author]

Artikel

[Pat]

Hello,

I have a site in which users can upload their photo thanks to a custom field (photo).
Now, I would like to use this field (at least the photo) as WordPress avatar for the dedicated user. This means as soon as the form including the "photo" field is validated, make this photo as the user avatar.
Is there a way to do this and how?

Regards
Pat

[Waqar]

Hi Pat,

Thank you for contacting us and I'd be happy to assist.

To replace WordPress default user Avatars, you can use WordPress' own filter "get_avatar".
https://codex.wordpress.org/Plugin_API/Filter_Reference/get_avatar

You'll find a good code example at the bottom of this guide on how this filter can be used.

To get the image URL from the user's custom field "photo" ( added by Toolset Types ), you can use "types_render_usermeta" function from the Types Fields API:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

Example:

$avatar  = types_render_usermeta( "photo", array( "size" => "full", "url" => "true", "user_id" => $id) );

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Pat]

Hi Waqar,

Thanks for the info. Perhaps I have not been clear in my preview post : what I need is to use the image custom field as the avatar for the specific user. This means I want to keep the same process of displaying avatar than WordPress but define the specific image to use for the specific user (I don't want to display avatar thanks to Toolset for example).
The aim is that this avatar is displayed in a standard way where the standard WordPress avatar is used (and also all plugins that are using the WordPress avatar).

Hope this clerify the need?

Regards
Pat

[Waqar]

Hi Pat,

Thanks for writing back and sorry if my message wasn't clear.

The default WordPress avatars feature, which is used by WordPress, themes and other plugins, is connected to the "Gravatars" service ( versteckter Link ).

The image to show as the avatar is actually called from this Gravatar service, based on the user's registered email.
( https://wordpress.org/support/article/how-to-use-gravatars/ )

If a specific user has registered a Gravatar image with his/her email address, then that image is shown and otherwise, the default avatar image is shown.

From your messages, I understand that you'd like to change this default avatar behavior so that it shows the image selected in that user's image custom field if it is set.

If my understanding is correct then the information that I shared in my last message about the "get_avatar" filter is exactly what you need.

As a quick test, you can add the following code snippet from the link I shared, in your active theme's "functions.php" file and see if it works as expected:

// Apply filter
add_filter( 'get_avatar' , 'my_custom_avatar' , 1 , 5 );

function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
    $user = false;

    if ( is_numeric( $id_or_email ) ) {

        $id = (int) $id_or_email;
        $user = get_user_by( 'id' , $id );

    } elseif ( is_object( $id_or_email ) ) {

        if ( ! empty( $id_or_email->user_id ) ) {
            $id = (int) $id_or_email->user_id;
            $user = get_user_by( 'id' , $id );
        }

    } else {
        $user = get_user_by( 'email', $id_or_email );   
    }

    if ( $user && is_object( $user ) ) {

        $custom_user_image  = types_render_usermeta( "user-photo", array( "width" => $size, "height" => $size, "resize" => "crop", "url" => "true", "user_id" => $user->data->ID ) );

        if ( $custom_user_image ) {
            $avatar = $custom_user_image;
            $avatar = "<img alt='{$alt}' src='{$avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
        }

    }

    return $avatar;
}

Note: I've updated the snippet so that it can get the image from the user custom field, and please make sure to replace "user-photo", with the actual slug of your photo image custom field.
( example screenshot: versteckter Link )

Let me know how it goes.

regards,
Waqar

[Pat]

Hi Waqar and thanks for your clarification.

I think we are progressing. I have still a last point as my custom field is not a user field but a post field.
I have a postype "membre" in which I have created this custom field "photo".
So, I just need to retrieve the custom field in the "membre" postype (the one which has the user id as author). For info, there could be only one post for each user on this postype.
Could you add the need code for that please?
Thanks
Pat

[Waqar]

Hi Pat,

Glad we're making progress.

To fetch the image URL from the user's post, you'll need to include some additional steps:

1. You'll create a new post view and set it to show the "membre" post type.

2. Uncheck the option "Don't include current page in query result" and set the number of posts limit to 1.

3. Also include a post auhor filter, so that only the post from the specific author is shown, whose ID is passed through the view's shortcode.

Example Screenshot: versteckter Link

4. While adding the content in the view's "Loop Editor", select "unformatted" option in the wizard and make sure no extra spaces or line breaks exists, in the "Search and Pagination", "Loop Editor" and the "Output Editor" section.

Example Screenshot: versteckter Link

5. Since you'll only need the URL of the image from the custom field from this view, in the loop item's content template, you'll only include it's shortcode:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )

[types field=photo' width='[wpv-attribute name="size"]' height='[wpv-attribute name="size"]' url='true'][/types]

Note: Replace "photo" with the actual slug of your image field.

6. Just below this loop item's content template, you'll also see a "Disable the wrapping DIV around the View" checkbox, which also needs to be checked.

All these steps will ensure that no extra content or spaces other than the image's URL is included in this view's output.

7. The last step would be to replace line in the code snippet from the last message, so that instead of getting the image from the user's field, it calls the view's output.

Old line:

$custom_user_image  = types_render_usermeta( "user-photo", array( "width" => $size, "height" => $size, "resize" => "crop", "url" => "true", "user_id" => $user->data->ID ) );

New line:

$custom_user_image  = trim(do_shortcode('[wpv-view name="slug-of-the-view" author="'.$user->data->ID.'" size="'.$size.'"]'));

Please replace "slug-of-the-view" with the actual slug of your view and note how author and the size attribute is passed to the view's shortcode.
https://toolset.com/documentation/user-guides/passing-arguments-to-views/

regards,
Waqar

[Pat]

Hi Waqar,

Thanks for the info.
I was first thinking of just modifying your previews code in order to fetch the image url in the postype postmeta instead of in the usermeta :
$custom_user_image = types_render_usermeta( "user-photo", array( "width" => $size, "height" => $size, "resize" => "crop", "url" => "true", "user_id" => $user->data->ID ) );

ie : replace the "user-photo" by a variable $photo = the custom field of the postype "membre" of the current user ID?

What is important is to ensure that the function will work even if the content of the custom field is modified.

Let me know.
Regards
Pat

[Waqar]

Hi Pat,

The challenge is that in the code, we do have the user's ID whose avatar needs to be changed, but we don't have the ID of his/her post to fetch the custom field value from. This is why we'll need a view in between, that will:

1. accept the required user's ID,
2. fetch the information of post where that user is the author
3. then return the image from that post's image custom field

Hope this makes it more clear we why need the extra steps and please let me know if you have any further questions related to this.

And yes this arrangement will keep working if the image in the post's custom field is changed, since we're getting the fresh value from the original source each time, without storing it anywhere else.

regards,
Waqar

[Pat]

Hi Waqar,

Clear enough !
I have used the first part of your solution and created a cred_save_data hook in order to pass the photo link to the usermeta.

Thanks
Pat