Changeset 8673

Timestamp:

07/23/2014 02:43:05 PM (10 years ago)

Author:

boonebgorges

Message:

Improved image size detection for uploaded avatar images

This changeset introduces two fixes that improve the UX for the avatar upload
process with original images of various sizes:

• Be sensitive to the size of the original image when setting the initial dimensions of the crop box. If the uploaded image is smaller than the "full" avatar size, suggest a crop that contains the entire image; if slightly larger than the "full" size, suggest a crop equivalent to the "full" size.
• When a too-small image is uploaded, throw a message that suggests a larger one.

See #5617

Location:

trunk/src/bp-core

Files:

• bp-core-avatars.php (modified) (1 diff)
• bp-core-cssjs.php (modified) (1 diff)

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

@@ -671 +671 @@
     }
 
+    // If the uploaded image is smaller than the "full" dimensions, throw
+    // a warning
+    $uploaded_image = @getimagesize( bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir );
+    $full_width     = bp_core_avatar_full_width();
+    $full_height    = bp_core_avatar_full_height();
+    if ( isset( $uploaded_image[0] ) && $uploaded_image[0] < $full_width || $uploaded_image[1] < $full_height ) {
+        bp_core_add_message( sprintf( __( 'You have selected an image that is smaller than recommended. For best results, upload a picture larger than %d x %d pixels.', 'buddypress' ), $full_width, $full_height ), 'error' );
+    }
+
     // Set the url value for the image
     $bp->avatar_admin->image->url = bp_core_avatar_url() . $bp->avatar_admin->image->dir;

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

@@ -84 +84 @@
 
     // Default cropper coordinates
-    $crop_left   = round( $image[0] / 4 );
-    $crop_top    = round( $image[1] / 4 );
-    $crop_right  = $image[0] - $crop_left;
-    $crop_bottom = $image[1] - $crop_top; ?>
+
+    // Smaller than full-width: cropper defaults to entire image
+    if ( $image[0] < $full_width ) {
+        $crop_left  = 0;
+        $crop_right = $image[0];
+
+    // Less than 2x full-width: cropper defaults to full-width
+    } else if ( $image[0] < ( $full_width * 2 ) ) {
+        $padding_w  = round( ( $image[0] - $full_width ) / 2 );
+        $crop_left  = $padding_w;
+        $crop_right = $image[0] - $padding_w;
+
+    // Larger than 2x full-width: cropper defaults to 1/2 image width
+    } else {
+        $crop_left  = round( $image[0] / 4 );
+        $crop_right = $image[0] - $crop_left;
+    }
+
+    // Smaller than full-height: cropper defaults to entire image
+    if ( $image[1] < $full_height ) {
+        $crop_top    = 0;
+        $crop_bottom = $image[1];
+
+    // Less than double full-height: cropper defaults to full-height
+    } else if ( $image[1] < ( $full_height * 2 ) ) {
+        $padding_h   = round( ( $image[1] - $full_height ) / 2 );
+        $crop_top    = $padding_h;
+        $crop_bottom = $image[1] - $padding_h;
+
+    // Larger than 2x full-height: cropper defaults to 1/2 image height
+    } else {
+        $crop_top    = round( $image[1] / 4 );
+        $crop_bottom = $image[1] - $crop_top;
+    }
+
+    ?>
 
     <script type="text/javascript">