0

I'm hoping someone on this forum can help me with a custom avatar upload page I'm trying to create for Buddypress. Apologies in advance for the long email, but I want to be as clear as possible so I can hopefully get a clear and specific answer :)

The page is part of a three step "getting started" process the user completes after registering for the website (1. filling out profile fields 2. uploading avatar 3. inviting friends).

I'm no expert with code, but I have got step 1 and 3 sorted by copying and editing the code from the profile/edit.php and invite-anyone/by-email/by-email.php files respectively, and then doing a redirect onsubmit to the next step.

To get step 1 to work I also had to edit the bp-xprofile-template.php file to include an if is_page ... else ... so that the page would use loggedin_user rather than displayed_user.

With step 2 I have the page appearing correctly, but after I choose an image for the avatar and hit upload the page refreshes and does not go to the crop, which is what it would do if you were uploading an avatar on the change-avatar page within the profile.

If I change the form action to redirect to the change-avatar page within the logged in user profile (by default there is no action), then the crop appears, but I don't want to have the user leave the "steps".

I thought maybe I needed to change something in the set of avatar_admin functions in bp-core-template.php so that it will work on other pages, but this is no beyond my abilities. I really hope someone can help with this because it is the final hurdle for completing this process.

Below is the code for the change-avatar.php and this is what I've copied and am trying to make work on a custom page. My page stops working properly at "if ( 'crop-image' == bp_get_avatar_admin_step()". Thanks in advance.

    <h4><?php _e( 'Change Avatar', 'buddypress' ) ?></h4>

<?php do_action( 'bp_before_profile_avatar_upload_content' ) ?>

<?php if ( !(int)bp_get_option( 'bp-disable-avatar-uploads' ) ) : ?>

    <p><?php _e( 'Your avatar will be used on your profile and throughout the site. If there is a <a href="http://gravatar.com">Gravatar</a> associated with your account email we will use that, or you can upload an image from your computer.', 'buddypress') ?></p>

    <form action="" method="post" id="avatar-upload-form" class="standard-form" enctype="multipart/form-data">

        <?php if ( 'upload-image' == bp_get_avatar_admin_step() ) : ?>

            <?php wp_nonce_field( 'bp_avatar_upload' ) ?>
            <p><?php _e( 'Click below to select a JPG, GIF or PNG format photo from your computer and then click \'Upload Image\' to proceed.', 'buddypress' ) ?></p>

            <p id="avatar-upload">
                <input type="file" name="file" id="file" />
                <input type="submit" name="upload" id="upload" value="<?php _e( 'Upload Image', 'buddypress' ) ?>" />
                <input type="hidden" name="action" id="action" value="bp_avatar_upload" />
            </p>

            <?php if ( bp_get_user_has_avatar() ) : ?>
                <p><?php _e( "If you'd like to delete your current avatar but not upload a new one, please use the delete avatar button.", 'buddypress' ) ?></p>
                <p><a class="button edit" href="<?php bp_avatar_delete_link() ?>" title="<?php _e( 'Delete Avatar', 'buddypress' ) ?>"><?php _e( 'Delete My Avatar', 'buddypress' ) ?></a></p>
            <?php endif; ?>

        <?php endif; ?>

        <?php if ( 'crop-image' == bp_get_avatar_admin_step() ) : ?>

            <h5><?php _e( 'Crop Your New Avatar', 'buddypress' ) ?></h5>

            <img src="<?php bp_avatar_to_crop() ?>" id="avatar-to-crop" class="avatar" alt="<?php _e( 'Avatar to crop', 'buddypress' ) ?>" />

            <div id="avatar-crop-pane">
                <img src="<?php bp_avatar_to_crop() ?>" id="avatar-crop-preview" class="avatar" alt="<?php _e( 'Avatar preview', 'buddypress' ) ?>" />
            </div>

            <input type="submit" name="avatar-crop-submit" id="avatar-crop-submit" value="<?php _e( 'Crop Image', 'buddypress' ) ?>" />

            <input type="hidden" name="image_src" id="image_src" value="<?php bp_avatar_to_crop_src() ?>" />
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />

            <?php wp_nonce_field( 'bp_avatar_cropstore' ) ?>

        <?php endif; ?>

    </form>

<?php else : ?>

    <p><?php _e( 'Your avatar will be used on your profile and throughout the site. To change your avatar, please create an account with <a href="http://gravatar.com">Gravatar</a> using the same email address as you used to register with this site.', 'buddypress' ) ?></p>

<?php endif; ?>

<?php do_action( 'bp_after_profile_avatar_upload_content' ) ?>
Dylan Aubrey
  • 1
  • 1
  • 2

3 Answers3

0

My page stops working properly at "if ( 'crop-image' == bp_get_avatar_admin_step()"

So what does bp_get_avatar_admin_step() = at that point ? Echo it out to see.

Does the avatar actually upload? If so, you have to figure out how to advance the admin_step.

I thought maybe I needed to change something in the set of avatar_admin functions in bp-core-template.php, but this is no beyond my abilities

Rather than change, figure out how they are called.

shanebp
  • 1,904
  • 3
  • 17
  • 28
0

I just finished working on implementing my own custom avatar page and had the same issue. I think I actually have lost hair over it. haha. I ended up adapting the code on my end to ensure that bp can still be upgraded by taking a few chunks of the relevant code and building it into a new function in as part of my theme.

The problem is the hidden submit value 'w' is one of many reserved wordpress terms.

<input type="hidden" name="image_src" id="image_src" value="<?php bp_avatar_to_crop_src(); ?>" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />

You will need to change this value to anything other and then implement your own version of the handler function:

buddypress/bp-xprofile/bp-xprofile-screens.php->xprofile_screen_change_avatar();

Also, perhaps there's a better way, but for the cropping to work I had to implement a separate call for the content within the 

bp_core_add_jquery_cropper(){
 wp_enqueue_style( 'jcrop' );
 wp_enqueue_script( 'jcrop', array( 'jquery' ) );
 add_action( 'wp_head', 'bp_core_add_cropper_inline_js' );
 add_action( 'wp_head', 'bp_core_add_cropper_inline_css' );
}

to

 wp_enqueue_style( 'jcrop' );
 wp_enqueue_script( 'jcrop', array( 'jquery' ) );
 add_action( 'wp_footer', 'bp_core_add_cropper_inline_js' );
 add_action( 'wp_footer', 'bp_core_add_cropper_inline_css' );

within my own implementation of the profile_screen_change_avatar().

Hopefully, this can still be some use to you or others. Let me know if this all makes sense (well or doesn't ;) ).

Zenvied
  • 73
  • 1
  • 5
0

Thank you for your helpful suggestions. Just to add that @Zenvied's suggestions work very well. The only thing is I had to add my own implementations of "bp_core_add_cropper_inline_js()" and "bp_core_add_cropper_inline_css()" and then call them from within my implementation of "xprofile_screen_change_avatar()". So instead of this:

 wp_enqueue_style( 'jcrop' );
 wp_enqueue_script( 'jcrop', array( 'jquery' ) );
 add_action( 'wp_footer', 'bp_core_add_cropper_inline_js' );
 add_action( 'wp_footer', 'bp_core_add_cropper_inline_css' );

I did this:

self::bp_custom_core_add_cropper_inline_css();
self::bp_custom_core_add_cropper_inline_js();
wp_enqueue_style( 'jcrop' );
wp_enqueue_script( 'jcrop', array( 'jquery' ) );

Hope this helps someone! :-)

unity_of_opposites
  • 3
  • 1