[Plugin: User photo] front end upload

  • Yoris

    (@yoris)


    13 years, 8 months ago

    In an attempt to create a front end “profile edit” page, I stumbled upon this topic: Custom Edit Profile Page.

    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 16 replies (of 16 total)
1 2
  • Fask

    (@fask)

    12 years, 8 months ago

    Hy,

    This works for me (with user-avatar plugin), list my steps:

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

    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>

    Download PrettyPhoto and call it before the closing tag </head>:

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/prettyPhoto.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({
			theme: 'dark_square',
			animationSpeed: 'fast',
			opacity: 0.80,
		});
	});
</script>

    Call User-avatar 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" 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>
</div>
<script type="text/javascript">
function user_avatar_refresh_image(img){
jQuery('#user-avatar-display-image').html(img);
}
</script>
<script type='text/javascript'>
var swrAjax = {
ajaxurl: "http://your_blog.com/wp-admin/admin-ajax.php"
};
</script>

    changes “your_blog.com” with the URL of your website

Viewing 16 replies (of 16 total)
1 2
  • The topic ‘[Plugin: User photo] front end upload’ is closed to new replies.