[buddypress-trac] [BuddyPress] #4859: Avatar Cropper Small Screens - Image Size Too Large

[buddypress-trac]

#4859: Avatar Cropper Small Screens - Image Size Too Large
-------------------------+-----------------------------
 Reporter:  modemlooper  |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Core         |    Version:  1.7
 Severity:  normal       |   Keywords:  dev-feedback
-------------------------+-----------------------------
 Need the avatar image resized on mobile so it fits into the screen. I came
 up with this if anyone wants to try it or come up with something better. I
 just added a mobile detect and then resize image to 280. 280 should fit
 into most mobile screens when in portrait.



 {{{
 function bp_core_add_cropper_inline_js() {

         if (  wp_is_mobile()  ) {

                 $imageraw = wp_get_image_editor(
 bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir  );

                 if (  ! is_wp_error( $imageraw  )  ) {
                     $imageraw->resize(  280, 300, false );
                     $imageraw->save(  bp_core_avatar_upload_path() .
 buddypress()->avatar_admin->image->di r );
             }
     }

         // Bail if no image was uploaded
         $image = apply_filters( 'bp_inline_cropper_image', getimagesize(
 bp_core_avatar_upload_path() . buddypress()->avatar_admin->image->dir ) );
         if ( empty( $image ) )
                 return;

         //
         $full_height = bp_core_avatar_full_height();
         $full_width  = bp_core_avatar_full_width();

         // Calculate Aspect Ratio
         if ( !empty( $full_height ) && ( $full_width != $full_height ) ) {
                 $aspect_ratio = $full_width / $full_height;
         } else {
                 $aspect_ratio = 1;
         }

         // Default cropper coordinates
         $crop_left   = $image[0] / 4;
         $crop_top    = $image[1] / 4;
         $crop_right  = $image[0] - $crop_left;
         $crop_bottom = $image[1] - $crop_top; ?>

         <script type="text/javascript">
                 jQuery(window).load( function(){
                         jQuery('#avatar-to-crop').Jcrop({
                                 onChange: showPreview,
                                 onSelect: showPreview,
                                 onSelect: updateCoords,
                                 aspectRatio: <?php echo $aspect_ratio; ?>,
                                 setSelect: [ <?php echo $crop_left; ?>,
 <?php echo $crop_top; ?>, <?php echo $crop_right; ?>, <?php echo
 $crop_bottom; ?> ]
                         });
                         updateCoords({x: <?php echo $crop_left; ?>, y:
 <?php echo $crop_top; ?>, w: <?php echo $crop_right; ?>, h: <?php echo
 $crop_bottom; ?>});
                 });

                 function updateCoords(c) {
                         jQuery('#x').val(c.x);
                         jQuery('#y').val(c.y);
                         jQuery('#w').val(c.w);
                         jQuery('#h').val(c.h);
                 }

                 function showPreview(coords) {
                         if ( parseInt(coords.w) > 0 ) {
                                 var fw = <?php echo $full_width; ?>;
                                 var fh = <?php echo $full_height; ?>;
                                 var rx = fw / coords.w;
                                 var ry = fh / coords.h;

                                 jQuery( '#avatar-crop-preview' ).css({
                                         width: Math.round(rx * <?php echo
 $image[0]; ?>) + 'px',
                                         height: Math.round(ry * <?php echo
 $image[1]; ?>) + 'px',
                                         marginLeft: '-' + Math.round(rx *
 coords.x) + 'px',
                                         marginTop: '-' + Math.round(ry *
 coords.y) + 'px'
                                 });
                         }
                 }
         </script>

 <?php
 }
 }}}

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/4859>
BuddyPress <http://buddypress.org/>
BuddyPress