Title: [Plugin: User photo] front end upload
Last modified: August 19, 2016

---

# [Plugin: User photo] front end upload

 *  [Yoris](https://wordpress.org/support/users/yoris/)
 * (@yoris)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/)
 * In an attempt to create a front end “profile edit” page, I stumbled upon this
   topic: [Custom Edit Profile Page](http://wordpress.org/support/topic/custom-edit-profile-page?replies=19).
 * There you can find a working page template for a front end edit profile page.
   However, the upload function of the user photo plugin doesn’t work in that template.
 * After fiddling about for a bit, I found the following solution to get it to work.
   You need to add the encryption type to the form element. So:
    `<form name="profile"
   action="" method="post">` Becomes: `<form name="profile" action="" method="post"
   enctype="multipart/form-data">`
 * I wanted to post this in the topic mentioned above, but found that it was closed.
   Is it possible for a moderator to add link there to this solution?

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/page/2/?output_format=md)

 *  [Zac](https://wordpress.org/support/users/zac/)
 * (@zac)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607772)
 * Thank you!!
 *  [noud89](https://wordpress.org/support/users/noud89/)
 * (@noud89)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607773)
 * Thank you Yoris!
 * I’m using the Custom Profile Edit page you refer to. Thing is, I would like to
   use square thumbs for the user avatars. There is a plugin for that too, the ‘
   Square Thumbs for User Photo’ (good guess).
    Is there a possibility to integrate
   this square-being-thing in the front end?
 * Like to hear from any of you 🙂
 *  [Philip](https://wordpress.org/support/users/artdev/)
 * (@artdev)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607783)
 * i found this article and i have to say that is very useful,
    i try to make it
   work but with no luck till now,
 * can anyone help here on how to, cause the topic [here](http://wordpress.org/support/topic/custom-edit-profile-page?replies=19)
   is closed.
 * thanks a lot
 *  [Philip](https://wordpress.org/support/users/artdev/)
 * (@artdev)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607791)
 * ok, here is a working solution for the [Cimy User Extra Fields](http://wordpress.org/extend/plugins/cimy-user-extra-fields/)
   plugin,
 *     ```
       <tr>
       	<th><label for="photo">Photo</label></th>
       	<?php $value = get_cimyFieldValue($user_ID, 'PHOTO'); ?>
       	<td>
       	<img src="<?php echo cimy_uef_sanitize_content($value); ?>" alt="" width="100" /><br/>
       	<input name="cimy_uef_PHOTO_oldfile" value="<?php echo cimy_uef_sanitize_content($value); ?>" type="hidden"/>
       	Update the picture<br/>
       	<input id="photo" name="cimy_uef_PHOTO" value="" type="file"/>
       	<br/>Delete the picture
       	<input name="cimy_uef_PHOTO_del" value="1" type="checkbox"/>
       	</td>
       </tr>
       ```
   
 * you can simple included in your form after you have create a new image field 
   in the plugin options.
 * keep in mind that in the code i use an image field named ‘PHOTO’, but can be 
   used for all the fields/field types you create from the plugin.
 * hope you find it useful,
 * thanks to the community!
 *  [AARONDAS](https://wordpress.org/support/users/aarondas/)
 * (@aarondas)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607800)
 * Hi,
 * To follow up on Philip’s post. I have a custom front end, which I found here 
   and modified.
 * [http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/](http://www.cozmoslabs.com/2010/05/31/wordpress-user-registration-template-and-custom-user-profile-fields/)
 * but what I was wondering is how can we have a “user photo” uppload on the front
   end where it will allow us to upload and display the uploaded file just like 
   in the wp-admin side.
 * Thanks,
 * Aaron
 *  [Fask](https://wordpress.org/support/users/fask/)
 * (@fask)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607848)
 * Hi,
 * I dug and I got the solution for the User Photo plugin.
 * 1 = Open your theme function.php and call Thickbox in frontend:
 *     ```
       function tb_enqueue() {
        wp_enqueue_script(‘jquery’);
        wp_enqueue_script(‘thickbox’);
       }
   
       function tb_inject() {
       ?>
   
       <link rel="stylesheet" href="<?= get_option(‘siteurl’); ?>/<?= WPINC; ?>/js/thickbox/thickbox.css" type="text/css" media="screen" />
       <script type="text/javascript">
       var tb_pathToImage = "<?= get_option(‘siteurl’); ?>/<?= WPINC; ?>/js/thickbox/loadingAnimation.gif";
       var tb_closeImage = "<?= get_option(‘siteurl’); ?>/<?= WPINC; ?>/js/thickbox/tb-close.png"
       </script>
   
       <?php
       }
   
       add_action(‘wp_head’, ‘tb_enqueue’, 1);
       add_action(‘wp_footer’, ‘tb_inject’, 10);
       ```
   
 * 2 = Call User Photo frontend:
 *     ```
       <div id="user-avatar-display" >
       <h3>Avatar</h3>
       <p id="user-avatar-display-image"><?php echo 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="Personalizza il tuo Avatar" >Cambia Avatar</a>
       </div>
       <script type="text/javascript">
       function user_avatar_refresh_image(img){
       jQuery('#user-avatar-display-image').html(img);
       }
       </script>
       ```
   
 * 3 = open your css your theme and add :
 *     ```
       #user-avatar-display {
       background-color: #000;
       border:1px solid #454545;
       -moz-border-radius: 5px;
       -webkit-border-radius:5px;margin: 0 auto;
       padding: 0 20px 20px;
       position: absolute;
       right: 250px;
       text-align: center;
       top: 390px;
       }
       #user-avatar-display-image{
       border:4px solid #323232;
       width:150px;
       height:150px;
       }
       #user-avatar-link{
       float:left;
       margin:15px 0 15px 32px;
       font-size:13px;
       }
       ```
   
 * [http://img16.imageshack.us/img16/4346/userphotofrontend.png](http://img16.imageshack.us/img16/4346/userphotofrontend.png)
 * P.S: Beware of formatting quotes ”
 *  [Fask](https://wordpress.org/support/users/fask/)
 * (@fask)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607851)
 * I discovered another thing: if you use on your blog PrettyPhoto or similar you
   can call the function without Thickbox.
 * eg PrettyPhoto will use the following code:
 * `<a id="user-avatar-link" href="<?php echo admin_url('admin-ajax.php'); ?>?action
   =user_avatar_add_photo&step=1&uid=<?php echo $current_user->ID; ?>?iframe=true&
   width=520&height=350" rel="prettyPhoto[iframes]">Cambia Avatar</a>`
 *  [benetic](https://wordpress.org/support/users/benetic/)
 * (@benetic)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607856)
 * @ Fask,
    thanks for this hack for Userphoto frontend modifying. This is exactly
   what i’m looking for and i have tested it on my website. unfortunately, when 
   i click on the ‘Change avatar’ link, it only opens a empty blank page (actually
   it displays a ‘0’ in the left upper corner) and the thickbox UI doesn’t appear:
   would you have any idea about what i’m doing wrong ?
 *  [Fask](https://wordpress.org/support/users/fask/)
 * (@fask)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607857)
 * [@benetic](https://wordpress.org/support/users/benetic/)
 * I forgot to say that we must add:
 * `<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
   1.3.2/jquery.min.js?ver=1.3.2"></script>`
 * before the closing tag </head>
 *  [benetic](https://wordpress.org/support/users/benetic/)
 * (@benetic)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607858)
 * thanks for this quick answer, even if it hasn’t solve the issue 🙁
    i’m still
   trying my way through it…
 *  [Fask](https://wordpress.org/support/users/fask/)
 * (@fask)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607859)
 * So I dug. Here’s the solution:
 * before </head>:
    `<script type="text/javascript" src="http://ajax.googleapis.
   com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>`
 * call UserPhoto with prettyphoto:
    `<a id="user-avatar-link" href="<?php echo 
   admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=1&uid=<?php
   echo $current_user->ID; ?>?iframe=true&width=520&height=350" rel="prettyPhoto[
   iframes]">Cambia Avatar</a>`
 * just below add:
 *     ```
       <script type='text/javascript'>
       var swrAjax = {
       ajaxurl: "http://your_blog.com/wp-admin/admin-ajax.php"
       };
       </script>
       ```
   
 * Replace “your_blog” with the URL of your site. Let me know
 *  [mattbeck](https://wordpress.org/support/users/mattbeck/)
 * (@mattbeck)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607860)
 * Just tried to follow this example, and I have the same problem. On digging a 
   bit, the example seems to be for [http://wordpress.org/extend/plugins/user-avatar/](http://wordpress.org/extend/plugins/user-avatar/)
   the user-avatar plugin, not the user-photo plugin.
 *  [Fask](https://wordpress.org/support/users/fask/)
 * (@fask)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607861)
 * my fault. the trick is for user avatars, it is true
 *  [benetic](https://wordpress.org/support/users/benetic/)
 * (@benetic)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607862)
 * @ Fask + mattbeck
    thanks for all these details : i’ve tried it with user-avatar
   plugin and it seems to works rather fine using thickbox. take care
 *  [candy2012](https://wordpress.org/support/users/candy2012/)
 * (@candy2012)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/#post-1607866)
 * something is definitely still missing, or there’s an other trick or smth.
    I 
   even installed those pretty photos thing, with the same result:
 * when I click the link I get a white page and in the left upper corner a
    “-1”
 * What’s that !??!
    Anyone can help please?
 * Thanks
 * PS: i installed that user-avatar plugin

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/page/2/?output_format=md)

The topic ‘[Plugin: User photo] front end upload’ is closed to new replies.

## Tags

 * [front-end](https://wordpress.org/support/topic-tag/front-end/)
 * [frontend](https://wordpress.org/support/topic-tag/frontend/)
 * [upload](https://wordpress.org/support/topic-tag/upload/)

 * 16 replies
 * 9 participants
 * Last reply from: [Fask](https://wordpress.org/support/users/fask/)
 * Last activity: [14 years, 10 months ago](https://wordpress.org/support/topic/plugin-user-photo-front-end-upload/page/2/#post-1607867)
 * Status: not a support question

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics