[Plugin: User photo] front end upload

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 🙂

ok, here is a working solution for the 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!

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

P.S: Beware of formatting quotes ”

@ 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 ?

thanks for this quick answer, even if it hasn’t solve the issue 🙁
i’m still trying my way through it…

Just tried to follow this example, and I have the same problem. On digging a bit, the example seems to be for http://ww.wp.xz.cn/extend/plugins/user-avatar/ the user-avatar plugin, not the user-photo plugin.

@ 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