WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: User photo] front end upload (17 posts)

  1. Yoris
    Member
    Posted 3 years 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?

  2. Zac
    Member
    Posted 3 years ago #

    Thank you!!

  3. noud89
    Member
    Posted 3 years ago #

    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 :)

  4. Philip
    Member
    Posted 3 years ago #

    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

  5. Philip
    Member
    Posted 3 years ago #

    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!

  6. AARONDAS
    Member
    Posted 3 years ago #

    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/

    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

  7. Fask
    Member
    Posted 3 years ago #

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

  8. Fask
    Member
    Posted 3 years ago #

    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>

  9. benetic
    Member
    Posted 3 years ago #

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

  10. Fask
    Member
    Posted 3 years ago #

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

  11. benetic
    Member
    Posted 3 years ago #

    thanks for this quick answer, even if it hasn't solve the issue :(
    i'm still trying my way through it...

  12. Fask
    Member
    Posted 3 years ago #

    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

  13. mattbeck
    Member
    Posted 3 years ago #

    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/ the user-avatar plugin, not the user-photo plugin.

  14. Fask
    Member
    Posted 3 years ago #

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

  15. benetic
    Member
    Posted 3 years ago #

    @ 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

  16. candy2012
    Member
    Posted 2 years ago #

    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

  17. Fask
    Member
    Posted 2 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic