Changeset 10206

Timestamp:

10/07/2015 04:47:14 PM (9 years ago)

Author:

imath

Message:

Avatar UI: make sure to display the full content of the image during the cropping step.

When a user uploads an image to set his avatar, we are saving a temporary version of it resized using the bp_core_avatar_original_max_width() dimension (by default 450px). This resized image will be output to the user so that he can edit it during the cropping step. Once the avatar is saved, we are deleting this temporary image.

Sometimes, the Avatar UI width is smaller than this resized version of the image and as a result the image is truncated on its right side (this mainly happens on mobile devices). To avoid this, the Avatar UI is now informing about its available width and if it is smaller than bp_core_avatar_original_max_width(). This available width will be used to generate the tempory image so that the full content of the image will be displayed to the user when cropping his avatar.

Fixes #6586

Location:

trunk/src/bp-core

Files:

• bp-core-avatars.php (modified) (2 diffs)
• classes/class-bp-attachment-avatar.php (modified) (3 diffs)
• js/bp-plupload.js (modified) (1 diff)

trunk/src/bp-core/bp-core-avatars.php

@@ -821 +821 @@
     }
 
+    // The Avatar UI available width
+    $ui_available_width = 0;
+
+    // Try to set the ui_available_width using the avatar_admin global
+    if ( isset( $bp->avatar_admin->ui_available_width ) ) {
+        $ui_available_width = $bp->avatar_admin->ui_available_width;
+    }
+
     // Maybe resize.
-    $bp->avatar_admin->resized = $avatar_attachment->shrink( $bp->avatar_admin->original['file'] );
+    $bp->avatar_admin->resized = $avatar_attachment->shrink( $bp->avatar_admin->original['file'], $ui_available_width );
     $bp->avatar_admin->image   = new stdClass();
 
@@ -932 +940 @@
     if ( ! isset( $bp->avatar_admin ) ) {
         $bp->avatar_admin = new stdClass();
+    }
+
+    /**
+     * The BuddyPress upload parameters is including the Avatar UI Available width,
+     * add it to the avatar_admin global for a later use.
+     */
+    if ( isset( $bp_params['ui_available_width'] ) ) {
+        $bp->avatar_admin->ui_available_width =  (int) $bp_params['ui_available_width'];
     }
 

trunk/src/bp-core/classes/class-bp-attachment-avatar.php

@@ -118 +118 @@
      *
      * @since 2.3.0
+     * @since 2.4.0 Add the $ui_available_width parameter, to inform about the Avatar UI width.
      *
      * @uses  bp_core_avatar_original_max_width()
@@ -125 +126 @@
      * @return mixed
      */
-    public static function shrink( $file = '' ) {
+    public static function shrink( $file = '', $ui_available_width = 0 ) {
         // Get image size
         $avatar_data = parent::get_image_data( $file );
@@ -132 +133 @@
         $edit_args = array();
 
+        // Defaults to the Avatar original max width constant.
+        $original_max_width = bp_core_avatar_original_max_width();
+
+        // The ui_available_width is defined and it's smaller than the Avatar original max width
+        if ( ! empty( $ui_available_width ) && $ui_available_width < $original_max_width ) {
+            /**
+             * In this case, to make sure the content of the image will be fully displayed
+             * during the cropping step, let's use the Avatar UI Available width.
+             */
+            $original_max_width = $ui_available_width;
+
+            // $original_max_width has to be larger than the avatar's full width
+            if ( $original_max_width < bp_core_avatar_full_width() ) {
+                $original_max_width = bp_core_avatar_full_width();
+            }
+        }
+
         // Do we need to resize the image ?
-        if ( isset( $avatar_data['width'] ) && $avatar_data['width'] > bp_core_avatar_original_max_width() ) {
+        if ( isset( $avatar_data['width'] ) && $avatar_data['width'] > $original_max_width ) {
             $edit_args = array(
-                'max_w' => bp_core_avatar_original_max_width(),
-                'max_h' => bp_core_avatar_original_max_width(),
+                'max_w' => $original_max_width,
+                'max_h' => $original_max_width,
             );
         }

trunk/src/bp-core/js/bp-plupload.js

@@ -61 +61 @@
          */
         this.uploader.bind( 'Init', function( uploader ) {
-            var container = $( '#' + self.params.defaults.container ),
+            var container    = $( '#' + self.params.defaults.container ),
                 drop_element = $( '#' + self.params.defaults.drop_element );
 
             if ( 'html4' === uploader.runtime ) {
                 uploader.settings.multipart_params.html4 = true;
+            }
+
+            /**
+             * Avatars need to be cropped, by default we are using an original
+             * max width of 450px, but there can be cases when this max width
+             * is larger than the one of the Avatar UI (eg: on mobile). To avoid any
+             * difficulties, we're adding a ui_available_width argument to the bp_params
+             * object and set it according to the container width. This value will be
+             * checked during the upload process to eventually adapt the resized avatar.
+             */
+            if ( 'bp_avatar_upload' ===  uploader.settings.multipart_params.action ) {
+                 uploader.settings.multipart_params.bp_params.ui_available_width = container.width();
             }