BuddyPress.org

Hello,

I would like to use the widget that allows the avatar upload to allow users to upload, for example, a before and after picture of themselves. It’s such a nice widget and props to those who built it. Maybe one of you is reading this post.

I’ve gotten as far as extending the BP_Attachment_Avatar class and enqueing it:

bp_attachments_enqueue_scripts( 'My_Attachment_Class' );

… and then rendering the template:

bp_attachments_get_template_part( 'avatars/index' );

… and I’ve managed to inject something into the upload payload and affect the ratio of the cropper. I did that in javascript:

window.BP_Uploader.settings.defaults.multipart_params.bp_params.foo = 'bar';
window.BP_Uploader.settings.crop = {
    full_h: 160,
    full_w: 120
}

… and finally, I’m listening for that in the ajax action:

add_action( 'wp_ajax_bp_avatar_upload', 'my_function', 5 ); // before the default BuddyPress upload
function my_function() 
{
    if ( $_POST['bp_params']['foo'] == 'bar' ) {
        echo "Well, hellooooooooo world';
    }
}

But from there, I’m stuck. Any advice on how to:

1 Prevent the user’s avatar from being clobbered
2 Get that photo’s url in a template tag, i.e. <?php echo get_photo_they_uploaded_url(); ?>
3 When the image upload returns with the cropping tool, move the cropper preview div to somewhere else in the DOM

If there is a more appropriate forum to ask this question, I’m happy to migrate over there.

Many thanks
Trevor