Ticket #6570: 6570.04.patch

src/bp-core/admin/bp-core-admin-settings.php

@@ -160 +160 @@
 <?php
 }
 
+/**
+ * Allow members to upload cover images field.
+ *
+ * @since 2.4.0
+ */
+function bp_admin_setting_callback_cover_image_uploads() {
+?>
+        <input id="bp-disable-cover-image-uploads" name="bp-disable-cover-image-uploads" type="checkbox" value="1" <?php checked( ! bp_disable_cover_image_uploads() ); ?> />
+        <label for="bp-disable-cover-image-uploads"><?php _e( 'Allow registered members to upload cover images', 'buddypress' ); ?></label>
+<?php
+}
+
 /** Groups Section ************************************************************/
 
 /**
@@ -198 +210 @@
 <?php
 }
 
+/**
+ * 'Enable group cover images' field markup.
+ *
+ * @since 2.4.0
+ */
+function bp_admin_setting_callback_group_cover_image_uploads() {
+?>
+        <input id="bp-disable-group-cover-image-uploads" name="bp-disable-group-cover-image-uploads" type="checkbox" value="1" <?php checked( ! bp_disable_group_cover_image_uploads() ); ?> />
+        <label for="bp-disable-group-cover-image-uploads"><?php _e( 'Allow customizable cover images for groups', 'buddypress' ); ?></label>
+<?php
+}
+
 /** Forums Section ************************************************************/
 
 /**
@@ -300 +324 @@
                 $legacy_options = array(
                         'bp-disable-account-deletion',
                         'bp-disable-avatar-uploads',
+                        'bp-disable-cover-image-uploads',
                         'bp-disable-group-avatar-uploads',
+                        'bp-disable-group-cover-image-uploads',
                         'bp_disable_blogforum_comments',
                         'bp-disable-profile-sync',
                         'bp_restrict_group_creation',

src/bp-core/bp-core-actions.php

@@ -93 +93 @@
 add_action( 'bp_template_redirect', 'bp_get_request',        10 );
 
 /**
- * Add the BuddyPress functions file.
+ * Add the BuddyPress functions file and the Theme Compat Default features.
  */
-add_action( 'bp_after_setup_theme', 'bp_load_theme_functions', 1 );
+add_action( 'bp_after_setup_theme', 'bp_load_theme_functions',                    1 );
+add_action( 'bp_after_setup_theme', 'bp_register_theme_compat_default_features', 10 );
 
 // Load the admin.
 if ( is_admin() ) {

src/bp-core/bp-core-admin.php

@@ -338 +338 @@
                         // Add the main section
                         add_settings_section( 'bp_xprofile', _x( 'Profile Settings', 'BuddyPress setting tab', 'buddypress' ), 'bp_admin_setting_callback_xprofile_section', 'buddypress' );
 
+                        // Avatars
                         add_settings_field( 'bp-disable-avatar-uploads', __( 'Profile Photo Uploads', 'buddypress' ), 'bp_admin_setting_callback_avatar_uploads', 'buddypress', 'bp_xprofile' );
                         register_setting( 'buddypress', 'bp-disable-avatar-uploads', 'intval' );
 
+                        // Cover images
+                        if ( bp_is_active( 'xprofile', 'cover_image' ) ) {
+                                add_settings_field( 'bp-disable-cover-image-uploads', __( 'Cover Image Uploads', 'buddypress' ), 'bp_admin_setting_callback_cover_image_uploads', 'buddypress', 'bp_xprofile' );
+                                register_setting( 'buddypress', 'bp-disable-cover-image-uploads', 'intval' );
+                        }
+
                         // Profile sync setting
                         add_settings_field( 'bp-disable-profile-sync',   __( 'Profile Syncing',  'buddypress' ), 'bp_admin_setting_callback_profile_sync', 'buddypress', 'bp_xprofile' );
                         register_setting  ( 'buddypress', 'bp-disable-profile-sync', 'intval' );
@@ -360 +367 @@
                         // Allow group avatars.
                         add_settings_field( 'bp-disable-group-avatar-uploads', __( 'Group Photo Uploads', 'buddypress' ), 'bp_admin_setting_callback_group_avatar_uploads', 'buddypress', 'bp_groups' );
                         register_setting( 'buddypress', 'bp-disable-group-avatar-uploads', 'intval' );
+
+                        // Allow group cover images.
+                        if ( bp_is_active( 'groups', 'cover_image' ) ) {
+                                add_settings_field( 'bp-disable-group-cover-image-uploads', __( 'Group Cover Image Uploads', 'buddypress' ), 'bp_admin_setting_callback_group_cover_image_uploads', 'buddypress', 'bp_groups' );
+                                register_setting( 'buddypress', 'bp-disable-group-cover-image-uploads', 'intval' );
+                        }
                 }
 
                 /** Forums ************************************************************/

src/bp-core/bp-core-attachments.php

@@ -257 +257 @@
                  * @param string $object the object the avatar belongs to (eg: user or group)
                  */
                 $settings['nav'] = bp_sort_by_key( apply_filters( 'bp_attachments_avatar_nav', $avatar_nav, $object ), 'order', 'num' );
+
+        // Specific to BuddyPress cover images
+        } elseif ( 'bp_cover_image_upload' === $defaults['multipart_params']['action'] ) {
+
+                // Cover images only need 1 file and 1 only!
+                $defaults['multi_selection'] = false;
+
+                // Default cover component is xprofile
+                $cover_component = 'xprofile';
+
+                // Get the object we're editing the cover image of
+                $object = $defaults['multipart_params']['bp_params']['object'];
+
+                // Set the cover component according to the object
+                if ( 'group' === $object ) {
+                        $cover_component = 'groups';
+                } elseif ( 'user' !== $object ) {
+                        $cover_component = apply_filters( 'bp_attachments_cover_image_ui_component', $cover_component );
+                }
+                // Get cover image advised dimensions
+                $cover_dimensions = bp_attachments_get_cover_image_dimensions( $cover_component );
+
+                // Set warning messages
+                $strings['cover_image_warnings'] = apply_filters( 'bp_attachments_cover_image_ui_warnings', array(
+                        'dimensions'  => sprintf(
+                                        __( 'For better results, make sure to upload an image having a width >= %1$s px and a height >= %2$s px.', 'buddypress' ),
+                                        (int) $cover_dimensions['width'],
+                                        (int) $cover_dimensions['height']
+                                ),
+                ) );
         }
 
         // Set Plupload settings
@@ -317 +347 @@
 function bp_attachments_current_user_can( $capability, $args = array() ) {
         $can = false;
 
-        if ( 'edit_avatar' === $capability ) {
+        if ( 'edit_avatar' === $capability || 'edit_cover_image' === $capability ) {
                 /**
                  * Needed avatar arguments are set.
                  */
@@ -410 +440 @@
                 bp_get_template_part( $attachment_template_part );
         }
 }
+
+/** Cover Image ***************************************************************/
+
+/**
+ * Get the cover image settings
+ *
+ * @since  2.4.0
+ *
+ * @param  string $component the component to get the settings for ("xprofile" for user or "groups")
+ * @return array            the cover image settings
+ */
+function bp_attachments_get_cover_image_settings( $component = 'xprofile' ) {
+        // Default parameters
+        $args = array();
+
+        // First look in BP Theme Compat
+        $cover_image = bp_get_theme_compat_feature( 'cover_image' );
+
+        if ( ! empty( $cover_image ) ) {
+                $args = (array) $cover_image;
+        }
+
+        /**
+         * Then let people override/set the feature using this dynamic filter
+         *
+         * eg: for the user's profile cover image use :
+         * add_filter( 'bp_before_xprofile_cover_image_settings_parse_args', 'your_filter', 10, 1 );
+         *
+         * @since  2.4.0
+         *
+         * @param array $settings the cover image settings
+         */
+        $settings = bp_parse_args( $args, array(
+                'components'    => array(),
+                'width'         => 1300,
+                'height'        => 225,
+                'callback'      => '',
+                'theme_handle'  => '',
+                'default_cover' => '',
+        ), $component . '_cover_image_settings' );
+
+        if ( empty( $settings['components'] ) || empty( $settings['callback'] ) || empty( $settings['theme_handle'] ) ) {
+                return false;
+        }
+
+        // Current component is not supported
+        if ( ! in_array( $component, $settings['components'] ) ) {
+                return false;
+        }
+
+        // Finally return the settings
+        return $settings;
+}
+
+/**
+ * Get cover image Width and Height
+ *
+ * @since  2.4.0
+ *
+ * @param  string $component the BuddyPress component concerned ("xprofile" for user or "groups")
+ * @return array             an associative array containing the advised width and height for the cover image
+ */
+function bp_attachments_get_cover_image_dimensions( $component = 'xprofile' ) {
+        // Let's prevent notices when setting the warning strings
+        $default = array( 'width' => 0, 'height' => 0 );
+
+        $settings = bp_attachments_get_cover_image_settings( $component );
+
+        if ( empty( $settings ) ) {
+                return false;
+        }
+
+        // Get width and height
+        $wh = array_intersect_key( $settings, $default );
+
+        /**
+         * Filter here to edit the cover image dimensions if needed.
+         *
+         * @since  2.4.0
+         *
+         * @param  array  $wh        an associative array containing the width and height values
+         * @param  array  $settings  an associative array containing all the feature settings
+         * @param  string $compnent  the requested component
+         */
+        return apply_filters( 'bp_attachments_get_cover_image_dimensions', $wh, $settings, $component );
+}
+
+/**
+ * Are we on a page to edit a cover image ?
+ *
+ * @since  2.4.0
+ *
+ * @todo  The Groups single item part
+ * @return bool True if on a page to edit a cover image, false otherwise
+ */
+function bp_attachments_cover_image_is_edit() {
+        $retval = false;
+
+        $current_component = bp_current_component();
+        if ( 'profile' === $current_component ) {
+                $current_component = 'xprofile';
+        }
+
+        if ( ! bp_is_active( $current_component, 'cover_image' ) ) {
+                return $retval;
+        }
+
+        if ( bp_is_user_change_cover_image() ) {
+                $retval = ! bp_disable_cover_image_uploads();
+        }
+
+        if ( ( bp_is_group_admin_page() && 'group-cover-image' == bp_get_group_current_admin_tab() )
+                || ( bp_is_group_create() && bp_is_group_creation_step( 'group-cover-image' ) ) ) {
+                $retval = ! bp_disable_group_cover_image_uploads();
+        }
+
+        return apply_filters( 'bp_attachments_cover_image_is_edit', $retval, $current_component );
+}
+
+/**
+ * Get the url or the path for a type of attachment
+ *
+ * @since  2.4.0
+ *
+ * @param  string $data whether to get the url or the path
+ * @param  array  $args {
+ *     @type string $object_dir  The object dir (eg: members/groups). Defaults to members.
+ *     @type int    $item_id     The object id (eg: a user or a group id). Defaults to current user.
+ *     @type string $type        The type of the attachment which is also the subdir where files are saved.
+ *                               Defaults to 'cover-image'
+ *     @type string $file        The name of the file.
+ * }
+ * @return string|bool the url or the path to the attachment, false otherwise
+ */
+function bp_attachments_get_attachment( $data = 'url', $args = array() ) {
+        // Default value
+        $attachment_data = false;
+
+        $r = bp_parse_args( $args, array(
+                'object_dir' => 'members',
+                'item_id'    => bp_loggedin_user_id(),
+                'type'       => 'cover-image',
+                'file'       => '',
+        ), 'attachments_get_attachment_src' );
+
+        // Get BuddyPress Upload Dir
+        $bp_upload_dir = bp_upload_dir();
+
+        $type_subdir = 'buddypress/' . $r['object_dir'] . '/' . $r['item_id'] . '/' . $r['type'];
+        $type_dir    = trailingslashit( $bp_upload_dir['basedir'] ) . $type_subdir;
+
+        if ( ! is_dir( $type_dir ) ) {
+                return $attachment_data;
+        }
+
+        if ( ! empty( $r['file'] ) ) {
+                if ( ! file_exists( trailingslashit( $type_dir ) . $r['file'] ) ) {
+                        return $attachment_data;
+                }
+
+                if ( 'url' === $data ) {
+                        $attachment_data = trailingslashit( $bp_upload_dir['baseurl'] ) . $type_subdir . '/' . $r['file'];
+                } else {
+                        $attachment_data = trailingslashit( $type_dir ) . $r['file'];
+                }
+
+        } else {
+                $file = false;
+
+                // Open the directory and get the first file
+                if ( $att_dir = opendir( $type_dir ) ) {
+
+                        while ( false !== ( $attachment_file = readdir( $att_dir ) ) ) {
+                                // Look for the first file having the type in its name
+                                if ( false !== strpos( $attachment_file, $r['type'] ) && empty( $file ) ) {
+                                        $file = $attachment_file;
+                                        break;
+                                }
+                        }
+                }
+
+                if ( empty( $file ) ) {
+                        return $attachment_data;
+                }
+
+                if ( 'url' === $data ) {
+                        $attachment_data = trailingslashit( $bp_upload_dir['baseurl'] ) . $type_subdir . '/' . $file;
+                } else {
+                        $attachment_data = trailingslashit( $type_dir ) . $file;
+                }
+        }
+
+        return $attachment_data;
+}
+
+/**
+ * Does the user has a cover image ?
+ *
+ * @since  2.4.0
+ *
+ * @param  int $user_id
+ * @return bool True if the user has a cover image, false otherwise
+ */
+function bp_attachments_get_user_has_cover_image( $user_id = 0 ) {
+        if ( empty( $user_id ) ) {
+                $user_id = bp_displayed_user_id();
+        }
+
+        $cover_src = bp_attachments_get_attachment( 'url', array(
+                'item_id'   => $user_id,
+        ) );
+
+        return (bool) apply_filters( 'bp_attachments_get_user_has_cover_image', $cover_src, $user_id );
+}
+
+/**
+ * Does the group has a cover image ?
+ *
+ * @since  2.4.0
+ *
+ * @param  int $group_id
+ * @return bool True if the group has a cover image, false otherwise
+ */
+function bp_attachments_get_group_has_cover_image( $group_id = 0 ) {
+        if ( empty( $group_id ) ) {
+                $group_id = bp_get_current_group_id();
+        }
+
+        $cover_src = bp_attachments_get_attachment( 'url', array(
+                'object_dir' => 'groups',
+                'item_id'    => $group_id,
+        ) );
+
+        return (bool) apply_filters( 'bp_attachments_get_user_has_cover_image', $cover_src, $group_id );
+}
+
+/**
+ * Delete an attachment for the given arguments
+ *
+ * @since  2.4.0
+ *
+ * @param  array $args
+ * @see    bp_attachments_get_attachment() For more information on accepted arguments.
+ * @return bool True if the attachment was deleted, false otherwise
+ */
+function bp_attachments_delete_file( $args = array() ) {
+        $cover_path = bp_attachments_get_attachment( 'path', $args );
+
+        if ( empty( $cover_path ) ) {
+                return false;
+        }
+
+        @unlink( $cover_path );
+        return true;
+}
+
+/**
+ * Ajax Upload and set a cover image
+ *
+ * @since  2.4.0
+ *
+ * @return  string|null A json object containing success data if the upload succeeded
+ *                      error message otherwise.
+ */
+function bp_attachments_cover_image_ajax_upload() {
+        // Bail if not a POST action
+        if ( 'POST' !== strtoupper( $_SERVER['REQUEST_METHOD'] ) ) {
+                wp_die();
+        }
+
+        /**
+         * Sending the json response will be different if
+         * the current Plupload runtime is html4
+         */
+        $is_html4 = false;
+        if ( ! empty( $_POST['html4' ] ) ) {
+                $is_html4 = true;
+        }
+
+        // Check the nonce
+        check_admin_referer( 'bp-uploader' );
+
+        // Init the BuddyPress parameters
+        $bp_params = array();
+
+        // We need it to carry on
+        if ( ! empty( $_POST['bp_params' ] ) ) {
+                $bp_params = bp_parse_args( $_POST['bp_params' ], array(
+                        'object'  => 'user',
+                        'item_id' => bp_loggedin_user_id(),
+                ), 'attachments_cover_image_ajax_upload' );
+        } else {
+                bp_attachments_json_response( false, $is_html4 );
+        }
+
+        // We need the object to set the uploads dir filter
+        if ( empty( $bp_params['object'] ) ) {
+                bp_attachments_json_response( false, $is_html4 );
+        }
+
+        // Capability check
+        if ( ! bp_attachments_current_user_can( 'edit_cover_image', $bp_params ) ) {
+                bp_attachments_json_response( false, $is_html4 );
+        }
+
+        $bp          = buddypress();
+        $needs_reset = array();
+
+        // Default object data
+        $object_data = array( 'dir' => 'members', 'component' => 'xprofile' );
+        if ( 'group' === $bp_params['object'] ) {
+                $object_data = array( 'dir' => 'groups', 'component' => 'groups' );
+
+                if ( ! bp_get_current_group_id() && ! empty( $bp_params['item_id'] ) ) {
+                        $needs_reset = array( 'component' => 'groups', 'key' => 'current_group', 'value' => $bp->groups->current_group );
+                        $bp->groups->current_group = groups_get_group( array(
+                                'group_id'        => $bp_params['item_id'],
+                                'populate_extras' => false,
+                        ) );
+                }
+        } elseif ( 'user' !== $bp_params['object'] ) {
+                $object_data = apply_filters( 'bp_attachments_cover_image_object_dir', $object_data, $bp_params['object'] );
+
+                if ( ! bp_displayed_user_id() && ! empty( $bp_params['item_id'] ) ) {
+                        $needs_reset = array( 'key' => 'displayed_user', 'value' => $bp->displayed_user );
+                        $bp->displayed_user->id = $bp_params['item_id'];
+                }
+        }
+
+        $cover_image_attachment = new BP_Attachment_Cover_Image();
+        $uploaded = $cover_image_attachment->upload( $_FILES );
+
+        // Reset objects
+        if ( ! empty( $needs_reset ) ) {
+                if ( ! empty( $needs_reset['component'] ) ) {
+                        $bp->{$needs_reset['component']}->{$needs_reset['key']} = $needs_reset['value'];
+                } else {
+                        $bp->{$needs_reset['key']} = $needs_reset['value'];
+                }
+        }
+
+        if ( ! empty( $uploaded['error'] ) ) {
+                // Upload error response
+                bp_attachments_json_response( false, $is_html4, array(
+                        'type'    => 'upload_error',
+                        'message' => sprintf( __( 'Upload Failed! Error was: %s', 'buddypress' ), $uploaded['error'] ),
+                ) );
+        }
+
+        // Get advised dimensions for the cover image
+        $dimensions = bp_attachments_get_cover_image_dimensions( $object_data['component'] );
+
+        // Resize the image so that it fit with the cover image dimensions
+        $cover_image  = $cover_image_attachment->fit( $uploaded['file'], $dimensions );
+        $is_too_small = false;
+
+        // Image is too small in width and height
+        if ( empty( $cover_image ) ) {
+                $cover_file = $cover_image_attachment->generate_filename( $uploaded['file'] );
+                @rename( $uploaded['file'], $cover_file );
+
+                // It's too small!
+                $is_too_small = true;
+        } elseif ( ! empty( $cover_image['path'] ) ) {
+                $cover_file   = $cover_image['path'];
+
+                if ( $cover_image['width'] < $dimensions['width'] || $cover_image['height'] < $dimensions['height'] ) {
+                        $is_too_small = true;
+                }
+        }
+
+        // Default error message
+        $error_message = __( 'There was a problem uploading the cover image.', 'buddypress' );
+
+        if ( empty( $cover_file ) ) {
+                // Upload error response
+                bp_attachments_json_response( false, $is_html4, array(
+                        'type'    => 'upload_error',
+                        'message' => __( 'There was a problem uploading the cover image.', 'buddypress' ),
+                ) );
+        }
+
+        // Set the basename for the cover file
+        $cover_basename = wp_basename( $cover_file );
+
+        // Get BuddyPress Upload Dir
+        $bp_upload_dir = bp_upload_dir();
+
+        $cover_subdir = 'buddypress/' . $object_data['dir'] . '/' . $bp_params['item_id'] . '/cover-image';
+        $cover_dir    = trailingslashit( $bp_upload_dir['basedir'] ) . $cover_subdir;
+
+        if ( ! is_dir( $cover_dir ) ) {
+                // Upload error response
+                bp_attachments_json_response( false, $is_html4, array(
+                        'type'    => 'upload_error',
+                        'message' => $error_message,
+                ) );
+        }
+
+        // Clean up the cover dir to only keep the uploaded cover image
+        if ( $att_dir = opendir( $cover_dir ) ) {
+                while ( false !== ( $attachment_file = readdir( $att_dir ) ) ) {
+                        // skip directories and the new cover image
+                        if ( 2 < strlen( $attachment_file ) && 0 !== strpos( $attachment_file, '.' ) && $cover_basename !== $attachment_file ) {
+                                @unlink( $cover_dir . '/' . $attachment_file );
+                        }
+                }
+        }
+
+        // Build the url to the file
+        $cover_url = trailingslashit( $bp_upload_dir['baseurl'] ) . $cover_subdir . '/' . $cover_basename;
+
+        // Init Feedback code, 1 is success
+        $feedback_code = 1;
+
+        // 0 is the size warning
+        if ( $is_too_small ) {
+                $feedback_code = 0;
+        }
+
+        // Set the name of the file
+        $name = $_FILES['file']['name'];
+        $name_parts = pathinfo( $name );
+        $name = trim( substr( $name, 0, - ( 1 + strlen( $name_parts['extension'] ) ) ) );
+
+        // Finally return the cover image url to the UI
+        bp_attachments_json_response( true, $is_html4, array(
+                'name'          => $name,
+                'url'           => $cover_url,
+                'feedback_code' => $feedback_code,
+        ) );
+}
+add_action( 'wp_ajax_bp_cover_image_upload', 'bp_attachments_cover_image_ajax_upload' );
+
+/**
+ * Ajax delete a cover image for a given object and item id.
+ *
+ * @since 2.4.0
+ *
+ * @return string|null A json object containing success data if the cover image was deleted
+ *                     error message otherwise.
+ */
+function bp_attachments_cover_image_ajax_delete() {
+        // Bail if not a POST action.
+        if ( 'POST' !== strtoupper( $_SERVER['REQUEST_METHOD'] ) ) {
+                wp_send_json_error();
+        }
+
+        $cover_image_data = $_POST;
+
+        if ( empty( $cover_image_data['object'] ) || empty( $cover_image_data['item_id'] ) ) {
+                wp_send_json_error();
+        }
+
+        // Check the nonce
+        check_admin_referer( 'bp_delete_cover_image', 'nonce' );
+
+        // Capability check
+        if ( ! bp_attachments_current_user_can( 'edit_cover_image', $cover_image_data ) ) {
+                wp_send_json_error();
+        }
+
+        // Set object for the user's case
+        if ( 'user' === $cover_image_data['object'] ) {
+                $component = 'xprofile';
+                $dir       = 'members';
+
+        // Set it for any other cases
+        } else {
+                $component = $cover_image_data['object'] . 's';
+                $dir       = $component;
+        }
+
+        // Handle delete
+        if ( bp_attachments_delete_file( array( 'item_id' => $cover_image_data['item_id'], 'object_dir' => $dir, 'type' => 'cover-image' ) ) ) {
+
+                // Defaults no cover image
+                $response         = array(
+                        'reset_url'     => '',
+                        'feedback_code' => 3 ,
+                );
+
+                // Get cover image settings in case there's a default header
+                $cover_params = bp_attachments_get_cover_image_settings( $component );
+
+                // Check if there's a default cover
+                if ( ! empty( $cover_params['default_cover'] ) ) {
+                        $response['reset_url'] = $cover_params['default_cover'];
+                }
+
+                // Finally send the reset url
+                wp_send_json_success( $response );
+
+        } else {
+                wp_send_json_error( array(
+                        'feedback_code' => 2,
+                ) );
+        }
+}
+add_action( 'wp_ajax_bp_cover_image_delete', 'bp_attachments_cover_image_ajax_delete' );

src/bp-core/bp-core-catchuri.php

@@ -402 +402 @@
         }
 
         /**
-         * Filters the template locations.
-         *
-         * Allows plugins to alter where the template files are located.
-         *
-         * @since BuddyPress (1.1.0)
-         *
-         * @param string $template           Located template path.
-         * @param array  $filtered_templates Array of templates to attempt to load.
+         * It's a modal, use the specific template
          */
