在另一个 bp 页面上使用 buddypress 头像上传和裁剪功能答案

【问题标题】：Using buddypress avatar upload and crop function on another bp page在另一个 bp 页面上使用 buddypress 头像上传和裁剪功能
【发布时间】：2016-08-23 03:48:38
【问题描述】：

目前我正在使用 BP Avatar 在网站上创建用户头像。

现在，我想将 BP Avatar 的上传和裁剪 + 预览功能用于另一个页面和另一个具有自定义设置的图像目的。

我尝试在新页面中复制和编辑代码，但它无法工作，甚至预览。

希望有人能提供帮助。

谢谢。

【问题讨论】：

我遇到了同样的问题，但我还没有找到解决方案。如果我发现我在这里发帖！

标签： image upload crop preview buddypress

【解决方案1】：

这里是代码。当 bbp 未检测到用户时，我检测到问题开始，因为在 bbp 核心中，他们从 url 获取用户 ID，而在我的情况下，这不起作用。我对需要完成的代码段进行编号。在我的情况下，我将视图从 woocommerce 插入到我的帐户的端点内。

覆盖脚本获取数据的函数。
包括所有必要的脚本。
插入到我的内容函数中。

我使用这个过滤器来bp_attachment_avatar_script_data

    /**
     * Override  the avatar script data
     *
     * @param $script_data
     * @param $object
     *
     * @return int
     */
    public function noys_avatar_script_data( $script_data, $object ) {
        $user_id  = get_current_user_id();

        if ( ! empty( $user_id ) ) {
            // Should we load the the Webcam Avatar javascript file.
            if ( bp_avatar_use_webcam() ) {
                $script_data['extra_js'] = array_merge( $script_data['extra_js'], array( 'bp-webcam' ) );
            }

            $script_data['bp_params'] = array(
                'object'     => 'user',
                'item_id'    => $user_id,
                'has_avatar' => bp_get_user_has_avatar( $user_id ),
                'nonces'     => array(
                    'set'    => wp_create_nonce( 'bp_avatar_cropstore' ),
                    'remove' => wp_create_nonce( 'bp_delete_avatar_link' ),
                ),
            );

            // Set feedback messages.
            $script_data['feedback_messages'] = array(
                1 => __( 'There was a problem cropping your profile photo.', 'buddypress' ),
                2 => __( 'Your new profile photo was uploaded successfully.', 'buddypress' ),
                3 => __( 'There was a problem deleting your profile photo. Please try again.', 'buddypress' ),
                4 => __( 'Your profile photo was deleted successfully!', 'buddypress' ),
            );
        }

        return $script_data;
    }

这是我将内容包含到 woocommerce 端点的功能。

/**
 * Endpoint HTML content.
 */
public function profile_picture_endpoints_content1() {
    $bd = buddypress();
    bp_core_register_common_scripts();
    wp_enqueue_style( 'thickbox' );
    wp_enqueue_script( 'media-upload' );

    bp_core_add_jquery_cropper();

    bp_attachments_enqueue_scripts( 'BP_Attachment_Avatar' );
    bp_attachments_get_template_part( 'avatars/index' );
}

这就是解决这个未记录的问题所需要的全部内容！

【讨论】：