[buddypress-trac] [BuddyPress] #4859: Avatar Cropper Small Screens - Image Size Too Large
buddypress-trac
noreply at wordpress.org
Sat Mar 2 22:27:06 UTC 2013
#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
More information about the buddypress-trac
mailing list