-        $located_template = apply_filters( 'bp_located_template', $template, $filtered_templates );
+        if ( bp_is_modal() ) {
+                $located_template = bp_locate_template( reset( $filtered_templates ), false );
+        } else {
+                /**
+                 * Filters the template locations.
+                 *
+                 * Allows plugins to alter where the template files are located.
+                 *
+                 * @since BuddyPress (1.1.0)
+                 *
+                 * @param string $template           Located template path.
+                 * @param array  $filtered_templates Array of templates to attempt to load.
+                 */
+                $located_template = apply_filters( 'bp_located_template', $template, $filtered_templates );
+        }
+
         if ( !empty( $located_template ) ) {
                 // Template was located, lets set this as a valid page and not a 404.
                 status_header( 200 );

src/bp-core/bp-core-classes.php

@@ -23 +23 @@
 require dirname( __FILE__ ) . '/classes/class-bp-media-extractor.php';
 require dirname( __FILE__ ) . '/classes/class-bp-attachment.php';
 require dirname( __FILE__ ) . '/classes/class-bp-attachment-avatar.php';
+require dirname( __FILE__ ) . '/classes/class-bp-attachment-cover-image.php';

src/bp-core/bp-core-cssjs.php

@@ -43 +43 @@
                 'bp-avatar'   => array( 'file' => "{$url}avatar{$min}.js", 'dependencies' => array( 'jcrop' ), 'footer' => true ),
                 'bp-webcam'   => array( 'file' => "{$url}webcam{$min}.js", 'dependencies' => array( 'bp-avatar' ), 'footer' => true ),
 
+                // 2.4
+                'bp-cover-image' => array( 'file' => "{$url}cover-image{$min}.js", 'dependencies' => array(), 'footer' => true ),
+
+                // 2.4
+                'bp-modal' => array( 'file' => "{$url}modal{$min}.js", 'dependencies' => array( 'thickbox' ), 'footer' => true ),
+
         ) );
 
         $version = bp_get_version();
@@ -87 +93 @@
                         'file'         => "{$url}avatar{$min}.css",
                         'dependencies' => array( 'jcrop' )
                 ),
+                'bp-modal' => array(
+                        'file'         => "{$url}modal{$min}.css",
+                        'dependencies' => array( 'thickbox' )
+                ),
         ) );
 
         foreach ( $styles as $id => $style ) {
@@ -140 +150 @@
 add_action( 'bp_enqueue_scripts', 'bp_core_avatar_scripts' );
 
 /**
+ * Enqueues the css and js required by the Cover Image UI.
+ *
+ * @since  2.4.0
+ */
+function bp_core_cover_image_scripts() {
+        if ( ! bp_attachments_cover_image_is_edit() ) {
+                return false;
+        }
+
+        // Enqueue the Attachments scripts for the Cover Image UI
+        bp_attachments_enqueue_scripts( 'BP_Attachment_Cover_Image' );
+}
+add_action( 'bp_enqueue_scripts', 'bp_core_cover_image_scripts' );
+
+/**
  * Enqueues jCrop library and hooks BP's custom cropper JS.
  */
 function bp_core_add_jquery_cropper() {
@@ -337 +362 @@
                 'bp-jquery-scroll-to'
         ) );
 }
+
+/**
+ * Add inline css to display the component's single item cover image
+ *
+ * @since 2.4.0
+ *
+ * @param  bool $return true to get the inline css
+ * @return string|array the inline css or an associative array containing
+ *                      the css rules and the style handle
+ */
+function bp_add_cover_image_inline_css( $return = false ) {
+        $bp = buddypress();
+
+        // Find the component of the current item
+        if ( bp_is_user() ) {
+
+                // User is not allowed to upload cover images
+                // no need to carry on
+                if ( bp_disable_cover_image_uploads() ) {
+                        return;
+                }
+
+                $cover_image_object = array(
+                        'component' => 'xprofile',
+                        'object' => $bp->displayed_user
+                );
+        } elseif ( bp_is_group() ) {
+
+                // Users are not allowed to upload cover images for their groups
+                // no need to carry on
+                if ( bp_disable_group_cover_image_uploads() ) {
+                        return;
+                }
+
+                $cover_image_object = array(
+                        'component' =>'groups',
+                        'object' => $bp->groups->current_group
+                );
+        } else {
+                $cover_image_object = apply_filters( 'bp_current_cover_image_object_inline_css', array() );
+        }
+
+        // Bail if no component were found.
+        if ( empty( $cover_image_object['component'] ) || empty( $cover_image_object['object'] ) || ! bp_is_active( $cover_image_object['component'], 'cover_image' ) ) {
+                return;
+        }
+
+        // Get the settings of the cover image feature for the current component
+        $params = bp_attachments_get_cover_image_settings( $cover_image_object['component'] );
+
+        // Bail if no params.
+        if ( empty( $params ) ) {
+                return;
+        }
+
+        // Try to call the callback
+        if ( is_callable( $params['callback'] ) ) {
+
+                $object_dir = $cover_image_object['component'];
+
+                if ( 'xprofile' === $object_dir ) {
+                        $object_dir = 'members';
+                }
+
+                $cover_image = bp_attachments_get_attachment( 'url', array(
+                        'object_dir' => $object_dir,
+                        'item_id'    => $cover_image_object['object']->id,
+                ) );
+
+                if ( empty( $cover_image ) ) {
+                        if ( ! empty( $params['default_cover'] ) ) {
+                                $cover_image = $params['default_cover'];
+                        }
+                }
+
+                $inline_css = call_user_func_array( $params['callback'], array( array(
+                        'cover_image' => esc_url( $cover_image ),
+                        'component'   => sanitize_key( $cover_image_object['component'] ),
+                        'object_id'   => (int) $cover_image_object['object']->id,
+                        'width'       => (int) $params['width'],
+                        'height'      => (int) $params['height'],
+                ) ) );
+
+                // Finally add the inline css to the handle
+                if ( ! empty( $inline_css ) ) {
+
+                        // Used to get the css when Ajax setting the cover image
+                        if ( true === $return ) {
+                                return array(
+                                        'css_rules' => '<style type="text/css">' . "\n" . $inline_css . "\n" . '</style>',
+                                        'handle'    => $params['theme_handle'],
+                                );
+                        }
+
+                        wp_add_inline_style( $params['theme_handle'], $inline_css );
+                } else {
+                        return false;
+                }
+        }
+}
+add_action( 'bp_enqueue_scripts', 'bp_add_cover_image_inline_css', 11 );
+
+/**
+ * Add the needed script and css for the BuddyPress modal
+ *
+ * @since 2.4.0
+ */
+function bp_add_modal() {
+        // Enqueue me just once per page, please.
+        if ( did_action( 'bp_modal_scripts_enqueued' ) ) {
+                return;
+        }
+
+        wp_enqueue_script( 'bp-modal' );
+        wp_enqueue_style ( 'bp-modal' );
+
+        /**
+         * Fires at the conclusion of bp_add_modal()
+         * to avoid the scripts to be loaded more than once.
+         *
+         * @since 2.4.0
+         */
+        do_action( 'bp_modal_scripts_enqueued' );
+}
+
+/**
+ * Enqueue scripts for the BuddyPress modal iframe
+ *
+ * @since  2.4.0
+ *
+ * @param  bool $is_admin  wether the context is wp-admin or not
+ */
+function bp_modal_enqueue_scripts( $is_admin = false ) {
+        global $wp_filter;
+
+        // Leave themes register their stylesheet
+        $theme = get_template();
+        if ( empty( $theme ) ) {
+                $theme = get_stylesheet();
+        }
+
+        // Only keep scripts enqueued hooking bp_enqueue_scripts.
+        if ( isset( $wp_filter[ 'wp_enqueue_scripts' ] ) ) {
+                foreach ( $wp_filter[ 'wp_enqueue_scripts' ] as $priority => $actions ) {
+
+                        foreach ( $actions as $key => $actions_data ) {
+                                if ( 'bp_enqueue_scripts' !== $key && ! ( false !== strpos( $key, $theme ) && ! $is_admin ) ) {
+                                        unset( $wp_filter[ 'wp_enqueue_scripts' ][ $priority ][ $key ] );
+                                }
+                        }
+                }
+        }
+
+        return wp_enqueue_scripts();
+}
+add_action( 'bp_modal_header', 'bp_modal_enqueue_scripts',  1 );
+add_action( 'bp_modal_header', 'locale_stylesheet'            );
+add_action( 'bp_modal_header', 'wp_print_styles',           8 );
+add_action( 'bp_modal_header', 'wp_print_head_scripts',     9 );
+add_action( 'bp_modal_footer', 'wp_print_footer_scripts',  20 );
+
+/* Admin context */
+add_action( 'bp_admin_modal_header', 'bp_modal_enqueue_scripts',     1 );
+add_action( 'bp_admin_modal_header', 'register_admin_color_schemes', 2 );
+add_action( 'bp_admin_modal_header', 'print_admin_styles',           3 );
+add_action( 'bp_admin_modal_footer', '_wp_footer_scripts'              );

src/bp-core/bp-core-dependency.php

@@ -383 +383 @@
 }
 
 /**
+ * Fire the 'bp_modal_header' action, or the 'bp_admin_modal_header' in the modal was opened from
+ * an Administration screen.
+ *
+ * @since 2.4.0
+ */
+function bp_modal_header( $is_admin = false ) {
+        $action = 'bp_modal_header';
+
+        if ( true === (bool) $is_admin ) {
+                $action = 'bp_admin_modal_header';
+        }
+
+        /**
+         * Fires inside the 'bp_modal_header' function.
+         *
+         * @since 2.4.0
+         *
+         * @param  bool $is_admin True for a wp-admin context, false otherwise
+         */
+        do_action( $action, $is_admin );
+}
+
+/**
+ * Fire the 'bp_modal_footer' action, or the 'bp_admin_modal_footer' in the modal was opened from
+ * an Administration screen.
+ *
+ * @since 2.4.0
+ */
+function bp_modal_footer( $is_admin = false ) {
+        $action = 'bp_modal_footer';
+
+        if ( true === (bool) $is_admin ) {
+                $action = 'bp_admin_modal_footer';
+        }
+
+        /**
+         * Fires inside the 'bp_modal_footer' function.
+         *
+         * @since 2.4.0
+         *
+         * @param  bool $is_admin True for a wp-admin context, false otherwise
+         */
+        do_action( $action, $is_admin );
+}
+
+/**
  * Fire the 'bp_add_rewrite_tag' action, where BP adds its custom rewrite tags.
  *
  * @since BuddyPress (1.8.0)

src/bp-core/bp-core-functions.php

@@ -1987 +1987 @@
 }
 
 /**
+ * Set a BuddyPress modal
+ *
+ * @since  2.4.0
+ *
+ * @param  bool $set whether the current screen is a modal (True) or not (False)
+ */
+function bp_set_is_modal( $set = false ) {
+        buddypress()->core->is_modal = $set;
+}
+
+/**
  * Trigger a 404.
  *
  * @since BuddyPress (1.5.0)

src/bp-core/bp-core-options.php

@@ -24 +24 @@
 
                 /** Components ********************************************************/
 
-                'bp-deactivated-components'       => array(),
+                'bp-deactivated-components'            => array(),
 
                 /** bbPress ***********************************************************/
 
                 // Legacy bbPress config location
-                'bb-config-location'              => ABSPATH . 'bb-config.php',
+                'bb-config-location'                   => ABSPATH . 'bb-config.php',
 
                 /** XProfile **********************************************************/
 
                 // Base profile groups name
-                'bp-xprofile-base-group-name'     => 'Base',
+                'bp-xprofile-base-group-name'          => 'Base',
 
                 // Base fullname field name
-                'bp-xprofile-fullname-field-name' => 'Name',
+                'bp-xprofile-fullname-field-name'      => 'Name',
 
                 /** Blogs *************************************************************/
 
                 // Used to decide if blogs need indexing
-                'bp-blogs-first-install'          => false,
+                'bp-blogs-first-install'               => false,
 
                 /** Settings **********************************************************/
 
                 // Disable the WP to BP profile sync
-                'bp-disable-profile-sync'         => false,
+                'bp-disable-profile-sync'              => false,
 
                 // Hide the Toolbar for logged out users
-                'hide-loggedout-adminbar'         => false,
+                'hide-loggedout-adminbar'              => false,
 
                 // Avatar uploads
-                'bp-disable-avatar-uploads'       => false,
+                'bp-disable-avatar-uploads'            => false,
+
+                // Cover image uploads
+                'bp-disable-cover-image-uploads'       => false,
 
                 // Group Profile Photos
-                'bp-disable-group-avatar-uploads' => false,
+                'bp-disable-group-avatar-uploads'      => false,
+
+                // Group Cover image uploads
+                'bp-disable-group-cover-image-uploads' => false,
 
                 // Allow users to delete their own accounts
-                'bp-disable-account-deletion'     => false,
+                'bp-disable-account-deletion'          => false,
 
                 // Allow comments on blog and forum activity items
-                'bp-disable-blogforum-comments'   => true,
+                'bp-disable-blogforum-comments'        => true,
 
                 // The ID for the current theme package.
-                '_bp_theme_package_id'            => 'legacy',
+                '_bp_theme_package_id'                 => 'legacy',
 
                 /** Groups ************************************************************/
 
                 // @todo Move this into the groups component
 
                 // Restrict group creation to super admins
-                'bp_restrict_group_creation'      => false,
+                'bp_restrict_group_creation'           => false,
 
                 /** Akismet ***********************************************************/
 
                 // Users from all sites can post
-                '_bp_enable_akismet'              => true,
+                '_bp_enable_akismet'                   => true,
 
                 /** Activity HeartBeat ************************************************/
 
                 // HeartBeat is on to refresh activities
-                '_bp_enable_heartbeat_refresh'    => true,
+                '_bp_enable_heartbeat_refresh'         => true,
 
                 /** BuddyBar **********************************************************/
 
                 // Force the BuddyBar
-                '_bp_force_buddybar'              => false,
+                '_bp_force_buddybar'                   => false,
 
                 /** Legacy theme *********************************************/
 
                 // Whether to register the bp-default themes directory
-                '_bp_retain_bp_default'           => false,
+                '_bp_retain_bp_default'                => false,
 
                 /** Widgets **************************************************/
                 'widget_bp_core_login_widget'                => false,
@@ -597 +603 @@
 }
 
 /**
+ * Are members able to upload their own cover images?
+ *
+ * @since 2.4.0
+ *
+ * @uses bp_get_option() To get the cover image uploads option.
+ *
+ * @param bool $default Optional. Fallback value if not found in the database.
+ *                      Default: false.
+ *
+ * @return bool True if cover image uploads are disabled, otherwise false.
+ */
+function bp_disable_cover_image_uploads( $default = false ) {
+
+        /**
+         * Filters whether or not members are able to upload their own cover images.
+         *
+         * @since 2.4.0
+         *
+         * @param bool $value Whether or not members are able to upload their own cover images.
+         */
+        return (bool) apply_filters( 'bp_disable_cover_image_uploads', (bool) bp_get_option( 'bp-disable-cover-image-uploads', $default ) );
+}
+
+/**
  * Are group avatars disabled?
  *
  * For backward compatibility, this option falls back on the value of 'bp-disable-avatar-uploads' when no value is
@@ -632 +662 @@
 }
 
 /**
+ * Are group cover images disabled?
+ *
+ * @since 2.4.0
+ *
+ * @uses bp_get_option() To get the group cover image uploads option.
+ *
+ * @param bool $default Optional. Fallback value if not found in the database.
+ *                      Default: false.
+ *
+ * @return bool True if group cover image uploads are disabled, otherwise false.
+ */
+function bp_disable_group_cover_image_uploads( $default = false ) {
+
+        /**
+         * Filters whether or not members are able to upload group cover images.
+         *
+         * @since 2.4.0
+         *
+         * @param bool $value Whether or not members are able to upload thier groups cover images.
+         */
+        return (bool) apply_filters( 'bp_disable_group_cover_image_uploads', (bool) bp_get_option( 'bp-disable-group-cover-image-uploads', $default ) );
+}
+
+/**
  * Are members able to delete their own accounts?
  *
  * @since BuddyPress (1.6.0)

src/bp-core/bp-core-template.php

@@ -1934 +1934 @@
 
                 // Is feature active?
                 if ( ! empty( $feature ) ) {
+                        // The xProfile component is specific
+                        if ( 'xprofile' === $component ) {
+                                $component = 'profile';
+                        }
+
                         if ( empty( buddypress()->$component->features ) || false === in_array( $feature, buddypress()->$component->features, true ) ) {
                                 $retval = false;
                         }
@@ -2247 +2252 @@
 }
 
 /**
+ * Is the current page the a user's change cover image profile page?
+ *
+ * Eg http://example.com/members/joe/profile/change-cover-image/ (or a subpage thereof).
+ *
+ * @since  2.4.0
+ *
+ * @return True if the current page is a user's profile edit cover image page.
+ */
+function bp_is_user_change_cover_image() {
+        return (bool) ( bp_is_profile_component() && bp_is_current_action( 'change-cover-image' ) );
+}
+
+/**
  * Is this a user's forums page?
  *
  * Eg http://example.com/members/joe/forums/ (or a subpage thereof).
@@ -2747 +2765 @@
 }
 
 /**
+ * Is the current page the BuddyPress modal?
+ *
+ * Eg http://example.com/members/foobar/bp-modal.
+ *
+ * @return bool True if the current page is the BuddyPress modal.
+ */
+function bp_is_modal() {
+        $retval = false;
+        $bp = buddypress();
+
+        if ( isset( $bp->core->is_modal ) ) {
+                $retval = (bool) $bp->core->is_modal;
+        }
+
+        return $retval;
+}
+
+/**
  * Customize the body class, according to the currently displayed BP content.
  */
 function bp_the_body_class() {
@@ -3334 +3370 @@
                 return $nav_menu;
         }
 }
+
+/**
+ * Output a modal link
+ *
+ * @since  2.4.0
+ *
+ * @param  array  $args the attributes of the BuddyPress modal
+ */
+function bp_modal_link( $args = array() ) {
+        echo bp_get_modal_link( $args );
+}
+
+        /**
+         * Get a modal link
+         *
+         * @since  2.4.0
+         *
+         * @param  array  $args {
+         *     An array of arguments.
+         *
+         *     @type int    $item_id      The ID of the item. Default: current user_id. Required.
+         *     @type string $object       The type of object (eg: user, group..). Default:user. Required.
+         *     @type string $width        The width of the modal. Default:600. Optionnal.
+         *     @type string $height       The height of the modal. Default:500. Optionnal.
+         *     @type string $modal_title  The title tag for the generated iframe on link click. Default: ''. Optionnal.
+         *     @type string $modal_action The name of the action that will be executed by the modal. Default: ''.Required.
+         *     @type array  $link_class   The list of class to add to the generated link. Default: empty array. Optionnal.
+         *     @type string $link_title   The title attribute of the link. Default: 'Open window'. Optionnal.
+         *     @type string $link_text    The text of the link. Default: 'Open window'. Optionnal.
+         *     @type bool   $html         Whether to return an <a> HTML element, vs a raw URL
+         *                                to a modal link. If false, <a>-specific arguments (like 'link_class')
+         *                                will be ignored. Default: true.
+         * }
+         * @return string the html to link to the modal
+         */
+        function bp_get_modal_link( $args = array() ) {
+                $r = bp_parse_args( $args, array(
+                        'item_id'      => bp_loggedin_user_id(),
+                        'object'       => 'user',
+                        'width'        => 600,
+                        'height'       => 500,
+                        'modal_title'  => '',
+                        'modal_action' => '',
+                        'link_title'   => array(),
+                        'link_title'   => '',
+                        'link_text'    => __( 'Open window', 'buddypress' ),
+                        'html'         => true,
+                ) );
+
+                if ( empty( $r['item_id'] ) || empty( $r['object'] ) || empty( $r['modal_action'] ) ) {
+                        return;
+                }
+
+                if ( empty( $r['link_title'] ) ) {
+                        $r['link_title'] = $r['link_text'];
+                }
+
+                // Add BuddyPress modal
+                bp_add_modal();
+
+                $query_args = array(
+                        'is_admin'  => 0,
+                        'title'     => $r['modal_title'],
+                        'action'    => $r['modal_action'],
+                        'TB_iframe' => true,
+                        'width'     => $r['width'],
+                        'height'    => $r['height'],
+                );
+
+                if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
+                        $query_args['is_admin'] = 1;
+                }
+
+                if ( 'group' === $r['object'] ) {
+                        if ( is_a( $r['item_id'], 'BP_Groups_Group' ) ) {
+                                $group = $r['item_id'];
+                        } else {
+                                $group = groups_get_group( array( 'group_id' => $r['item_id'] ) );
+                        }
+
+                        $group_link = bp_get_group_permalink( $group );
+
+                        if ( empty( $group_link ) ) {
+                                return;
+                        }
+
+                        if ( 'group-avatar' === $r['modal_action'] || 'group-cover-image' === $r['modal_action'] ) {
+                                $group_link = trailingslashit( $group_link . 'admin' );
+                        }
+
+                        $modal_link = add_query_arg( $query_args, trailingslashit( $group_link . 'bp-modal' ) );
+
+                } elseif ( 'user' === $r['object'] ) {
+                        $user_link = bp_core_get_user_domain( $r['item_id'] );
+
+                        if ( empty( $user_link ) ) {
+                                return;
+                        }
+
+                        if ( 'change-avatar' === $r['modal_action'] || 'change-cover-image' === $r['modal_action'] ) {
+                                $user_link = trailingslashit( $user_link . 'profile' );
+                        }
+
+                        $modal_link = add_query_arg( $query_args, trailingslashit( $user_link . 'bp-modal' ) );
+
+                } else {
+                        return;
+                }
+
+                if ( ! $r['html'] ) {
+                        /**
+                         * Filter here to edit the modal link
+                         *
+                         * @since  2.4.0
+                         *
+                         * @param  string $value the modal link
+                         * @param  array  $r     the modal link parameter
+                         */
+                        return apply_filters( 'bp_get_modal_link', $modal_link, $r );
+                } else {
+                        /**
+                         * Filter here to edit the modal link
+                         *
+                         * @since  2.4.0
+                         *
+                         * @param  string $value the modal link
+                         * @param  array  $r     the modal link parameter
+                         */
+                        return apply_filters( 'bp_get_modal_html_link', sprintf( '<a href="%1$s" class="bp-thickbox %2$s" title="%3$s">%4$s</a>',
+                                esc_url( $modal_link ),
+                                esc_attr( join( ' ', (array) $r['link_class'] ) ),
+                                esc_attr( $r['link_title'] ),
+                                esc_html( $r['link_text'] )
+                        ), $r );
+                }
+        }
+
+/**
+ * Output the modal iframe title tag
+ *
+ * @since  2.4.0
+ */
+function bp_modal_title() {
+        echo bp_modal_get_title();
+}
+
+        /**
+         * Get the modale iframe title tag
+         *
+         * @since  2.4.0
+         *
+         * @return string the title tag for the modal iframe
+         */
+        function bp_modal_get_title() {
+                $title = _x( 'BuddyPress modal', 'BuddyPress' );
+
+                if ( isset( $_GET['title'] ) ) {
+                        $title = $_GET['title'];
+                }
+
+                return apply_filters( 'bp_modal_title', esc_html( strip_tags( $title ) ), $title );
+        }
+
+/**
+ * Output the modal content
+ *
+ * @since  2.4.0
+ */
+function bp_modal_content() {
+        $action = 'bp_modal_content';
+
+        if ( isset( $_GET['action'] ) ) {
+                $action .= '_' .sanitize_file_name( $_GET['action'] );
+        }
+
+        /**
+         * This is a dynamic action depending on the $modal_action
+         * defined in bp_get_modal_link.
+         *
+         * @since  2.4.0
+         *
+         * eg: "bp_modal_content_$modal_action"
+         */
+        do_action( $action );
+}

src/bp-core/bp-core-theme-compatibility.php

@@ -437 +437 @@
 }
 
 /**
+ * Set a theme compat feature
+ *
+ * @since 2.4.0
+ *
+ * @param  string $theme_id the theme id (eg: legacy)
+ * @param  array  $feature  an associative array (eg: array( name => 'feature_name', 'settings' => array() ))
+ */
+function bp_set_theme_compat_feature( $theme_id, $feature = array() ) {
+        if ( empty( $theme_id ) || empty( $feature['name'] ) ) {
+                return;
+        }
+
+        // Get BuddyPress instance
+        $bp = buddypress();
+
+        // Get current theme compat theme
+        $theme_compat_theme = $bp->theme_compat->theme;
+
+        // Bail if theme is not in use
+        if ( $theme_id !== $theme_compat_theme->id ) {
+                return;
+        }
+
+        $features = $theme_compat_theme->__get( 'features' );
+        if ( empty( $features ) ) {
+                $features = array();
+        }
+
+        // Bail if the feature is already registered or no settings were provided
+        if ( isset( $features[ $feature['name'] ] ) || empty( $feature['settings'] ) ) {
+                return;
+        }
+
+        // Add the feature
+        $features[ $feature['name'] ] = (object) $feature['settings'];
+
+        // The feature is attached to components
+        if ( isset( $features[ $feature['name'] ]->components ) ) {
+                // Set the feature for each concerned component
+                foreach ( (array) $features[ $feature['name'] ]->components as $component ) {
+                        // The xProfile component is specific
+                        if ( 'xprofile' === $component ) {
+                                $component = 'profile';
+                        }
+
+                        if ( isset( $bp->{$component} ) ) {
+                                if ( isset( $bp->{$component}->features ) ) {
+                                        $bp->{$component}->features[] = $feature['name'];
+                                } else {
+                                        $bp->{$component}->features = array( $feature['name'] );
+                                }
+                        }
+                }
+        }
+
+        // Finally update the theme compat features
+        $theme_compat_theme->__set( 'features', $features );
+}
+
+/**
+ * Get a theme compat feature
+ *
+ * @since 2.4.0
+ *
+ * @param  string $feature the feature (eg: cover_image)
+ * @return object          the feature settings.
+ */
+function bp_get_theme_compat_feature( $feature = '' ) {
+        // Get current theme compat theme
+        $theme_compat_theme = buddypress()->theme_compat->theme;
+
+        // Get features
+        $features = $theme_compat_theme->__get( 'features' );
+
+        if ( ! isset( $features[ $feature ] ) ) {
+                return false;
+        }
+
+        return $features[ $feature ];
+}
+
+/**
+ * Setup the theme's features
+ *
+ * Note: BP Legacy's buddypress-functions.php is not loaded in WP Administration
+ * as it's done using bp_locate_template()
+ *
+ * @since 2.4.0
+ *
+ * @global $content_width the content width of the theme
+ */
+function bp_register_theme_compat_default_features() {
+        global $content_width;
+
+        // If the current theme doesn't need theme compat, bail at this point.
+        if ( ! bp_use_theme_compat_with_current_theme() ) {
+                return $template;
+        }
+
+        // Get the theme
+        $current_theme = wp_get_theme();
+        $theme_handle  = $current_theme->get_stylesheet();
+        $parent        = $current_theme->parent();
+
+        if ( $parent ) {
+                $theme_handle = $parent->get_stylesheet();
+        }
+
+        /**
+         * Since Companion stylesheets, the $content_width is smaller
+         * than the width used by BuddyPress, so we need to manually set the
+         * content width for the concerned themes.
+         *
+         * array( stylesheet => content width used by BuddyPress )
+         */
+        $bp_content_widths = array(
+                'twentyfifteen'  => 1300,
+                'twentyfourteen' => 955,
+                'twentythirteen' => 890,
+        );
+
+        // Default values
+        $bp_content_width = (int) $content_width;
+        $bp_handle        = 'bp-legacy-css';
+
+        // Specific to themes having companion stylesheets
+        if ( isset( $bp_content_widths[ $theme_handle ] ) ) {
+                $bp_content_width = $bp_content_widths[ $theme_handle ];
+                $bp_handle        = 'bp-' . $theme_handle;
+        }
+
+        if ( is_rtl() ) {
+                $bp_handle .= '-rtl';
+        }
+
+        $top_offset    = 150;
+        $avatar_height = apply_filters( 'bp_core_avatar_full_height', $top_offset );
+
+        if ( $avatar_height > $top_offset ) {
+                $top_offset = $avatar_height;
+        }
+
+        bp_set_theme_compat_feature( 'legacy', array(
+                'name'     => 'cover_image',
+                'settings' => array(
+                        'components'   => array( 'xprofile', 'groups' ),
+                        'width'        => $bp_content_width,
+                        'height'       => $top_offset + round( $avatar_height / 2 ),
+                        'callback'     => 'bp_legacy_theme_cover_image',
+                        'theme_handle' => $bp_handle,
+                ),
+        ) );
+}
+
+/**
  * Check whether a given template is the one that WP originally selected to display current page.
  *
  * @since BuddyPress (1.7.0)

src/bp-core/classes/class-bp-attachment-cover-image.php

@@ +1 @@
+<?php
+/**
+ * Core Cover Image attachment class.
+ *
+ * @package BuddyPress
+ * @subpackage Core
+ */
+
+// Exit if accessed directly
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * BP Attachment Cover Image class.
+ *
+ * Extends BP Attachment to manage the cover images uploads.
+ *
+ * @since 2.4.0
+ */
+class BP_Attachment_Cover_Image extends BP_Attachment {
+        /**
+         * The constuctor
+         *
+         * @since 2.4.0
+         */
+        public function __construct() {
+                parent::__construct( array(
+                        'action'             => 'bp_cover_image_upload',
+                        'file_input'         => 'file',
+                        'base_dir'           => 'buddypress',
+                        'required_wp_files'  => array( 'file', 'image' ),
+
+                        /* @todo use a custom error, like we are doing for avatars */
+                        'allowed_mime_types' => array( 'jpg', 'png', 'gif' ),
+                ) );
+        }
+
+        /**
+         * Set the directory when uploading a file
+         *
+         * @since 2.4.0
+         *
+         * @return array upload data (path, url, basedir...)
+         */
+        public function upload_dir_filter() {
+                // Default values are for profiles
+                $object_id = bp_displayed_user_id();
+
+                if ( empty( $object_id ) ) {
+                        $object_id = bp_loggedin_user_id();
+                }
+
+                $object_directory = 'members';
+
+                // We're in a group, edit default values
+                if ( bp_is_group() || bp_is_group_create() ) {
+                        $object_id        = bp_get_current_group_id();
+                        $object_directory = 'groups';
+                }
+
+                // Set the subdir
+                $subdir  = '/' . $object_directory . '/' . $object_id . '/cover-image';
+
+                return apply_filters( 'bp_attachments_cover_image_upload_datas', array(
+                        'path'    => $this->upload_path . $subdir,
+                        'url'     => $this->url . $subdir,
+                        'subdir'  => $subdir,
+                        'basedir' => $this->upload_path,
+                        'baseurl' => $this->url,
+                        'error'   => false
+                ) );
+        }
+
+        /**
+         * Adjust the cover image to fit with advised width & height.
+         *
+         * @since 2.4.0
+         *
+         * @param string $file the absolute path to the file.
+         * @return mixed
+         */
+        public function fit( $file = '', $dimensions = array() ) {
+                if ( empty( $dimensions['width'] ) || empty( $dimensions['height'] ) ) {
+                        return false;
+                }
+
+                // Get image size
+                $size   = @getimagesize( $file );
+                $retval = false;
+
+                // Check image size and shrink if too large
+                if ( $size[0] > $dimensions['width'] || $size[1] > $dimensions['height'] ) {
+                        $editor = wp_get_image_editor( $file );
+
+                        if ( ! is_wp_error( $editor ) ) {
+                                $editor->set_quality( 100 );
+
+                                $resized = $editor->resize( $dimensions['width'], $dimensions['height'], true );
+                                if ( ! is_wp_error( $resized ) ) {
+                                        $cover   = $editor->save( $this->generate_filename( $file ) );
+                                } else {
+                                        $retval = $resized;
+                                }
+
+                                // Check for cover creation errors
+                                if ( ( false === $retval ) && is_wp_error( $cover ) ) {
+                                        $retval = $cover;
+                                }
+
+                                // Cover is good so proceed
+                                if ( false === $retval ) {
+                                        $retval = $cover;
+                                }
+
+                        } else {
+                                $retval = $editor;
+                        }
+                }
+
+                return $retval;
+        }
+
+        /**
+         * Generate a filename for the cover image
+         *
+         * @since 2.4.0
+         *
+         * @param  string $file the absolute path to the file.
+         * @return string       the absolute path to the new file name
+         */
+        public function generate_filename( $file = '' ) {
+                if ( empty( $file ) || ! file_exists( $file ) ) {
+                        return false;
+                }
+
+                $info    = pathinfo( $file );
+                $dir     = $info['dirname'];
+                $ext     = strtolower( $info['extension'] );
+                $name    = wp_hash( $file . time() ) . '-bp-cover-image';
+
+                return trailingslashit( $dir ) . "{$name}.{$ext}";
+        }
+
+        /**
+         * Build script datas for the Uploader UI
+         *
+         * @since 2.4.0
+         *
+         * @return array the javascript localization data
+         */
+        public function script_data() {
+                // Get default script data
+                $script_data = parent::script_data();
+
+                if ( bp_is_user() ) {
+                        $item_id = bp_displayed_user_id();
+
+                        $script_data['bp_params'] = array(
+                                'object'          => 'user',
+                                'item_id'         => $item_id,
+                                'has_cover_image' => bp_attachments_get_user_has_cover_image( $item_id ),
+                                'nonces'  => array(
+                                        'remove' => wp_create_nonce( 'bp_delete_cover_image' ),
+                                ),
+                        );
+
+                        // Set feedback messages
+                        $script_data['feedback_messages'] = array(
+                                1 => __( 'Your new cover image was uploaded successfully.', 'buddypress' ),
+                                2 => __( 'There was a problem deleting your cover image. Please try again.', 'buddypress' ),
+                                3 => __( 'Your cover image was deleted successfully!', 'buddypress' ),
+                        );
+                } elseif ( bp_is_group() ) {
+                        $item_id = bp_get_current_group_id();
+
+                        $script_data['bp_params'] = array(
+                                'object'          => 'group',
+                                'item_id'         => bp_get_current_group_id(),
+                                'has_cover_image' => bp_attachments_get_group_has_cover_image( $item_id ),
+                                'nonces'  => array(
+                                        'remove' => wp_create_nonce( 'bp_delete_cover_image' ),
+                                ),
+                        );
+
+                        // Set feedback messages
+                        $script_data['feedback_messages'] = array(
+                                1 => __( 'The group cover image was uploaded successfully.', 'buddypress' ),
+                                2 => __( 'There was a problem deleting the group cover image. Please try again.', 'buddypress' ),
+                                3 => __( 'The group cover image was deleted successfully!', 'buddypress' ),
+                        );
+                } else {
+                        /**
+                         * Use this filter to include specific BuddyPress params for your object.
+                         * e.g. Cover image for blogs single item.
+                         *
+                         * @since 2.4.0
+                         *
+                         * @param array $value The cover image specific BuddyPress parameters.
+                         */
+                        $script_data['bp_params'] = apply_filters( 'bp_attachment_cover_image_params', array() );
+                }
+
+                // Include our specific js & css
+                $script_data['extra_js']  = array( 'bp-cover-image' );
+                $script_data['extra_css'] = array( 'bp-avatar' );
+
+                return apply_filters( 'bp_attachments_cover_image_script_data', $script_data );
+        }
+}

src/bp-core/css/avatar.css

@@ -1 @@
-div.bp-avatar-status {
+div.bp-avatar-status,
+div.bp-cover-image-status {
         clear: both;
         margin: 1em 0;
 }
 
-div.bp-avatar-status p.updated {
+div.bp-avatar-status p.updated,
+div.bp-cover-image-status p.updated {
         display: block;
         padding: 10px 15px;
 }
 
-div.bp-avatar-status p.success {
+div.bp-avatar-status p.success,
+div.bp-cover-image-status p.success {
         background-color: #efc;
         border: 1px solid #591;
         color: #250;
 }
 
-div.bp-avatar-status p.error {
+div.bp-avatar-status p.error,
+div.bp-cover-image-status p.error {
         background-color: #fdc;
         border: 1px solid #a00;
         color: #800;
 }
 
-div.bp-avatar-status .bp-progress {
+div.bp-avatar-status .bp-progress,
+div.bp-cover-image-status .bp-progress {
         background: none;
         border: 1px solid #d1d1d1;
         float: right;
@@ -33 +38 @@
         width: 200px;
 }
 
-div.bp-avatar-status .bp-bar {
+div.bp-avatar-status .bp-bar,
+div.bp-cover-image-status .bp-bar {
         background-color: #c3ff88;
         width: 0;
         height: 100%;

src/bp-core/css/modal.css

@@ +1 @@
+body.bp-modal #TB_title {
+        float: left;
+        height: 1px;
+}
+
+body.bp-modal #TB_ajaxWindowTitle {
+        display: none;
+}
+
+body.bp-modal #TB_window {
+        max-width: 90%;
+        max-height: 90%;
+}
+
+body.bp-modal .tb-close-icon,
+#bp-modal-buttons .bp-full-height-icon {
+        left: auto;
+        right: -30px;
+        color: #eee;
+        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+        transition: color .1s ease-in-out, background .1s ease-in-out;
+}
+
+body.bp-modal #TB_closeWindowButton:focus,
+body.bp-modal #TB_closeWindowButton:focus .tb-close-icon,
+body.bp-modal .tb-close-icon:focus,
+body.bp-modal .tb-close-icon:hover,
+#bp-modal-buttons #bp-modal-full-height:focus,
+#bp-modal-buttons #bp-modal-full-height:focus .bp-full-height-icon,
+#bp-modal-buttons .bp-full-height-icon:focus,
+#bp-modal-buttons .bp-full-height-icon:hover {
+        color: #00a0d2;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+
+body.buddypress .tb-close-icon:before,
+body.toplevel_page_bp-groups .tb-close-icon:before {
+        content: "\f335";
+        font-size: 32px;
+}
+
+#bp-modal-buttons .bp-full-height-icon {
+        position:absolute;
+        top:30px;
+        text-align: center;
+        line-height: 29px;
+        width: 29px;
+        height: 29px;
+}
+
+#bp-modal-buttons .bp-full-height-icon:before {
+        font: normal 20px/32px 'dashicons';
+        speak: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+
+#bp-modal-buttons .bp-full-height-icon:before {
+        content: "\f316";
+}
+
+#bp-modal-buttons .bp-full-height-icon.max:before {
+        content: "\f317";
+}
+
+body.bp-modal #TB_iframeContent {
+        margin:0;
+        max-width: 100%;
+        max-height: 100%;
+}

src/bp-core/js/avatar.js

@@ -26 +26 @@
                         // Init some vars
                         this.views    = new Backbone.Collection();
                         this.jcropapi = {};
-                        this.warning = null;
+                        this.warning  = null;
+                        this.opener   = window.opener || window.parent || window.top;
 
                         // Set up nav
                         this.setupNav();
@@ -236 +237 @@
                                 type:          _.isUndefined( avatar.get( 'type' ) ) ? 'crop' : avatar.get( 'type' ),
                                 nonce:         avatar.get( 'nonces' ).set
                         } ).done( function( response ) {
-                                var avatarStatus = new bp.Views.AvatarStatus( {
-                                        value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
-                                        type : 'success'
-                                } );
+                                var avatarClass,
+                                    avatarStatus = new bp.Views.AvatarStatus( {
+                                                value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
+                                                type : 'success'
+                                        } );
 
                                 self.views.add( {
                                         id   : 'status',
@@ -248 +250 @@
 
                                 avatarStatus.inject( '.bp-avatar-status' );
 
+                                avatarClass = '.' + avatar.get( 'object' ) + '-' + response.item_id + '-avatar';
+
+                                // Update each avatars of the parent page
+                                if ( typeof self.opener.bp.updateAvatars !== 'undefined' ) {
+                                        self.opener.bp.updateAvatars( avatarClass, response.avatar );
+
                                 // Update each avatars of the page
-                                $( '.' + avatar.get( 'object' ) + '-' + response.item_id + '-avatar' ).each( function() {
-                                        $(this).prop( 'src', response.avatar );
-                                } );
+                                } else {
+                                        $( avatarClass ).each( function() {
+                                                $(this).prop( 'src', response.avatar );
+                                        } );
+                                }
 
                                 // Inject the Delete nav
                                 bp.Avatar.navItems.get( 'delete' ).set( { hide: 0 } );
@@ -312 +322 @@
                                 object:        model.get( 'object' ),
                                 nonce:         model.get( 'nonces' ).remove
                         } ).done( function( response ) {
-                                var avatarStatus = new bp.Views.AvatarStatus( {
-                                        value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
-                                        type : 'success'
-                                } );
+                                var avatarClass,
+                                        avatarStatus = new bp.Views.AvatarStatus( {
+                                                value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
+                                                type : 'success'
+                                        } );
 
                                 self.views.add( {
                                         id   : 'status',
@@ -324 +335 @@
 
                                 avatarStatus.inject( '.bp-avatar-status' );
 
+                                avatarClass = '.' + model.get( 'object' ) + '-' + response.item_id + '-avatar';
+
+                                // Update each avatars of the parent page
+                                if ( typeof self.opener.bp.updateAvatars !== 'undefined' ) {
+                                        self.opener.bp.updateAvatars( avatarClass, response.avatar );
+
                                 // Update each avatars of the page
-                                $( '.' + model.get( 'object' ) + '-' + response.item_id + '-avatar').each( function() {
-                                        $( this ).prop( 'src', response.avatar );
-                                } );
+                                } else {
+                                        $( avatarClass ).each( function() {
+                                                $( this ).prop( 'src', response.avatar );
+                                        } );
+                                }
 
                                  // Remove the Delete nav
                                  bp.Avatar.navItems.get( 'delete' ).set( { active: 0, hide: 1 } );

src/bp-core/js/cover-image.js

@@ +1 @@
+/* global bp, BP_Uploader, _, Backbone */
+
+window.bp = window.bp || {};
+
+( function( exports, $ ) {
+
+        // Bail if not set
+        if ( typeof BP_Uploader === 'undefined' ) {
+                return;
+        }
+
+        bp.Models      = bp.Models || {};
+        bp.Collections = bp.Collections || {};
+        bp.Views       = bp.Views || {};
+
+        bp.CoverImage = {
+                start: function() {
+
+                        // Init some vars
+                        this.views   = new Backbone.Collection();
+                        this.warning = null;
+                        this.opener  = window.opener || window.parent || window.top;
+
+                        // Set up views
+                        this.uploaderView();
+
+                        // Inform about the needed dimensions
+                        this.displayWarning( BP_Uploader.strings.cover_image_warnings.dimensions );
+
+                        // Set up the delete view if needed
+                        if ( true === BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image ) {
+                                this.deleteView();
+                        }
+                },
+
+                uploaderView: function() {
+                        // Listen to the Queued uploads
+                        bp.Uploader.filesQueue.on( 'add', this.uploadProgress, this );
+
+                        // Create the BuddyPress Uploader
+                        var uploader = new bp.Views.Uploader();
+
+                        // Add it to views
+                        this.views.add( { id: 'upload', view: uploader } );
+
+                        // Display it
+                        uploader.inject( '.bp-cover-image' );
+                },
+
+                uploadProgress: function() {
+                        // Create the Uploader status view
+                        var coverImageUploadProgress = new bp.Views.coverImageUploadProgress( { collection: bp.Uploader.filesQueue } );
+
+                        if ( ! _.isUndefined( this.views.get( 'status' ) ) ) {
+                                this.views.set( { id: 'status', view: coverImageUploadProgress } );
+                        } else {
+                                this.views.add( { id: 'status', view: coverImageUploadProgress } );
+                        }
+
+                        // Display it
+                        coverImageUploadProgress.inject( '.bp-cover-image-status' );
+                },
+
+                deleteView: function() {
+                        // Create the delete model
+                        var delete_model = new Backbone.Model( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params,
+                                'object',
+                                'item_id',
+                                'nonces'
+                        ) );
+
+                        // Do not add it if already there!
+                        if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) {
+                                return;
+                        }
+
+                        // Create the delete view
+                        var deleteView = new bp.Views.DeleteCoverImage( { model: delete_model } );
+
+                        // Add it to views
+                        this.views.add( { id: 'delete', view: deleteView } );
+
+                        // Display it
+                        deleteView.inject( '.bp-cover-image-manage' );
+                },
+
+                deleteCoverImage: function( model ) {
+                        var self = this,
+                                deleteView;
+
+                        // Remove the delete view
+                        if ( ! _.isUndefined( this.views.get( 'delete' ) ) ) {
+                                deleteView = this.views.get( 'delete' );
+                                deleteView.get( 'view' ).remove();
+                                this.views.remove( { id: 'delete', view: deleteView } );
+                        }
+
+                        // Remove the cover image !
+                        bp.ajax.post( 'bp_cover_image_delete', {
+                                json:          true,
+                                item_id:       model.get( 'item_id' ),
+                                object:        model.get( 'object' ),
+                                nonce:         model.get( 'nonces' ).remove
+                        } ).done( function( response ) {
+                                var coverImageStatus = new bp.Views.CoverImageStatus( {
+                                        value : BP_Uploader.strings.feedback_messages[ response.feedback_code ],
+                                        type : 'success'
+                                } );
+
+                                self.views.add( {
+                                        id   : 'status',
+                                        view : coverImageStatus
+                                } );
+
+                                coverImageStatus.inject( '.bp-cover-image-status' );
+
+                                // Reset the header of the parent page
+                                if ( typeof self.opener.bp.updateCoverImage !== 'undefined' ) {
+                                        self.opener.bp.updateCoverImage( response.reset_url );
+
+                                // Reset the header of the page
+                                } else {
+                                        $( '#header-cover-image' ).css( {
+                                                'background-image': 'url( ' + response.reset_url + ' )'
+                                        } );
+                                }
+
+                                // Reset the has_cover_image bp_param
+                                BP_Uploader.settings.defaults.multipart_params.bp_params.has_cover_image = false;
+
+                        } ).fail( function( response ) {
+                                var feedback = BP_Uploader.strings.default_error;
+                                if ( ! _.isUndefined( response ) ) {
+                                        feedback = BP_Uploader.strings.feedback_messages[ response.feedback_code ];
+                                }
+
+                                var coverImageStatus = new bp.Views.CoverImageStatus( {
+                                        value : feedback,
+                                        type : 'error'
+                                } );
+
+                                self.views.add( {
+                                        id   : 'status',
+                                        view : coverImageStatus
+                                } );
+
+                                coverImageStatus.inject( '.bp-cover-image-status' );
+
+                                // Put back the delete view
+                                bp.CoverImage.deleteView();
+                        } );
+                },
+
+                removeWarning: function() {
+                        if ( ! _.isNull( this.warning ) ) {
+                                this.warning.remove();
+                        }
+                },
+
+                displayWarning: function( message ) {
+                        this.removeWarning();
+
+                        this.warning = new bp.Views.uploaderWarning( {
+                                value: message
+                        } );
+
+                        this.warning.inject( '.bp-cover-image-status' );
+                }
+        };
+
+        // Custom Uploader Files view
+        bp.Views.coverImageUploadProgress = bp.Views.uploaderStatus.extend( {
+                className: 'files',
+
+                initialize: function() {
+                        bp.Views.uploaderStatus.prototype.initialize.apply( this, arguments );
+
+                        this.collection.on( 'change:url', this.uploadResult, this );
+                },
+
+                uploadResult: function( model ) {
+                        var message, type, cover = {};
+
+                        if ( ! _.isUndefined( model.get( 'url' ) ) ) {
+
+                                // Image is too small
+                                if ( 0 === model.get( 'feedback_code' ) ) {
+                                        message = BP_Uploader.strings.cover_image_warnings.dimensions;
+                                        type    = 'warning';
+
+                                // Success, Rock n roll!
+                                } else {
+                                        message = BP_Uploader.strings.feedback_messages[ model.get( 'feedback_code' ) ];
+                                        type = 'success';
+                                }
+
+                                this.views.set( '.bp-uploader-progress', new bp.Views.CoverImageStatus( {
+                                        value : message,
+                                        type  : type
+                                } ) );
+
+                                // Update the header of the parent page
+                                if ( typeof bp.CoverImage.opener.bp.updateCoverImage !== 'undefined' ) {
+                                        bp.CoverImage.opener.bp.updateCoverImage( model.get( 'url' ) );
+
+                                // Update the header of the page
+                                } else {
+                                        $( '#header-cover-image' ).css( {
+                                                'background-image': 'url( ' + model.get( 'url' ) + ' )'
+                                        } );
+                                }
+
+                                // Add the delete view
+                                bp.CoverImage.deleteView();
+                        }
+                }
+        } );
+
+        // BuddyPress Cover Image Feedback view
+        bp.Views.CoverImageStatus = bp.View.extend( {
+                tagName: 'p',
+                className: 'updated',
+                id: 'bp-cover-image-feedback',
+
+                initialize: function() {
+                        this.el.className += ' ' + this.options.type;
+                        this.value = this.options.value;
+                },
+
+                render: function() {
+                        this.$el.html( this.value );
+                        return this;
+                }
+        } );
+
+        // BuddyPress Cover Image Delete view
+        bp.Views.DeleteCoverImage = bp.View.extend( {
+                tagName: 'div',
+                id: 'bp-delete-cover-image-container',
+                template: bp.template( 'bp-cover-image-delete' ),
+
+                events: {
+                        'click #bp-delete-cover-image': 'deleteCoverImage'
+                },
+
+                deleteCoverImage: function( event ) {
+                        event.preventDefault();
+
+                        bp.CoverImage.deleteCoverImage( this.model );
+                }
+        } );
+
+        bp.CoverImage.start();
+
+})( bp, jQuery );

src/bp-core/js/modal.js

@@ +1 @@
+/* global bp */
+
+window.bp = window.bp || {};
+
+( function( $ ) {
+        var originalWidth, originalHeight, originalIframeHeight;
+
+        // Asjust Thickbox
+        bp_tb_position = function() {
+                var availableWidth  = $( window ).width(),
+                        availableHeight = $( window ).height(),
+                        needReposition  = false;
+
+                // Don't do anything if we don't have needed Thickbox attributes
+                if ( typeof TB_WIDTH === 'undefined' || typeof TB_HEIGHT === 'undefined' || typeof tb_position === 'undefined' ) {
+                        return;
+                }
+
+                // Only set originalWidth and originalHeight if not defined
+                if ( typeof originalWidth === 'undefined' ) {
+                        originalWidth = TB_WIDTH;
+                }
+
+                if ( typeof originalHeight === 'undefined' ) {
+                        originalHeight = TB_HEIGHT;
+                }
+
+                if ( availableWidth < TB_WIDTH ) {
+                        TB_WIDTH = availableWidth - 50;
+                        needReposition = true;
+                } else if ( availableWidth > originalWidth ) {
+                        TB_WIDTH = originalWidth;
+                        needReposition = true;
+                }
+
+                if ( availableHeight < TB_HEIGHT ) {
+                        TB_HEIGHT = availableHeight - 50;
+                        needReposition = true;
+                } else if ( availableHeight > originalHeight ) {
+                        TB_HEIGHT = originalHeight;
+                        needReposition = true;
+                }
+
+                // Ask Thickbox to "reposition"
+                if ( true === needReposition ) {
+                        tb_position();
+
+                        $( '#TB_window' ).css( {
+                                'height' : TB_HEIGHT + 'px'
+                        } );
+
+                        $( '#TB_iframeContent' ).css( {
+                                'width' : originalWidth - 1 + 'px',
+                                'height' : TB_HEIGHT - 1 + 'px'
+                        } );
+                }
+        };
+
+        // Make sure links are not containing bigger dimensions than available ones
+        $( 'a.bp-thickbox' ).each( function() {
+                var href = $( this ).attr( 'href' ),
+                        availableWidth  = $( window ).width(),
+                        availableHeight = $( window ).height();
+
+                if ( ! href ) {
+                        return;
+                }
+
+                // Requested Thickbox width & height
+                var tb_width  = href.match( /width=([0-9]+)/ );
+                var tb_height = href.match( /height=([0-9]+)/ );
+
+                if ( tb_width[1] ) {
+                        // If too large resize
+                        if ( parseInt( tb_width[1] ) > availableWidth ) {
+                                href = href.replace( /width=[0-9]+/g, 'width=' + Number( availableWidth - 50 ) );
+
+                        // Leave unchanged
+                        } else {
+                                href = href.replace( /width=[0-9]+/g, 'width=' + tb_width[1] );
+                        }
+                }
+
+                if ( tb_height[1] ) {
+                        // If too large resize
+                        if ( parseInt( tb_height[1] ) > availableHeight ) {
+                                href = href.replace( /height=[0-9]+/g, 'height=' + Number( availableHeight - 50 ) );
+
+                        // Leave unchanged
+                        } else {
+                                href = href.replace( /height=[0-9]+/g, 'height=' + tb_height[1] );
+                        }
+                }
+
+                // Reset links
+                $( this ).attr( 'href', href );
+        } );
+
+        // Listen to bp-thickbox links
+        $( document ).ready( function() {
+                tb_init( 'a.bp-thickbox' );
+                $( 'body' ).addClass( 'bp-modal' );
+        } );
+
+        // Add a button to the BuddyPress modal
+        window.tb_showIframe = function() {
+                var isBPiframe = $( '#TB_iframeContent' ).prop( 'src' ).match( /bp-modal/ );
+
+                if ( null === isBPiframe ) {
+                        return;
+                }
+
+                $( '#TB_title' ).append( '<div id="bp-modal-buttons"><a href="#" id="bp-modal-full-height"><span class="screen-reader-text">Zoom</span><div class="bp-full-height-icon"></div></a>' );
+        };
+
+        // Toggle the BuddyPress modal height from original to full
+        $( 'body' ).on( 'click', '#bp-modal-buttons .bp-full-height-icon', function( event ) {
+                event.preventDefault();
+
+                var bpFullHeighBtn = $( this );
+
+                bp_tb_position();
+
+                if ( typeof originalIframeHeight === 'undefined' ) {
+                        originalIframeHeight = $( '#TB_iframeContent' ).prop( 'style' ).height;
+                }
+
+                if ( ! bpFullHeighBtn.hasClass( 'max' ) ) {
+                        TB_HEIGHT = $( window ).height() - 50;
+                        bpFullHeighBtn.addClass( 'max' );
+                } else {
+                        TB_HEIGHT = originalIframeHeight;
+                        bpFullHeighBtn.removeClass( 'max' );
+                }
+
+                // Reposition
+                tb_position();
+
+                $( '#TB_window' ).css( {
+                        'height' : TB_HEIGHT + 'px'
+                } );
+
+                $( '#TB_iframeContent' ).css( {
+                        'width' : originalWidth - 1 + 'px',
+                        'height' : TB_HEIGHT - 1 + 'px'
+                } );
+        } );
+
+        // Reposition on window resize
+        $( window ).resize( function() { bp_tb_position(); } );
+
+        /**
+         * Update the avatars for a given class
+         *
+         * @param  {string} avatarClass the name of the class
+         * @param  {string} replace     the link to the avatar
+         */
+        bp.updateAvatars = function( avatarClass, replace ) {
+                $( avatarClass ).each( function() {
+                        $(this).prop( 'src', replace );
+                } );
+        };
+
+        /**
+         * Update the cover image
+         *
+         * @param  {string} cover_url The url of the cover image
+         */
+        bp.updateCoverImage = function( cover_url ) {
+                $( '#header-cover-image' ).css( {
+                        'background-image': 'url( ' + cover_url + ' ) '
+                } );
+
+                if ( $( '.bp-cover-image-preview' ).length ) {
+
+                        if ( ! cover_url ) {
+                                $( '.bp-cover-image-preview' ).addClass( 'hide' );
+                                $( '.bp-cover-image-preview' ).removeClass( 'thickbox' );
+                        } else {
+                                $( '.bp-cover-image-preview' ).addClass( 'thickbox' );
+                                $( '.bp-cover-image-preview' ).removeClass( 'hide' );
+                        }
+
+                        $( '.bp-cover-image-preview' ).prop( 'href', cover_url );
+                }
+        }
+
+        /**
+         * Insert/Update html inside a given selector
+         *
+         * @param  {string} selectorId the element ID
+         * @param  {string} html       the html to insert
+         */
+        bp.updateHtml = function( selectorId, html ) {
+                $( selectorId ).html( html );
+        };
+
+        /**
+         * Insert/Update an input value
+         * @param  {string} inputId the input ID
+         * @param  {string} val     the value to insert
+         */
+        bp.updateVal = function( inputId, val ) {
+                $( selectorId ).val( val );
+        };
+
+} )( jQuery );

src/bp-groups/admin/css/admin.css

@@ -84 +84 @@
         padding-left: 20px;
         padding-right: 20px;
 }
+
+div#bp_group_avatar div.avatar {
+        width: 150px;
+        margin: 0 auto;
+}
+
+div#bp_group_avatar div.avatar img {
+        max-width: 100%;
+        height: auto;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit,
+div#bp_group_cover_image a.bp-groups-cover-image-admin-edit,
+div#bp_group_cover_image a#bp-groups-cover-image-admin-preview {
+    display: block;
+    margin: 1em 0;
+    text-decoration: none;
+    color: #888;
+}
+
+div#bp_group_cover_image a.bp-groups-cover-image-admin-edit,
+div#bp_group_cover_image a#bp-groups-cover-image-admin-preview {
+        text-align: center;
+        display: inline-block;
+        margin-right: 5px;
+        font-size: 90%;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit:before,
+div#bp_group_cover_image a.bp-groups-cover-image-admin-edit:before,
+div#bp_group_cover_image a#bp-groups-cover-image-admin-preview:before {
+        font: normal 20px/1 'dashicons';
+        speak: none;
+        display: inline-block;
+        padding: 0 2px 0 0;
+        top: 0;
+        left: -1px;
+        position: relative;
+        vertical-align: top;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-decoration: none !important;
+        color: #888;
+}
+
+div#bp_group_avatar a.bp-groups-avatar-admin-edit:before,
+div#bp_group_cover_image a.bp-groups-cover-image-admin-edit:before {
+        content: "\f107";
+}
+
+div#bp_group_cover_image a#bp-groups-cover-image-admin-preview:before {
+        content: "\f179";
+}
+
+div#bp_group_cover_image a#bp-groups-cover-image-admin-preview.hide {
+        display:none;
+}

src/bp-groups/bp-groups-admin.php

