Support Forum
Support › MB User Profile › How to add font end image replace for avatarResolved
Hello i followed this documentation to create custom avatar
https://metabox.io/create-custom-avatar/
I want to allow the front end user to edit it
so i add this shortcode
[mb_user_profile_info id="group-avatar"]
What i want to achieve is
https://cln.sh/NxxoLr
Could you guide me?
I am using kadence theme
I dont want the user to be able to choose from wordpress media library.
Just upload from his phone.
Thank you
Joie
Hi,
You can use the field type image or image_upload to allow users to upload their avatar but do not access the media library.
Then follow the documentation to get the image URL https://docs.metabox.io/fields/image-upload/#template-usage
Hello
I followed the https://metabox.io/create-custom-avatar/
Then i changed from type Single Image to Image Upload
Here is the video
I cannot get it working to display on my-account page
I am looking at documentation you provide at
https://docs.metabox.io/fields/image-upload/#template-usage
What code should i put in the View ?
I tried to put this code into view Template
$images = rwmb_meta( 'info', array( 'limit' => 1 ) );
$image = reset( $images );
?>
<img src="<?php echo $image['url']; ?>">
Thank you
Joie
OK i managed to display it on my-account by putting this code into the MB View
{% for item in user.custom_avatar %}
<img src="{{ item.large.url }}" width="{{ item.large.width }}" height="{{ item.large.height }}" alt="{{ item.large.alt }}">
{% endfor %}
Now i want to replace the gravar with this custom avatar uploaded
Now i use the following snippet. Is this correct ?
Is the value returned from image upload an array instead of single image?
/** metabox custom avatar to replace WordPress gravatar */
add_filter( 'get_avatar_url', 'mbua_get_avatar_url', 10, 3 );
function mbua_get_avatar_url( $url, $id_or_email, $args ) {
if ( is_numeric( $id_or_email ) ) {
$user_id = $id_or_email;
} elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) ) {
$user_id = $user->ID;
} elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) ) {
$user_id = (int) $id_or_email->user_id;
}
if ( empty( $user_id ) ) {
return $url;
}
$array_avatar = rwmb_meta( 'custom_avatar', [ 'object_type' => 'user', array( 'limit' => 1 ) ], $user_id );
if ( ! $array_avatar ) {
return $url;
}
$custom_avatar = reset( $array_avatar );
$url = $custom_avatar['full_url'];
return $url;
}
Hi,
Yes, the snippet code is correct to replace the default user avatar with the custom field image_upload
.
The field with setting multiple
is always set to true
will return an array of values, so you can use the function reset()
to get the first element of that array. Read more on the documentation
https://docs.metabox.io/fields/image-upload/#settings
Hello Long,
i am using view to display the custom avatar
[mbv name="user-avatar"]
the template is
{% for item in user.custom_avatar %}
<img src="{{ item.large.url }}" width="{{ item.large.width }}" height="{{ item.large.height }}" alt="{{ item.large.alt }}" />
{% endfor %}
Users uploads all sort of image dimensions.
If possible, could you please what should i use to format the display of the custom avatar to 512px x 512px ?
Thank you
Joie
Hi,
You can use the custom thumbnail to crop the image uploaded to the size 512x512px, follow this documentation https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
Or show the full size of the image and use CSS code to style the box (div) that wraps the image and limit the size to 512x512px. Refer to this article https://metabox.io/create-category-thumbnails-featured-images-wordpress/