How to add font end image replace for avatar

Support MB User Profile How to add font end image replace for avatarResolved

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35254
    joie.hadi.nata.tan@gmail.com[email protected]
    Participant

    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"]

    https://cln.sh/S0J3LY

    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

    #35284
    Long NguyenLong Nguyen
    Moderator

    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

    #35289
    joie.hadi.nata.tan@gmail.com[email protected]
    Participant

    Hello
    I followed the https://metabox.io/create-custom-avatar/
    Then i changed from type Single Image to Image Upload

    https://cln.sh/KdEPVI

    Here is the video

    https://cln.sh/qUD0wW

    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

    #35290
    joie.hadi.nata.tan@gmail.com[email protected]
    Participant

    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;
    }
    #35317
    Long NguyenLong Nguyen
    Moderator

    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

    #35545
    joie.hadi.nata.tan@gmail.com[email protected]
    Participant

    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

    #35570
    Long NguyenLong Nguyen
    Moderator

    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/

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.