@@ -133 +133 @@
                 add_meta_box( 'bp_group_add_members', _x( 'Add New Members', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_add_new_members', get_current_screen()->id, 'normal', 'core' );
                 add_meta_box( 'bp_group_members', _x( 'Manage Members', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_members', get_current_screen()->id, 'normal', 'core' );
 
+                // Manage Group's avatar
+                $disabled_avatar_uploads = (int) bp_disable_group_avatar_uploads();
+                if ( ! $disabled_avatar_uploads && buddypress()->avatar->show_avatars && bp_attachments_is_wp_version_supported() ) {
+                        add_meta_box( 'bp_group_avatar', _x( 'Photo', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_avatar', get_current_screen()->id, 'side', 'core' );
+                }
+
+                // Metabox to manage the group's cover image
+                if ( bp_group_use_cover_image_header() ) {
+                        add_meta_box( 'bp_group_cover_images', _x( 'Cover Image', 'group admin edit screen', 'buddypress' ), 'bp_groups_admin_edit_metabox_cover_image', get_current_screen()->id, 'side', 'core' );
+                }
+
                 /**
                  * Fires after the registration of all of the default group meta boxes.
                  *
@@ -798 +809 @@
 }
 
 /**
+ * Output the markup for a single group's Edit Avatar metabox.
+ *
+ * @since 2.4.0
+ */
+function bp_groups_admin_edit_metabox_avatar( $item ) {
+        ?>
+        <div class="avatar">
+
+                <?php
+                echo bp_core_fetch_avatar( array(
+                        'item_id' => $item->id,
+                        'object'  => 'group',
+                        'type'    => 'full',
+                        'title'   => $item->name
+                ) );
+
+                bp_modal_link( array(
+                        'item_id'       => $item,
+                        'object'        => 'group',
+                        'width'         => 800,
+                        'height'        => 400,
+                        'modal_title'   => __( 'Edit Group Photo', 'buddypress' ),
+                        'modal_action'  => 'group-avatar',
+                        'link_text'     => __( 'Edit Group Photo', 'buddypress' ),
+                        'link_class'    => array( 'bp-groups-avatar-admin-edit' ),
+                ) );
+                ?>
+
+        </div>
+        <?php
+}
+
+/**
+ * Output the markup for a single group's Edit cover image metabox.
+ *
+ * @since 2.4.0
+ */
+ function bp_groups_admin_edit_metabox_cover_image( $item ) {
+        $dimensions = bp_attachments_get_cover_image_dimensions( 'groups' );
+
+        $cover_src = bp_attachments_get_attachment( 'url', array(
+                'object_dir' => 'groups',
+                'item_id'    => $item->id,
+        ) );
+
+        printf( '
+                <style type="text/css">
+                        #header-cover-image {
+                                display: block;
+                                height: %1$spx;
+                                background: #c5c5c5 url( %2$s );
+                                background-position: center top;
+                                background-size: cover;
+                        }
+                </style>
+        ', $dimensions['height'], $cover_src );
+        ?>
+        <div id="bp_group_cover_image">
+
+                <div id="header-cover-image"></div>
+
+                <a id="bp-groups-cover-image-admin-preview" href="<?php echo esc_url( $cover_src ) ;?>" title="<?php esc_attr_e( 'Group Cover Image', 'budypress' ) ;?>" class="bp-cover-image-preview <?php echo ! empty( $cover_src ) ? 'thickbox' : 'hide' ;?>">
+                        <?php esc_html_e( 'View Cover Image', 'budypress' ) ;?>
+                </a>
+
+                <?php bp_modal_link( array(
+                        'item_id'       => $item,
+                        'object'        => 'group',
+                        'width'         => 800,
+                        'height'        => 400,
+                        'modal_title'   => __( 'Edit Cover Image', 'buddypress' ),
+                        'modal_action'  => 'group-cover-image',
+                        'link_text'     => __( 'Edit Cover Image', 'buddypress' ),
+                        'link_class'    => array( 'bp-groups-cover-image-admin-edit' ),
+                ) ); ?>
+
+        </div>
+        <?php
+}
+
+/**
  * Output the markup for a single group's Add New Members metabox.
  *
  * @since BuddyPress (1.7.0)

src/bp-groups/bp-groups-loader.php

@@ -313 +313 @@
                         );
                 }
 
+                if ( bp_group_use_cover_image_header() ) {
+                        $this->group_creation_steps['group-cover-image'] = array(
+                                'name'     => _x( 'Cover Image', 'Group screen nav', 'buddypress' ),
+                                'position' => 25
+                        );
+                }
+
                 // If friends component is active, add invitations
                 if ( bp_is_active( 'friends' ) ) {
                         $this->group_creation_steps['group-invites'] = array(
@@ -591 +598 @@
                                         ), $default_params );
                                 }
 
+                                if ( bp_group_use_cover_image_header() ) {
+                                        $sub_nav[] = array_merge( array(
+                                                'name'     => __( 'Cover Image', 'buddypress' ),
+                                                'slug'     => 'group-cover-image',
+                                                'position' => 25,
+                                        ), $default_params );
+                                }
+
                                 $sub_nav[] = array_merge( array(
                                         'name'     => __( 'Members', 'buddypress' ),
                                         'slug'     => 'manage-members',

src/bp-groups/bp-groups-screens.php

@@ -990 +990 @@
 add_action( 'bp_screens', 'groups_screen_group_admin_avatar' );
 
 /**
+ * Handle the display of a group's Change cover image page.
+ *
+ * @since 2.4.0
+ */
+function groups_screen_group_admin_cover_image() {
+        if ( 'group-cover-image' != bp_get_group_current_admin_tab() ) {
+                return false;
+        }
+
+        // If the logged-in user doesn't have permission or if cover image uploads are disabled, then stop here
+        if ( ! bp_is_item_admin() || bp_disable_group_avatar_uploads() ) {
+                return false;
+        }
+
+        /**
+         * Fires before the loading of the group Change cover image page template.
+         *
+         * @since 2.4.0
+         *
+         * @param int $id ID of the group that is being displayed.
+         */
+        do_action( 'groups_screen_group_admin_cover_image', bp_get_current_group_id() );
+
+        /**
+         * Filters the template to load for a group's Change cover image page.
+         *
+         * @since 2.4.0
+         *
+         * @param string $value Path to a group's Change cover image template.
+         */
+        bp_core_load_template( apply_filters( 'groups_template_group_admin_cover_image', 'groups/single/home' ) );
+}
+add_action( 'bp_screens', 'groups_screen_group_admin_cover_image' );
+
+/**
  * This function handles actions related to member management on the group admin.
  */
 function groups_screen_group_admin_manage_members() {
@@ -1308 +1343 @@
 add_action( 'bp_screens', 'groups_screen_group_admin_delete_group' );
 
 /**
+ * Handle the display for a group modal
+ *
+ * @since 2.4.0
+ */
+function groups_sreen_modal() {
+        $bp = buddypress();
+
+        if ( bp_is_group_admin_page() && 'bp-modal' === bp_action_variable( 0 ) ) {
+
+                if ( ! bp_is_item_admin() ) {
+                        return;
+                }
+
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->action_variables = array( sanitize_file_name( $_GET['action'] ) );
+                }
+
+                bp_set_is_modal( true );
+
+        } elseif ( 'bp-modal' === bp_current_action() ) {
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+        }
+
+        if ( bp_is_modal() ) {
+                bp_core_load_template( 'assets/modal' );
+        }
+}
+add_action( 'bp_screens', 'groups_sreen_modal', 0 );
+
+/**
  * Render the group settings fields on the Notification Settings page.
  */
 function groups_screen_notification_settings() {

src/bp-groups/bp-groups-template.php

@@ -998 +998 @@
                 ) );
         }
 
+/** Group cover image *********************************************************/
+
+/**
+ * Should we use the group's cover image header
+ *
+ * @since 2.4.0
+ *
+ * @return bool True if the displayed user has a cover image,
+ *              False otherwise
+ */
+function bp_group_use_cover_image_header() {
+        return (bool) bp_is_active( 'groups', 'cover_image' ) && ! bp_disable_group_cover_image_uploads() && bp_attachments_is_wp_version_supported();
+}
+
 /**
  * Output the 'last active' string for the current group in the loop.
  *
@@ -6260 +6274 @@
          */
         return apply_filters( 'bp_groups_get_profile_stats', $r['output'], $r );
 }
+
+/**
+ * Output the Edit avatar template part for the group modal
+ *
+ * @since 2.4.0
+ */
+function bp_groups_modal_manage_avatar() {
+        ?>
+        <h1><?php esc_html_e( 'Edit Group Profile Photo', 'buddypress' ); ?></h1>
+
+        <?php bp_attachments_get_template_part( 'avatars/index' );
+}
+add_action( 'bp_modal_content_group-avatar', 'bp_groups_modal_manage_avatar' );
+
+/**
+ * Output the Edit cover image template part for the group modal
+ *
+ * @since 2.4.0
+ */
+function bp_groups_modal_manage_cover_image() {
+        ?>
+        <h1><?php esc_html_e( 'Edit Group Cover Image', 'buddypress' ); ?></h1>
+
+        <?php bp_attachments_get_template_part( 'cover-images/index' );
+}
+add_action( 'bp_modal_content_group-cover-image', 'bp_groups_modal_manage_cover_image' );

src/bp-members/admin/css/admin.css

@@ -26 +26 @@
 div#community-profile-page li.bp-groups-profile-stats:before,
 div#community-profile-page li.bp-blogs-profile-stats:before,
 div#community-profile-page a.bp-xprofile-avatar-user-admin:before,
-div#community-profile-page a.bp-xprofile-avatar-user-edit:before {
+div#community-profile-page a.bp-xprofile-avatar-user-edit:before,
+div#community-profile-page a.bp-xprofile-cover-image-user-edit:before,
+div#community-profile-page a#bp-xprofile-cover-image-user-preview:before {
         font: normal 20px/1 'dashicons';
         speak: none;
         display: inline-block;
@@ -61 +63 @@
         content:"\f182";
 }
 
-div#community-profile-page a.bp-xprofile-avatar-user-edit:before {
+div#community-profile-page a.bp-xprofile-avatar-user-edit:before,
+div#community-profile-page a.bp-xprofile-cover-image-user-edit:before {
         content: "\f107";
 }
 
+div#community-profile-page a#bp-xprofile-cover-image-user-preview:before {
+        content: "\f179";
+}
+
 div#community-profile-page div#bp_xprofile_user_admin_avatar div.avatar {
         width:150px;
         margin:0 auto;
@@ -75 +82 @@
         height: auto;
 }
 
-div#community-profile-page div#bp_xprofile_user_admin_avatar a {
+div#community-profile-page div#bp_xprofile_user_admin_avatar a,
+div#community-profile-page a#bp-xprofile-cover-image-user-preview,
+div#community-profile-page a.bp-xprofile-cover-image-user-edit {
         display:block;
         margin:1em 0;
         text-decoration:none;
         color:#888;
 }
 
+div#community-profile-page a#bp-xprofile-cover-image-user-preview,
+div#community-profile-page a.bp-xprofile-cover-image-user-edit {
+        text-align: center;
+        display: inline-block;
+        margin-right: 5px;
+        font-size: 90%;
+}
+
+div#community-profile-page a#bp-xprofile-cover-image-user-preview.hide {
+        display:none;
+}
+
 div#community-profile-page p.not-activated {
         margin:1em 1em 0;
         color:red;

src/bp-members/bp-members-screens.php

@@ -377 +377 @@
 }
 add_action( 'bp_screens', 'bp_core_screen_activation' );
 
+/**
+ * Handle the display for a user modal
+ *
+ * @since 2.4.0
+ */
+function bp_members_sreen_modal() {
+        $bp = buddypress();
+
+        if ( bp_is_profile_component() && 'bp-modal' === bp_current_action() ) {
+
+                if ( ! bp_is_item_admin() ) {
+                        return;
+                }
+
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+
+        } elseif ( bp_is_user() && 'bp-modal' === bp_current_component() ) {
+                if ( ! empty( $_GET['action'] ) ) {
+                        $bp->current_action = sanitize_file_name( $_GET['action'] );
+                }
+
+                bp_set_is_modal( true );
+        }
+
+        if ( bp_is_modal() ) {
+                bp_core_load_template( 'assets/modal' );
+        }
+}
+add_action( 'bp_screens', 'bp_members_sreen_modal', 0 );
+
 /** Theme Compatibility *******************************************************/
 
 /**

src/bp-members/bp-members-template.php

@@ -1467 +1467 @@
         }
 }
 
+/** Cover image ***************************************************************/
+
+/**
+ * Should we use the cover image header
+ *
+ * @since 2.4.0
+ *
+ * @return bool True if the displayed user has a cover image,
+ *              False otherwise
+ */
+function bp_displayed_user_use_cover_image_header() {
+        return (bool) bp_is_active( 'xprofile', 'cover_image' ) && ! bp_disable_cover_image_uploads() && bp_attachments_is_wp_version_supported();
+}
+
 /** Avatars *******************************************************************/
 
 /**

src/bp-templates/bp-legacy/buddypress-functions.php

@@ -58 +58 @@
          * @access private
          */
         protected function setup_globals() {
-                $bp            = buddypress();
-                $this->id      = 'legacy';
-                $this->name    = __( 'BuddyPress Legacy', 'buddypress' );
-                $this->version = bp_get_version();
-                $this->dir     = trailingslashit( $bp->themes_dir . '/bp-legacy' );
-                $this->url     = trailingslashit( $bp->themes_url . '/bp-legacy' );
+                $bp             = buddypress();
+                $this->id       = 'legacy';
+                $this->name     = __( 'BuddyPress Legacy', 'buddypress' );
+                $this->version  = bp_get_version();
+                $this->dir      = trailingslashit( $bp->themes_dir . '/bp-legacy' );
+                $this->url      = trailingslashit( $bp->themes_url . '/bp-legacy' );
         }
 
         /**
@@ -123 +123 @@
                                 add_action( 'bp_directory_blogs_actions',    'bp_blogs_visit_blog_button'           );
                                 add_action( 'bp_blogs_directory_blog_types', 'bp_legacy_theme_blog_create_nav', 999 );
                         }
+
+                        // Wait till the BuddyPress loggedin user is set before creating the header's self profile buttons
+                        add_action( 'bp_core_setup_globals', array( $this, 'self_profile_header_buttons' ) );
                 }
 
                 /** Notices ***********************************************************/
@@ -597 +600 @@
 
                 return $templates;
         }
+
+        /**
+         * Add Self Profile buttons to edit avatars and cover images
+         *
+         * @since 2.4.0
+         */
+        public function self_profile_header_buttons() {
+                // Edit Avatar button
+                if ( bp_self_profile_avatar_can_edit() ) {
+                        add_action( 'bp_member_header_actions', 'bp_profile_edit_avatar_button',      5 );
+                }
+
+                // Edit Cover Image button
+                if ( bp_self_profile_cover_image_can_edit() ) {
+                        add_action( 'bp_member_header_actions', 'bp_profile_edit_cover_image_button', 9 );
+                }
+        }
 }
 new BP_Legacy();
 endif;
@@ -1717 +1737 @@
         echo '-1';
         die();
 }
+
+/**
+ * BP Legacy's callback for the cover image feature
+ *
+ * @since  2.4.0
+ *
+ * @param  array  $params the current component's feature parameters
+ * @return array          an array to inform about the css handle to attach the css rules to
+ */
+function bp_legacy_theme_cover_image( $params = array() ) {
+        if ( empty( $params ) ) {
+                return;
+        }
+
+        // avatar height - padding - 1/2 avatar height
+        $avatar_offset = $params['height'] - 5 - round( (int) bp_core_avatar_full_height() / 2 );
+
+        // header content offset + spacing
+        $top_offset  = bp_core_avatar_full_height() - 10;
+        $left_offset = bp_core_avatar_full_width() + 20;
+
+        $cover_image = isset( $params['cover_image'] ) ? 'background-image: url(' . $params['cover_image'] . ');' : '';
+
+        $hide_avatar_style = '';
+
+        // Adjust the cover image header, in case avatars are completely disabled
+        if ( ! buddypress()->avatar->show_avatars ) {
+                $hide_avatar_style = '
+                        #buddypress #item-header-cover-image #item-header-avatar {
+                                display:  none;
+                        }
+                ';
+
+                if ( bp_is_user() ) {
+                        $hide_avatar_style = '
+                                #buddypress #item-header-cover-image #item-header-avatar a {
+                                        display: block;
+                                        height: ' . $top_offset . 'px;
+                                        margin: 0 15px 19px 0;
+                                }
+
+                                #buddypress div#item-header #item-header-cover-image #item-header-content {
+                                        margin-left:auto;
+                                }
+                        ';
+                }
+        }
+
+        return '
+                /* Cover image */
+                #buddypress #header-cover-image {
+                        height: ' . $params["height"] . 'px;
+                        ' . $cover_image . '
+                }
+
+                #buddypress #create-group-form #header-cover-image {
+                        position: relative;
+                        margin: 1em 0;
+                }
+
+                .bp-user #buddypress #item-header {
+                        padding-top: 0;
+                }
+
+                #buddypress #item-header-cover-image #item-header-avatar {
+                        margin-top: '. $avatar_offset .'px;
+                        float: none;
+                        overflow:visible;
+                        width:auto;
+                }
+
+                #buddypress div#item-header #item-header-cover-image #item-header-content {
+                        clear: both;
+                        float: left;
+                        margin-left: ' . $left_offset . 'px;
+                        margin-top: -' . $top_offset . 'px;
+                        width:auto;
+                }
+
+                body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
+                body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+                        margin-top: ' . $params["height"] . 'px;
+                        margin-left: 0;
+                        clear: none;
+                }
+
+                body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+                        padding-top: 20px;
+                }
+
+                ' . $hide_avatar_style . '
+
+                /* This should only happen on regular screens */
+                #buddypress div#item-header-cover-image h2 a,
+                #buddypress div#item-header-cover-image h2 {
+                        color: #FFF;
+                        text-rendering: optimizelegibility;
+                        text-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.8 );
+                        margin: 0;
+                        font-size:200%;
+                }
+
+                #buddypress #item-header-cover-image #item-header-avatar img.avatar {
+                        border: solid 2px #FFF;
+                        background: rgba( 255, 255, 255, 0.8 );
+                }
+
+                #buddypress #item-header-cover-image #item-header-avatar a {
+                        border: none;
+                        text-decoration: none;
+                }
+
+                #buddypress #item-header-cover-image #item-buttons {
+                        overflow:hidden;
+                        margin: 20px 0 10px;
+                        padding: 0 0 5px;
+                }
+
+                #buddypress #item-header-cover-image #item-buttons:before {
+                        content:"\00a0";
+                }
+
+                @media screen and (max-width: 782px) {
+                        #buddypress #item-header-cover-image #item-header-avatar,
+                        .bp-user #buddypress #item-header #item-header-cover-image #item-header-avatar,
+                        #buddypress div#item-header #item-header-cover-image #item-header-content {
+                                width:100%;
+                                text-align:center;
+                        }
+
+                        #buddypress #item-header-cover-image #item-header-avatar a {
+                                display:inline-block;
+                        }
+
+                        #buddypress #item-header-cover-image #item-header-avatar img {
+                                margin:0;
+                        }
+
+                        #buddypress div#item-header #item-header-cover-image #item-header-content,
+                        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
+                        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+                                margin:0;
+                        }
+
+                        #buddypress div#item-header-cover-image h2 a,
+                        #buddypress div#item-header-cover-image h2 {
+                                color: inherit;
+                                text-shadow: none;
+                                margin:25px 0 0;
+                                font-size:200%;
+                        }
+
+                        #buddypress #item-header-cover-image #item-buttons div {
+                                float:none;
+                                display:inline-block;
+                        }
+
+                        #buddypress #item-header-cover-image #item-buttons:before {
+                                content:"";
+                        }
+
+                        #buddypress #item-header-cover-image #item-buttons {
+                                margin: 5px 0;
+                        }
+                }
+        ';
+}

src/bp-templates/bp-legacy/buddypress/assets/_attachments/cover-images/index.php

@@ +1 @@
+<?php
+/**
+ * BuddyPress Cover Images main template
+ *
+ * This template is used to inject the BuddyPress Backbone views
+ * dealing with cover images.
+ * It's also used to create the common Backbone views
+ *
+ * @since 2.4
+ *
+ * @package BuddyPress
+ * @subpackage bp-attachments
+ */
+?>
+
+<div class="bp-cover-image"></div>
+<div class="bp-cover-image-status"></div>
+<div class="bp-cover-image-manage"></div>
+
+<?php bp_attachments_get_template_part( 'uploader' ); ?>
+
+<script id="tmpl-bp-cover-image-delete" type="text/html">
+        <# if ( 'user' === data.object ) { #>
+                <p><?php _e( "If you'd like to delete your current cover image but not upload a new one, please use the delete Cover Image button.", 'buddypress' ); ?></p>
+                <p><a class="button edit" id="bp-delete-cover-image" href="#" title="<?php esc_attr_e( 'Delete Cover Image', 'buddypress' ); ?>"><?php esc_html_e( 'Delete My Cover Image', 'buddypress' ); ?></a></p>
+        <# } else if ( 'group' === data.object ) { #>
+                <p><?php _e( "If you'd like to remove the existing group cover image but not upload a new one, please use the delete group cover image button.", 'buddypress' ); ?></p>
+                <p><a class="button edit" id="bp-delete-cover-image" href="#" title="<?php esc_attr_e( 'Delete Cover Image', 'buddypress' ); ?>"><?php esc_html_e( 'Delete Group Cover Image', 'buddypress' ); ?></a></p>
+        <# } else { #>
+                <?php do_action( 'bp_attachments_cover_image_delete_template' ); ?>
+        <# } #>
+</script>
+
+<?php do_action( 'bp_attachments_cover_image_main_template' ); ?>

