[Plugin: User photo] front end upload

Thank you!!

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

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 is closed.

thanks a lot

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,

To follow up on Philip’s post. I have a custom front end, which I found here and modified.

https://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

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;
}

https://img16.imageshack.us/img16/4346/userphotofrontend.png

P.S: Beware of formatting quotes ”

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>

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

@benetic

I forgot to say that we must add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>

before the closing tag </head>

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

So I dug. Here’s the solution:

before </head>:
<script type="text/javascript" src="https://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: "https://your_blog.com/wp-admin/admin-ajax.php"
};
</script>

Replace “your_blog” with the URL of your site. Let me know

Just tried to follow this example, and I have the same problem. On digging a bit, the example seems to be for https://www.ads-software.com/extend/plugins/user-avatar/ the user-avatar plugin, not the user-photo plugin.

my fault. the trick is for user avatars, it is true

@ 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

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