WordPress.org

Ready to get started?Download WordPress

Forums

User Avatar
[resolved] Add User Avatar upload to front-end profile editor (11 posts)

  1. bublick
    Member
    Posted 6 months ago #

    I have my own written profile editor at WP front-end. I'd like to enable this cute avatar uploading at my front end. There is nothing hard to write avatar uploading, but this plugin is really cute with it's verifing and croping-resizing. Every my site where avatars are enabled - I have this plugin. But every time I just need to have this feature at the backend profile editor, in admin part. Now I have other goal.
    May be there are some hooks or something like?

    http://wordpress.org/plugins/user-avatar/

  2. bowenac
    Member
    Posted 6 months ago #

    I'm curious about this as well. Would be cool if it had shortcode to add to front end. I am going to look around and see what I can come up with. Will report back if I find anything.

  3. bowenac
    Member
    Posted 6 months ago #

    Ok I found this... Add this code to where you want to include the Update Avatar on front end I put this in a custom template.

    <?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
    wp_head();
    ?>
    <div id="user-avatar-display" >
    <span>Profile Picture</span>
    <p id="user-avatar-display-image">
    
    <?php echo user_avatar_get_avatar( $current_user->ID, 150);?>
    </p>
    <a id="user-avatar-link" class="button thickbox" href="<?php echo admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=1&uid=<?php echo $current_user->ID; ?>&TB_iframe=true&width=720&height=450" title="Customize your profile picture" >Update Picture</a>
    
    <input type="hidden" class="noimage" value="<?php echo plugins_url('/images/mystery-man.jpg', __FILE__) ;?>"/>
    
    <input type="hidden" id="userid" value="<?php echo $current_user->ID ;?>"/>
                    <input type="hidden" id="_nonce" value="<?php  echo wp_create_nonce('delete_user_avatar') ;?>"/>
    
     <?php   // Remove the User-Avatar button if there is uploaded image
    
           if ( user_avatar_avatar_exists($current_user->ID) ):?>
    
             <br>
             <a id="user-avatar-remove"  href="#user-avatar-display" ><?php _e('Remove','user-avatar'); ?></a>
           <?php
           endif;
     ?>
    </div>
    
    <script type="text/javascript">
            function user_avatar_refresh_image(img){
             jQuery('#user-avatar-display-image').html(img);
                    location.reload();//reloading the page after edit/add photo to display the delete link.
            }
            function add_remove_avatar_link(){
                       /*nothing to do here, cause we are going to use our own delete link later. This function still here because of the user avatar plugin still need this*/
                    }
    
    </script>
     <?php
    function delete_avatar() {
            $uid = $_POST['uid'];
            $nonce = $_POST['nonce'];
            $current_user = wp_get_current_user();
    
                    // If user clicks the remove avatar button, in URL deleter_avatar=true
                    if( isset($uid) && wp_verify_nonce($nonce, 'delete_user_avatar') && $uid == $current_user->id )
                    {
                            user_avatar_delete_files($uid);//here I using user avatar own plugin delete photo function.
    
                    }
    
            echo '1';//sending back to the js script to notify that the photo is deleted.
            exit;
    }
    // need to add these action for ajax
    add_action( 'wp_ajax_nopriv_delete_avatar', 'delete_avatar');
    add_action( 'wp_ajax_delete_avatar', 'delete_avatar');
    
    //3rd step: The js files
    //You will need to enqueue this js file to the page you want to use this script.
    wp_register_script('profile', plugin_dir_url( __FILE__ ) .'js/profile.js',__FILE__ );
    wp_enqueue_script('profile');
    wp_localize_script( 'profile', 'Ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );//this is wp ajax reference
    
    //here is the js in profile.js
    ?>
    <script>
    jQuery(document).ready(function($) {
            $( "#user-avatar-remove" ).click(function() {
               var uid = $('#userid').val();
                       var nonce = $('#_nonce').val();     
    
                       jQuery.ajax({
                                     type: 'POST',
                                     url: Ajax.url,
                                     data: ({action : 'delete_avatar',uid:uid,nonce:nonce }),
                                     success: function(html) {
                                    if(html){
                                            var image = $('.noimage').val();
                                             $("#user-avatar-display-image")
                                                    .fadeOut(400, function() {
                                                            $("#user-avatar-display-image").find('img').attr('src',$(".noimage").val());
                                                            })
                                            .fadeIn(400);
                                            $('#user-avatar-remove').remove();
                                            }
    
                                     }
                                     });
    
            });    
    
    });
    </script>

    Its working so far for me but I am having another issue in the iframe that is an invalid argument from woocommerce plugin. I think that has to do with loading wp-admin in the iframe etc.

    Found the code from this closed post...
    http://wordpress.org/support/topic/plugin-user-avatar-how-to-use-this-plugin-in-other-admin-page?replies=12

  4. bublick
    Member
    Posted 6 months ago #

    Thank you! It is close, but it still don't works.

    First of all, I had upload an avatar using wp-admin profile page. And in this block, that I made using your code - I have no avatar. There is only default avatar pic.

    Next, when I click to the Update Picture link, appears a thicbox frame. Insteat of button to chose an avatar from my PC, there is only "You are not allowed to do that.". But I'm admin. It is strange. Now is too late and I'll try to modify it tommorow.

    Anyway thank you for a try. I guess I need just to modify it in some places and it would work.

  5. bowenac
    Member
    Posted 6 months ago #

    Here is the full code I am using in a template page. Just create a new file and paste this code in it. Just to see if this works as this should work.

    <?php
    /*
    Template Name: Test Avatar
    */
    ?>
    <?php get_header()?>
    <?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
    wp_head();
    ?>
    <div id="user-avatar-display" >
    <span>Profile Picture</span>
    <p id="user-avatar-display-image">
    
    <?php echo user_avatar_get_avatar( $current_user->ID, 150);?>
    </p>
    <a id="user-avatar-link" class="button thickbox" href="<?php echo admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=1&uid=<?php echo $current_user->ID; ?>&TB_iframe=true&width=720&height=450" title="Customize your profile picture" >Update Picture</a>
    
    <input type="hidden" class="noimage" value="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=150"/>
    
    <input type="hidden" id="userid" value="<?php echo $current_user->ID ;?>"/>
                    <input type="hidden" id="_nonce" value="<?php  echo wp_create_nonce('delete_user_avatar') ;?>"/>
    
     <?php   // Remove the User-Avatar button if there is uploaded image
    
           if ( user_avatar_avatar_exists($current_user->ID) ):?>
    
             <br>
             <a id="user-avatar-remove"  href="#user-avatar-display" ><?php _e('Remove','user-avatar'); ?></a>
           <?php
           endif;
     ?>
    </div>
    
    <script type="text/javascript">
            function user_avatar_refresh_image(img){
             jQuery('#user-avatar-display-image').html(img);
                    location.reload();//reloading the page after edit/add photo to display the delete link.
            }
            function add_remove_avatar_link(){
                       /*nothing to do here, cause we are going to use our own delete link later. This function still here because of the user avatar plugin still need this*/
                    }
    
    </script>
     <?php
    function delete_avatar() {
            $uid = $_POST['uid'];
            $nonce = $_POST['nonce'];
            $current_user = wp_get_current_user();
    
                    // If user clicks the remove avatar button, in URL deleter_avatar=true
                    if( isset($uid) && wp_verify_nonce($nonce, 'delete_user_avatar') && $uid == $current_user->id )
                    {
                            user_avatar_delete_files($uid);//here I using user avatar own plugin delete photo function.
    
                    }
    
            echo '1';//sending back to the js script to notify that the photo is deleted.
            exit;
    }
    // need to add these action for ajax
    add_action( 'wp_ajax_nopriv_delete_avatar', 'delete_avatar');
    add_action( 'wp_ajax_delete_avatar', 'delete_avatar');
    
    //3rd step: The js files
    //You will need to enqueue this js file to the page you want to use this script.
    wp_register_script('profile', plugin_dir_url( __FILE__ ) .'js/profile.js',__FILE__ );
    wp_enqueue_script('profile');
    wp_localize_script( 'profile', 'Ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );//this is wp ajax reference
    
    //here is the js in profile.js
    ?>
    <script>
    jQuery(document).ready(function($) {
            $( "#user-avatar-remove" ).click(function() {
               var uid = $('#userid').val();
                       var nonce = $('#_nonce').val();     
    
                       jQuery.ajax({
                                     type: 'POST',
                                     url: Ajax.url,
                                     data: ({action : 'delete_avatar',uid:uid,nonce:nonce }),
                                     success: function(html) {
                                    if(html){
                                            var image = $('.noimage').val();
                                             $("#user-avatar-display-image")
                                                    .fadeOut(400, function() {
                                                            $("#user-avatar-display-image").find('img').attr('src',$(".noimage").val());
                                                            })
                                            .fadeIn(400);
                                            $('#user-avatar-remove').remove();
                                            }
    
                                     }
                                     });
    
            });    
    
    });
    </script>
    <?php get_footer()?>

    Let me know if that works for you. I ended up just disabling warning messages. I was getting a warning message because of the wp-admin and my theme uses woocommerce so the header is including woocommerce which was causing my error.

    The only thing that doesn't seem to be working is the delete. It deletes it from the view and shows the default image, I had to update the default image link once you clicked remove as the link was wrong. But if you click update after you remove the image it still shows your previous image so it doesn't seem to actually be removing it.

    Not sure the remove is really needed to begin with not sure why you would want to remove it rather than just update it again.

  6. joshuaiz
    Member
    Posted 6 months ago #

    Did anyone ever figure out how to get the Delete link working?

    Where is the source of profile.js?

    I think that is the key to getting the Delete to work.

    Also, thickbox is still built in to WordPress so you can just call:

    add_thickbox();

    In your template - you don't need to reenqueue it.

  7. bublick
    Member
    Posted 5 months ago #

    joshuaiz, congrats. It seems to be best result.

    I still have the same problem like 2 weeks ago.

  8. robthirlby
    Member
    Posted 5 months ago #

    I've installed the plugin and using Bowenac's template, it works like a dream unless the user already has an avatar installed using the user edit facility of the dashboard. In this case the old avatar just does not get removed. I am using pods as well but I don't think that's relevant

  9. bublick
    Member
    Posted 5 months ago #

    @bowenac,
    OK. I finally made it using your method. I was too lazy to check it =). Now I made it. Just needed to reinitialize the
    $current_user var.

    There is another hook for front-end.

    do_action('profile_personal_options', $userdata);
    do_action('show_user_profile', $userdata);

    As I understand, It copies profile form from ../wp-admin/profile.php
    but it doesn't copy password's difficulty check method.

  10. robthirlby
    Member
    Posted 5 months ago #

    Sorry to be thick but could you show how and where to reinitialize the
    $current_user var?

    Regards,

    Rob Thirlby

  11. brunchandbudget
    Member
    Posted 2 months ago #

    For a super easy no-code option, this plugin has a front end short code: https://wordpress.org/plugins/wp-user-avatar/

Reply

You must log in to post.

About this Plugin

About this Topic