src/bp-templates/bp-legacy/buddypress/assets/modal.php

@@ +1 @@
+<?php
+/**
+ * BuddyPress Modal template
+ *
+ * This template is used to render the BuddyPress modal
+ *
+ * @since 2.4
+ *
+ * @package BuddyPress
+ * @subpackage bp-core
+ */
+
+$is_admin = false;
+// Check if the modal was opened from an Admin page
+// And enqueue admin style if needed
+if ( ! empty( $_GET['is_admin'] ) ) {
+        $is_admin = true;
+        wp_enqueue_style( 'colors' );
+}
+
+?>
+<!DOCTYPE html>
+<!--[if IE 8]>
+<html xmlns="http://www.w3.org/1999/xhtml" class="ie8" <?php language_attributes(); ?>>
+<![endif]-->
+<!--[if !(IE 8) ]><!-->
+<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> style="background-color:#FFF">
+<!--<![endif]-->
+<head>
+<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php echo get_option( 'blog_charset' ); ?>" />
+<title><?php bloginfo('name') ?> &rsaquo; <?php bp_modal_title(); ?></title>
+
+<?php bp_modal_header( $is_admin ); ?>
+
+</head>
+<body class="bp-core-ui iframe <?php echo ( true === $is_admin ) ? 'bp-admin' : 'bp-front' ;?> no-js">
+<script type="text/javascript">
+document.body.className = document.body.className.replace('no-js', 'js');
+</script>
+
+<div id="buddypress" class="bp-modal <?php echo ( true === $is_admin ) ? 'wrap' : '' ;?>">
+
+        <?php bp_modal_content(); ?>
+
+</div>
+
+<?php bp_modal_footer( $is_admin ); ?>
+
+</body>
+</html>

src/bp-templates/bp-legacy/buddypress/groups/create.php

@@ -255 +255 @@
 
                         <?php endif; ?>
 
-                        <?php /* Group creation step 4: Invite friends to group */ ?>
+                        <?php /* Group creation step 4: Cover image */ ?>
+                        <?php if ( bp_is_group_creation_step( 'group-cover-image' ) ) : ?>
+
+                                <?php
+
+                                /**
+                                 * Fires before the display of the group cover image creation step.
+                                 *
+                                 * @since 2.4.0
+                                 */
+                                do_action( 'bp_before_group_cover_image_creation_step' ); ?>
+
+                                <div id="header-cover-image"></div>
+
+                                <p><?php _e( 'The Cover Image will be used to customize the header of your group.', 'buddypress' ); ?></p>
+
+                                <?php bp_attachments_get_template_part( 'cover-images/index' ); ?>
+
+                                <?php
+
+                                /**
+                                 * Fires after the display of the group cover image creation step.
+                                 *
+                                 * @since 2.4.0
+                                 */
+                                do_action( 'bp_after_group_cover_image_creation_step' ); ?>
+
+                                <?php wp_nonce_field( 'groups_create_save_group-cover-image' ); ?>
+
+                        <?php endif; ?>
+
+                        <?php /* Group creation step 5: Invite friends to group */ ?>
                         <?php if ( bp_is_group_creation_step( 'group-invites' ) ) : ?>
 
                                 <?php

src/bp-templates/bp-legacy/buddypress/groups/single/admin.php

@@ -218 +218 @@
 
 <?php endif; ?>
 
+<?php /* Group Cover image Settings */ ?>
+<?php if ( bp_is_group_admin_screen( 'group-cover-image' ) ) : ?>
+
+        <h4><?php _e( 'Change Cover Image', 'buddypress' ); ?></h4>
+
+        <?php
+
+        /**
+         * Fires before the display of profile cover image upload content.
+         *
+         * @since 2.4.0
+         */
+        do_action( 'bp_before_group_settings_cover_image' ); ?>
+
+        <p><?php _e( 'The Cover Image will be used to customize the header of your group.', 'buddypress' ); ?></p>
+
+        <?php bp_attachments_get_template_part( 'cover-images/index' ); ?>
+
+        <?php
+
+        /**
+         * Fires after the display of group cover image upload content.
+         *
+         * @since 2.4.0
+         */
+        do_action( 'bp_after_group_settings_cover_image' ); ?>
+
+<?php endif; ?>
+
 <?php /* Manage Group Members */ ?>
 <?php if ( bp_is_group_admin_screen( 'manage-members' ) ) : ?>
 

src/bp-templates/bp-legacy/buddypress/groups/single/cover-image-header.php

@@ +1 @@
+<?php
+
+/**
+ * BuddyPress - Groups Cover Image Header
+ *
+ * @package BuddyPress
+ * @subpackage bp-legacy
+ */
+
+?>
+
+<?php
+
+/**
+ * Fires before the display of a group's header.
+ *
+ * @since BuddyPress (1.2.0)
+ */
+do_action( 'bp_before_group_header' ); ?>
+
+<a id="header-cover-image" href="<?php bp_group_permalink(); ?>"></a>
+
+<div id="item-header-cover-image">
+        <?php if ( ! bp_disable_group_avatar_uploads() ) : ?>
+                <div id="item-header-avatar">
+                        <a href="<?php bp_group_permalink(); ?>" title="<?php bp_group_name(); ?>">
+
+                                <?php bp_group_avatar(); ?>
+
+                        </a>
+                </div><!-- #item-header-avatar -->
+        <?php endif; ?>
+
+        <div id="item-header-content">
+
+                <div id="item-buttons">
+
+                        <?php
+
+                        /**
+                         * Fires in the group header actions section.
+                         *
+                         * @since BuddyPress (1.2.6)
+                         */
+                        do_action( 'bp_group_header_actions' ); ?>
+
+                </div><!-- #item-buttons -->
+
+                <?php
+
+                /**
+                 * Fires before the display of the group's header meta.
+                 *
+                 * @since BuddyPress (1.2.0)
+                 */
+                do_action( 'bp_before_group_header_meta' ); ?>
+
+                <div id="item-meta">
+
+                        <?php
+
+                        /**
+                         * Fires after the group header actions section.
+                         *
+                         * @since BuddyPress (1.2.0)
+                         */
+                        do_action( 'bp_group_header_meta' ); ?>
+
+                        <span class="highlight"><?php bp_group_type(); ?></span>
+                        <span class="activity"><?php printf( __( 'active %s', 'buddypress' ), bp_get_group_last_active() ); ?></span>
+
+                        <?php bp_group_description(); ?>
+
+                </div>
+        </div><!-- #item-header-content -->
+
+        <div id="item-actions">
+
+                <?php if ( bp_group_is_visible() ) : ?>
+
+                        <h3><?php _e( 'Group Admins', 'buddypress' ); ?></h3>
+
+                        <?php bp_group_list_admins();
+
+                        /**
+                         * Fires after the display of the group's administrators.
+                         *
+                         * @since BuddyPress (1.1.0)
+                         */
+                        do_action( 'bp_after_group_menu_admins' );
+
+                        if ( bp_group_has_moderators() ) :
+
+                                /**
+                                 * Fires before the display of the group's moderators, if there are any.
+                                 *
+                                 * @since BuddyPress (1.1.0)
+                                 */
+                                do_action( 'bp_before_group_menu_mods' ); ?>
+
+                                <h3><?php _e( 'Group Mods' , 'buddypress' ); ?></h3>
+
+                                <?php bp_group_list_mods();
+
+                                /**
+                                 * Fires after the display of the group's moderators, if there are any.
+                                 *
+                                 * @since BuddyPress (1.1.0)
+                                 */
+                                do_action( 'bp_after_group_menu_mods' );
+
+                        endif;
+
+                endif; ?>
+
+        </div><!-- #item-actions -->
+
+</div><!-- #item-header-cover-image -->
+
+<?php
+
+/**
+ * Fires after the display of a group's header.
+ *
+ * @since BuddyPress (1.2.0)
+ */
+do_action( 'bp_after_group_header' );
+
+/** This action is documented in bp-templates/bp-legacy/buddypress/activity/index.php */
+do_action( 'template_notices' ); ?>

src/bp-templates/bp-legacy/buddypress/groups/single/home.php

@@ -13 +13 @@
 
         <div id="item-header" role="complementary">
 
-                <?php bp_get_template_part( 'groups/single/group-header' ); ?>
+                <?php
+                /**
+                 * If the cover image feature is enabled, use a specific header
+                 */
+                if ( bp_group_use_cover_image_header() ) :
+                        bp_get_template_part( 'groups/single/cover-image-header' );
+                else :
+                        bp_get_template_part( 'groups/single/group-header' );
+                endif;
+                ?>
 
         </div><!-- #item-header -->
 

src/bp-templates/bp-legacy/buddypress/members/single/cover-image-header.php

@@ +1 @@
+<?php
+
+/**
+ * BuddyPress - Users Cover Image Header
+ *
+ * @package BuddyPress
+ * @subpackage bp-legacy
+ */
+
+?>
+
+<?php
+
+/**
+ * Fires before the display of a member's header.
+ *
+ * @since BuddyPress (1.2.0)
+ */
+do_action( 'bp_before_member_header' ); ?>
+
+<a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>
+
+<div id="item-header-cover-image">
+        <div id="item-header-avatar">
+                <a href="<?php bp_displayed_user_link(); ?>">
+
+                        <?php bp_displayed_user_avatar( 'type=full' ); ?>
+
+                </a>
+        </div><!-- #item-header-avatar -->
+
+        <div id="item-header-content">
+
+                <?php if ( bp_is_active( 'activity' ) && bp_activity_do_mentions() ) : ?>
+                        <h2 class="user-nicename">@<?php bp_displayed_user_mentionname(); ?></h2>
+                <?php endif; ?>
+
+                <div id="item-buttons">
+
+                        <?php
+
+                        /**
+                         * Fires in the member header actions section.
+                         *
+                         * @since BuddyPress (1.2.6)
+                         */
+                        do_action( 'bp_member_header_actions' ); ?>
+
+                </div><!-- #item-buttons -->
+
+                <span class="activity"><?php bp_last_activity( bp_displayed_user_id() ); ?></span>
+
+                <?php
+        
+                /**
+                 * Fires before the display of the member's header meta.
+                 *
+                 * @since BuddyPress (1.2.0)
+                 */
+                do_action( 'bp_before_member_header_meta' ); ?>
+        
+                <div id="item-meta">
+        
+                        <?php if ( bp_is_active( 'activity' ) ) : ?>
+        
+                                <div id="latest-update">
+        
+                                        <?php bp_activity_latest_update( bp_displayed_user_id() ); ?>
+        
+                                </div>
+        
+                        <?php endif; ?>
+        
+                        <?php
+        
+                         /**
+                          * Fires after the group header actions section.
+                          *
+                          * If you'd like to show specific profile fields here use:
+                          * bp_member_profile_data( 'field=About Me' ); -- Pass the name of the field
+                          *
+                          * @since BuddyPress (1.2.0)
+                          */
+                         do_action( 'bp_profile_header_meta' );
+        
+                         ?>
+        
+                </div><!-- #item-meta -->
+
+        </div><!-- #item-header-content -->
+
+</div><!-- #item-header-cover-image -->
+
+<?php
+
+/**
+ * Fires after the display of a member's header.
+ *
+ * @since BuddyPress (1.2.0)
+ */
+do_action( 'bp_after_member_header' ); ?>
+
+<?php
+
+/** This action is documented in bp-templates/bp-legacy/buddypress/activity/index.php */
+do_action( 'template_notices' ); ?>

src/bp-templates/bp-legacy/buddypress/members/single/home.php

@@ -11 +11 @@
 
         <div id="item-header" role="complementary">
 
-                <?php bp_get_template_part( 'members/single/member-header' ) ?>
+                <?php
+                /**
+                 * If the cover image feature is enabled, use a specific header
+                 */
+                if ( bp_displayed_user_use_cover_image_header() ) :
+                        bp_get_template_part( 'members/single/cover-image-header' );
+                else :
+                        bp_get_template_part( 'members/single/member-header' );
+                endif;
+                ?>
 
         </div><!-- #item-header -->
 

src/bp-templates/bp-legacy/buddypress/members/single/profile.php

@@ -38 +38 @@
                 bp_get_template_part( 'members/single/profile/change-avatar' );
                 break;
 
+        // Change Cover Image
+        case 'change-cover-image' :
+                bp_get_template_part( 'members/single/profile/change-cover-image' );
+                break;
+
         // Compose
         case 'public' :
 

src/bp-templates/bp-legacy/buddypress/members/single/profile/change-cover-image.php

@@ +1 @@
+<h4><?php _e( 'Change Cover Image', 'buddypress' ); ?></h4>
+
+<?php
+
+/**
+ * Fires before the display of profile cover image upload content.
+ *
+ * @since 2.4.0
+ */
+do_action( 'bp_before_profile_edit_cover_image' ); ?>
+
+<p><?php _e( 'Your Cover Image will be used to customize the header of your profile.', 'buddypress' ); ?></p>
+
+<?php bp_attachments_get_template_part( 'cover-images/index' ); ?>
+
+<?php
+
+/**
+ * Fires after the display of profile cover image upload content.
+ *
+ * @since 2.4.0
+ */
+do_action( 'bp_after_profile_edit_cover_image' ); ?>

src/bp-templates/bp-legacy/css/buddypress.css

@@ -19 +19 @@
         3.6 - Ajax Loading
         3.7 - Topics and Tables - Forums and General
         3.8 - Headers, Lists and Tabs - Activity, Groups, Blogs, Forums
+                3.8.1 - Cover Image
         3.9 - Private Messaging Threads
         3.10 - Extended Profiles
         3.11 - Widgets
+        3.12 - Modal
 4.0 - Media Queries
         4.1 - Smartphones Landscape
         4.2 - Smartphones Portrait
@@ -845 +847 @@
 #buddypress form *[disabled="disabled"]{
         cursor: default;
         opacity: .4;
- }
+}
+
+body.modal-open .screen-reader-text,
 .bp-screen-reader-text {
         position: absolute;
         margin: -1px;
@@ -1172 +1176 @@
 }
 #buddypress div#item-header {
         overflow: hidden;
+        position: relative;
 }
 #buddypress div#item-header div#item-header-content {
         float: left;
@@ -1252 +1257 @@
         float: left;
         margin: 10px 10px 0 0;
 }
+body.no-js #buddypress div#item-header .js-self-profile-button {
+        display:none;
+}
 #buddypress div#item-header div#message.info {
         line-height: 80%;
 }
@@ -1397 +1405 @@
         list-style: none;
 }
 
