Skip to:
Content

BuddyPress.org

Changeset 8673


Ignore:
Timestamp:
07/23/2014 02:43:05 PM (6 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/bp-core-avatars.php

    r8542 r8673  
    671671    }
    672672
     673    // If the uploaded image is smaller than the "full" dimensions, throw
     674    // a warning
     675    $uploaded_image = @getimagesize( bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir );
     676    $full_width     = bp_core_avatar_full_width();
     677    $full_height    = bp_core_avatar_full_height();
     678    if ( isset( $uploaded_image[0] ) && $uploaded_image[0] < $full_width || $uploaded_image[1] < $full_height ) {
     679        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' );
     680    }
     681
    673682    // Set the url value for the image
    674683    $bp->avatar_admin->image->url = bp_core_avatar_url() . $bp->avatar_admin->image->dir;
  • trunk/src/bp-core/bp-core-cssjs.php

    r8647 r8673  
    8484
    8585    // Default cropper coordinates
    86     $crop_left   = round( $image[0] / 4 );
    87     $crop_top    = round( $image[1] / 4 );
    88     $crop_right  = $image[0] - $crop_left;
    89     $crop_bottom = $image[1] - $crop_top; ?>
     86
     87    // Smaller than full-width: cropper defaults to entire image
     88    if ( $image[0] < $full_width ) {
     89        $crop_left  = 0;
     90        $crop_right = $image[0];
     91
     92    // Less than 2x full-width: cropper defaults to full-width
     93    } else if ( $image[0] < ( $full_width * 2 ) ) {
     94        $padding_w  = round( ( $image[0] - $full_width ) / 2 );
     95        $crop_left  = $padding_w;
     96        $crop_right = $image[0] - $padding_w;
     97
     98    // Larger than 2x full-width: cropper defaults to 1/2 image width
     99    } else {
     100        $crop_left  = round( $image[0] / 4 );
     101        $crop_right = $image[0] - $crop_left;
     102    }
     103
     104    // Smaller than full-height: cropper defaults to entire image
     105    if ( $image[1] < $full_height ) {
     106        $crop_top    = 0;
     107        $crop_bottom = $image[1];
     108
     109    // Less than double full-height: cropper defaults to full-height
     110    } else if ( $image[1] < ( $full_height * 2 ) ) {
     111        $padding_h   = round( ( $image[1] - $full_height ) / 2 );
     112        $crop_top    = $padding_h;
     113        $crop_bottom = $image[1] - $padding_h;
     114
     115    // Larger than 2x full-height: cropper defaults to 1/2 image height
     116    } else {
     117        $crop_top    = round( $image[1] / 4 );
     118        $crop_bottom = $image[1] - $crop_top;
     119    }
     120
     121    ?>
    90122
    91123    <script type="text/javascript">
Note: See TracChangeset for help on using the changeset viewer.