+/*--------------------------------------------------------------
+3.8.1 - Cover Image
+--------------------------------------------------------------*/
+
+#buddypress #header-cover-image {
+        background-color: #c5c5c5;
+        background-position: center top;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 0;
+        display: block;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+}
+
+#buddypress #item-header-cover-image {
+        padding: 0 1em;
+        position: relative;
+        z-index: 999;
+}
 
 /*--------------------------------------------------------------
 3.9 - Private Messaging Threads
@@ -1645 +1678 @@
 }
 
 /*--------------------------------------------------------------
+3.11 - Modal
+--------------------------------------------------------------*/
+body.bp-core-ui {
+        background-color: #FFF;
+        width:98%;
+}
+
+#buddypress.bp-modal {
+        margin: 1em;
+}
+
+#buddypress.bp-modal h1 {
+        margin: 1em 0;
+}
+
+/*--------------------------------------------------------------
 4.0 - Media Queries
 --------------------------------------------------------------*/
 /*--------------------------------------------------------------

src/bp-templates/bp-legacy/css/twentyfifteen.css

@@ -957 +957 @@
 
 .bp-user #buddypress #item-header #item-header-avatar img.avatar,
 .bp-user #buddypress #item-header #item-header-avatar a {
-        border-bottom: 0;
+        border-bottom-color: #fff;
         display: inline-block;
         float: none;
 }
@@ -967 +967 @@
                 float: left;
                 width: 20%;
         }
-        .bp-user #buddypress #item-header #item-header-avatar img.avatar,
+
         .bp-user #buddypress #item-header #item-header-avatar a {
-                float: left;
-                width: 100%;
         }
         .bp-user #buddypress #item-header #item-header-content {
                 float: right;

src/bp-templates/bp-legacy/css/twentyfifteen.scss

@@ -1199 +1199 @@
                                 text-align: center;
                                 width: 100%;
 
-                                img.avatar,
                                 a {
                                         border-bottom: 0;
                                         display: inline-block;

src/bp-templates/bp-legacy/css/twentyfourteen.css

@@ -782 +782 @@
                 text-align: left;
                 width: 20%;
         }
-        .bp-user #buddypress #item-header #item-header-avatar img {
-                margin: 0;
-        }
         .bp-user #buddypress #item-header #item-header-content {
                 float: right;
                 width: 78%;

src/bp-templates/bp-legacy/css/twentyfourteen.scss

@@ -1100 +1100 @@
                                 overflow: hidden;
                                 text-align: left;
                                 width: 20%;
-
-                                img {margin: 0;}
                         }
 
                         #item-header-content {

src/bp-templates/bp-legacy/css/twentythirteen.css

@@ -943 +943 @@
 
 .bp-user #buddypress #item-header #item-header-avatar img.avatar,
 .bp-user #buddypress #item-header #item-header-avatar a {
-        border-bottom: 0;
         display: inline-block;
         float: none;
 }
@@ -953 +952 @@
                 float: left;
                 width: 20%;
         }
-        .bp-user #buddypress #item-header #item-header-avatar img.avatar,
+
         .bp-user #buddypress #item-header #item-header-avatar a {
-                float: left;
-                width: 100%;
         }
         .bp-user #buddypress #item-header #item-header-content {
                 float: right;

src/bp-templates/bp-legacy/css/twentythirteen.scss

@@ -1267 +1267 @@
                                         float: left;
                                         width: 20%;
 
-                                        img.avatar,
                                         a {
                                                 float: left;
-                                                width: 100%;
                                         }
                                 }
 

src/bp-xprofile/bp-xprofile-admin.php

@@ -684 +684 @@
          * @since BuddyPress (2.0.0)
          */
         private function setup_actions() {
-                // Enqueue scripts
-                add_action( 'bp_members_admin_enqueue_scripts',  array( $this, 'enqueue_scripts'    ), 10, 1 );
-
                 // Register the metabox in Member's community admin profile
                 add_action( 'bp_members_admin_xprofile_metabox', array( $this, 'register_metaboxes' ), 10, 3 );
 
@@ -695 +692 @@
         }
 
         /**
-         * Enqueue needed scripts.
-         *
-         * @access public
-         * @since BuddyPress (2.3.0)
-         */
-        public function enqueue_scripts( $screen_id ) {
-                if ( ( false === strpos( $screen_id, 'users_page_bp-profile-edit' )
-                        && false === strpos( $screen_id, 'profile_page_bp-profile-edit' ) )
-                        || bp_core_get_root_option( 'bp-disable-avatar-uploads' )
-                        || ! buddypress()->avatar->show_avatars
-                        || ! bp_attachments_is_wp_version_supported() ) {
-                        return;
-                }
-
-                /**
-                 * Get Thickbox
-                 *
-                 * We cannot simply use add_thickbox() here as WordPress is not playing
-                 * nice with Thickbox width/height see https://core.trac.wordpress.org/ticket/17249
-                 * Using media-upload might be interesting in the future for the send to editor stuff
-                 * and we make sure the tb_window is wide enougth
-                 */
-                wp_enqueue_style ( 'thickbox' );
-                wp_enqueue_script( 'media-upload' );
-
-                // Get Avatar Uploader
-                bp_attachments_enqueue_scripts( 'BP_Attachment_Avatar' );
-        }
-
-        /**
          * Register the xProfile metabox on Community Profile admin page.
          *
          * @access public
@@ -794 +761 @@
                                 'low'
                         );
                 }
+
+                if ( bp_displayed_user_use_cover_image_header() ) {
+                        // Cover Image Metabox
+                        add_meta_box(
+                                'bp_xprofile_user_admin_cover_image',
+                                _x( 'Profile Photo', 'xprofile user-admin edit screen', 'buddypress' ),
+                                array( $this, 'user_admin_cover_image_metabox' ),
+                                $screen_id,
+                                'side',
+                                'low'
+                        );
+                }
         }
 
         /**
@@ -1064 +1043 @@
                                 'object'  => 'user',
                                 'type'    => 'full',
                                 'title'   => $user->display_name
-                        ) ); ?>
-
-                        <?php if ( bp_get_user_has_avatar( $user->ID ) ) :
+                        ) );
+
+                        // Add a BuddyPress modal to edit the avatar
+                        if ( ! bp_core_get_root_option( 'bp-disable-avatar-uploads' ) && bp_attachments_is_wp_version_supported() ) :
+                                bp_modal_link( array(
+                                        'item_id'       => $user->ID,
+                                        'object'        => 'user',
+                                        'width'         => 800,
+                                        'height'        => 400,
+                                        'modal_title'   => __( 'Edit Profile Photo', 'buddypress' ),
+                                        'modal_action'  => 'change-avatar',
+                                        'link_text'     => __( 'Edit Profile Photo', 'buddypress' ),
+                                        'link_class'    => array( 'bp-xprofile-avatar-user-edit' ),
+                                ) );
+
+                        elseif ( bp_get_user_has_avatar( $user->ID ) ) :
 
                                 $query_args = array(
                                         'user_id' => $user->ID,
@@ -1082 +1074 @@
 
                                 <a href="<?php echo esc_url( $delete_link ); ?>" title="<?php esc_attr_e( 'Delete Profile Photo', 'buddypress' ); ?>" class="bp-xprofile-avatar-user-admin"><?php esc_html_e( 'Delete Profile Photo', 'buddypress' ); ?></a></li>
 
-                        <?php endif;
-
-                        // Load the Avatar UI templates if user avatar uploads are enabled and current WordPress version is supported
-                        if ( ! bp_core_get_root_option( 'bp-disable-avatar-uploads' ) && bp_attachments_is_wp_version_supported() ) : ?>
-                                <a href="#TB_inline?width=800px&height=400px&inlineId=bp-xprofile-avatar-editor" title="<?php esc_attr_e( 'Edit Profile Photo', 'buddypress' );?>" class="thickbox bp-xprofile-avatar-user-edit"><?php esc_html_e( 'Edit Profile Photo', 'buddypress' ); ?></a>
-                                <div id="bp-xprofile-avatar-editor" style="display:none;">
-                                        <?php bp_attachments_get_template_part( 'avatars/index' ); ?>
-                                </div>
-                        <?php endif; ?>
+                        <?php endif;  ?>
 
                 </div>
                 <?php
         }
 
+        /**
+         * Output the markup for a single group's Edit cover image metabox.
+         *
+         * @since 2.4.0
+         *
+         * @param WP_User $user The WP_User object for the user being edited.
+         */
+        public function user_admin_cover_image_metabox( $user = null ) {
+                $dimensions = bp_attachments_get_cover_image_dimensions( 'xprofile' );
+
+                $cover_src = bp_attachments_get_attachment( 'url', array(
+                        'object_dir' => 'members',
+                        'item_id'    => $user->ID,
+                ) );
+
+                printf( '
+                        <style type="text/css">
+                                #header-cover-image {
+                                        display: block;
+                                        height: %1$spx;
+                                        background: #c5c5c5 url( %2$s );
+                                        background-position: center top;
+                                        background-size: cover;
+                                }
+                        </style>
+                ', $dimensions['height'], $cover_src );
+                ?>
+                <div id="bp_group_cover_image">
+
+                        <div id="header-cover-image"></div>
+
+                                <a id="bp-xprofile-cover-image-user-preview" href="<?php echo esc_url( $cover_src ) ;?>" title="<?php esc_attr_e( 'User Cover Image', 'budypress' ) ;?>" class="bp-cover-image-preview <?php echo ! empty( $cover_src ) ? 'thickbox' : 'hide' ;?>">
+                                        <?php esc_html_e( 'View Cover Image', 'budypress' ) ;?>
+                                </a>
+
+                                <?php bp_modal_link( array(
+                                        'item_id'       => $user->ID,
+                                        'object'        => 'user',
+                                        'width'         => 800,
+                                        'height'        => 400,
+                                        'modal_title'   => __( 'Edit Cover Image', 'buddypress' ),
+                                        'modal_action'  => 'change-cover-image',
+                                        'link_text'     => __( 'Edit Cover Image', 'buddypress' ),
+                                        'link_class'    => array( 'bp-xprofile-cover-image-user-edit' ),
+                                ) ); ?>
+
+                </div>
+        <?php
+        }
 }
 endif; // class_exists check
 

src/bp-xprofile/bp-xprofile-loader.php

@@ -228 +228 @@
                         );
                 }
 
+                // Change Cover image
+                if ( bp_displayed_user_use_cover_image_header() ) {
+                        $sub_nav[] = array(
+                                'name'            => _x( 'Change Cover Image', 'Profile header sub menu', 'buddypress' ),
+                                'slug'            => 'change-cover-image',
+                                'parent_url'      => $profile_link,
+                                'parent_slug'     => $slug,
+                                'screen_function' => 'xprofile_screen_change_cover_image',
+                                'position'        => 40,
+                                'user_has_access' => $access
+                        );
+                }
+
                 // The Settings > Profile nav item can only be set up after
                 // the Settings component has run its own nav routine
                 add_action( 'bp_settings_setup_nav', array( $this, 'setup_settings_nav' ) );
@@ -316 +329 @@
                                 );
                         }
 
+                        if ( bp_displayed_user_use_cover_image_header() ) {
+                                $wp_admin_nav[] = array(
+                                        'parent' => 'my-account-' . $this->id,
+                                        'id'     => 'my-account-' . $this->id . '-change-cover-image',
+                                        'title'  => _x( 'Change Cover Image', 'My Account Profile sub nav', 'buddypress' ),
+                                        'href'   => trailingslashit( $profile_link . 'change-cover-image' )
+                                );
+                        }
                 }
 
                 parent::setup_admin_bar( $wp_admin_nav );

src/bp-xprofile/bp-xprofile-screens.php

@@ -292 +292 @@
 }
 
 /**
+ * Displays the change cover image page.
+ *
+ * @package BuddyPress XProfile
+ *
+ * @since 2.4.0
+ */
+function xprofile_screen_change_cover_image() {
+
+        // Bail if not the correct screen
+        if ( ! bp_is_my_profile() && ! bp_current_user_can( 'bp_moderate' ) ) {
+                return false;
+        }
+
+        /**
+         * Fires right before the loading of the XProfile change cover image screen template file.
+         *
+         * @since 2.4.0
+         */
+        do_action( 'xprofile_screen_change_cover_image' );
+
+        /**
+         * Filters the template to load for the XProfile cover image screen.
+         *
+         * @since 2.4.0
+         *
+         * @param string $template Path to the XProfile cover image template to load.
+         */
+        bp_core_load_template( apply_filters( 'xprofile_template_cover_image', 'members/single/home' ) );
+}
+
+/**
  * Show the xprofile settings template
  *
  * @since BuddyPress (2.0.0)

src/bp-xprofile/bp-xprofile-template.php

@@ -1323 +1323 @@
                  */
                 return apply_filters( 'bp_profile_settings_visibility_select', $retval, $r, $args );
         }
+
+/** Avatars */
+
+/**
+ * Does the avatar can be edited from the current user's profile
+ *
+ * @since  2.4.0
+ *
+ * @return bool True if the avatar can be edited from the current user's profile. False otherwise.
+ */
+function bp_self_profile_avatar_can_edit() {
+        // Default value
+        $can = buddypress()->avatar->show_avatars && bp_attachments_is_wp_version_supported() && ! bp_disable_avatar_uploads();
+
+        if ( ! bp_is_my_profile() ) {
+                $can = false;
+        }
+
+        /**
+         * Filter here if you want to disable the member's header edit avatar button
+         *
+         * @since  2.4.0
+         *
+         * @param bool $can True if the avatar can be edited. False otherwise.
+         */
+        return apply_filters( 'bp_self_profile_avatar_can_edit', $can );
+}
+
+/**
+ * Output the self profile edit avatar button
+ *
+ * @since  2.4.0
+ */
+function bp_profile_edit_avatar_button() {
+        echo bp_get_profile_edit_avatar_button();
+}
+        /**
+         * Get the self profile edit avatar button
+         *
+         * @since  2.4.0
+         *
+         * @return string HTML output
+         */
+        function bp_get_profile_edit_avatar_button() {
+                // Get the modal link
+                $modal_link = bp_get_modal_link( array(
+                        'item_id'       => bp_loggedin_user_id(),
+                        'object'        => 'user',
+                        'width'         => 800,
+                        'height'        => 480,
+                        'modal_title'   => __( 'Edit Profile Photo', 'buddypress' ),
+                        'modal_action'  => 'change-avatar',
+                        'html'          => false,
+                ) );
+
+                // Get the button
+                $button = array(
+                        'id'                => 'edit_profile_photo',
+                        'component'         => 'xprofile',
+                        'must_be_logged_in' => true,
+                        'block_self'        => false,
+                        'wrapper_class'     => 'js-self-profile-button edit-profile-photo-button',
+                        'wrapper_id'        => 'edit-profile-photo-button-' . bp_loggedin_user_id(),
+                        'link_href'         => esc_url( $modal_link ),
+                        'link_text'         => __( 'Edit Profile Photo', 'buddypress' ),
+                        'link_title'        => __( 'Edit Profile Photo', 'buddypress' ),
+                        'link_class'        => 'bp-thickbox'
+                );
+
+                /**
+                 * Filters the HTML for the edit avatar button.
+                 *
+                 * @since 2.4.0
+                 *
+                 * @param string $button HTML markup for edit avatar button.
+                 */
+                return bp_get_button( apply_filters( 'bp_get_profile_edit_avatar_button', $button ) );
+        }
+
+/**
+ * Output the Edit avatar template part for the user modal
+ *
+ * @since 2.4.0
+ */
+function bp_profile_modal_manage_avatar() {
+        ?>
+
+        <h1><?php esc_html_e( 'Edit Profile Photo', 'buddypress' ); ?></h1>
+
+        <?php bp_attachments_get_template_part( 'avatars/index' );
+}
+add_action( 'bp_modal_content_change-avatar', 'bp_profile_modal_manage_avatar' );
+
+/** Cover Images */
+
+/**
+ * Does the cover image can be edited from the current user's profile
+ *
+ * @since  2.4.0
+ *
+ * @return bool True if the cover image can be edited from the current user's profile. False otherwise.
+ */
+function bp_self_profile_cover_image_can_edit() {
+        // Default value
+        $can = bp_displayed_user_use_cover_image_header();
+
+        if ( ! bp_is_my_profile() ) {
+                $can = false;
+        }
+
+        /**
+         * Filter here if you want to disable the member's header edit cover image button
+         *
+         * @since  2.4.0
+         *
+         * @param bool $can True if the cover image can be edited. False otherwise.
+         */
+        return apply_filters( 'bp_self_profile_cover_image_can_edit', $can );
+}
+
+/**
+ * Output the self profile edit cover image button
+ *
+ * @since  2.4.0
+ */
+function bp_profile_edit_cover_image_button() {
+        echo bp_get_profile_edit_cover_image_button();
+}
+
+        /**
+         * Get the self profile edit cover image button
+         *
+         * @since  2.4.0
+         *
+         * @return string HTML output
+         */
+        function bp_get_profile_edit_cover_image_button() {
+                // Get the modal link
+                $modal_link = bp_get_modal_link( array(
+                        'item_id'       => bp_loggedin_user_id(),
+                        'object'        => 'user',
+                        'width'         => 800,
+                        'height'        => 480,
+                        'modal_title'   => __( 'Edit Cover Image', 'buddypress' ),
+                        'modal_action'  => 'change-cover-image',
+                        'html'          => false,
+                ) );
+
+                // Get the button
+                $button = array(
+                        'id'                => 'edit_cover_image',
+                        'component'         => 'xprofile',
+                        'must_be_logged_in' => true,
+                        'block_self'        => false,
+                        'wrapper_class'     => 'js-self-profile-button edit-cover-image-button',
+                        'wrapper_id'        => 'edit-cover-image-button-' . bp_loggedin_user_id(),
+                        'link_href'         => esc_url( $modal_link ),
+                        'link_text'         => __( 'Edit Cover Image', 'buddypress' ),
+                        'link_title'        => __( 'Edit Cover Image', 'buddypress' ),
+                        'link_class'        => 'bp-thickbox'
+                );
+
+                /**
+                 * Filters the HTML for the edit cover image button.
+                 *
+                 * @since 2.4.0
+                 *
+                 * @param string $button HTML markup for edit cover image button.
+                 */
+                return bp_get_button( apply_filters( 'bp_get_profile_edit_cover_image_button', $button ) );
+        }
+
+/**
+ * Output the Edit cover image template part for the user modal
+ *
+ * @since 2.4.0
+ */
+function bp_profile_modal_manage_cover_image() {
+        ?>
+
+        <h1><?php esc_html_e( 'Edit Cover Image', 'buddypress' ); ?></h1>
+
+        <?php bp_attachments_get_template_part( 'cover-images/index' );
+}
+add_action( 'bp_modal_content_change-cover-image', 'bp_profile_modal_manage_cover_image' );

tests/phpunit/testcases/core/class-bp-attachment.php

@@ -328 +328 @@
                 // clean up!
                 $this->clean_files();
         }
+
+        /**
+         * @group upload
+         * @group cover_image
+         */
+        public function test_bp_attachment_cover_image_user_upload() {
+                $reset_files = $_FILES;
+                $reset_post = $_POST;
+                $bp = buddypress();
+                $displayed_user = $bp->displayed_user;
+                $bp->displayed_user = new stdClass;
+
+                $u1 = $this->factory->user->create();
+                $bp->displayed_user->id = $u1;
+
+                // Upload the file
+                $cover_image_attachment = new BP_Attachment_Cover_Image();
+                $_POST['action'] = $cover_image_attachment->action;
+                $_FILES[ $cover_image_attachment->file_input ] = array(
+                        'tmp_name' => $this->image_file,
+                        'name'     => 'mystery-man.jpg',
+                        'type'     => 'image/jpeg',
+                        'error'    => 0,
+                        'size'     => filesize( $this->image_file )
+                );
+
+                /* No error */
+                $cover_image = $cover_image_attachment->upload( $_FILES );
+                $this->assertEquals( $cover_image['file'], $bp->avatar->upload_path . '/buddypress/members/' . $u1 .'/cover-image/mystery-man.jpg' );
+
+                // clean up!
+                $bp->displayed_user = $displayed_user;
+                $this->clean_files( 'buddypress' );
+                $_FILES = $reset_files;
+                $_POST = $reset_post;
+        }
 }