From 783102fcdccbf08ff6a7729d5ba1e35bc65946de Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Wed, 30 Mar 2016 15:13:34 +0000 Subject: [PATCH] Customize: Respect aspect ratio on cropped images. Takes into account whether the control supports `flex_width` and/or `flex_height` and adjusts destination measurements accordingly. Fixes #36318. git-svn-id: https://develop.svn.wordpress.org/trunk@37113 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/media-views.js | 17 +++++++++++------ .../controllers/customize-image-cropper.js | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 7be686827a..0e1ea805ec 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -400,13 +400,18 @@ var Controller = wp.media.controller, CustomizeImageCropper = Controller.Cropper.extend({ doCrop: function( attachment ) { var cropDetails = attachment.get( 'cropDetails' ), - control = this.get( 'control' ); + control = this.get( 'control' ), + ratio = cropDetails.width / cropDetails.height; - if ( ! control.params.flex_width ) { - cropDetails.dst_width = control.params.width; - } - if ( ! control.params.flex_height ) { - cropDetails.dst_height = control.params.height; + // Use crop measurements when flexible in both directions. + if ( control.params.flex_width && control.params.flex_height ) { + cropDetails.dst_width = cropDetails.width; + cropDetails.dst_height = cropDetails.height; + + // Constrain flexible side based on image ratio and size of the fixed side. + } else { + cropDetails.dst_width = control.params.flex_width ? control.params.height * ratio : control.params.width; + cropDetails.dst_height = control.params.flex_height ? control.params.width / ratio : control.params.height; } return wp.ajax.post( 'crop-image', { diff --git a/src/wp-includes/js/media/controllers/customize-image-cropper.js b/src/wp-includes/js/media/controllers/customize-image-cropper.js index df2d77baca..3456ba36ff 100644 --- a/src/wp-includes/js/media/controllers/customize-image-cropper.js +++ b/src/wp-includes/js/media/controllers/customize-image-cropper.js @@ -14,13 +14,18 @@ var Controller = wp.media.controller, CustomizeImageCropper = Controller.Cropper.extend({ doCrop: function( attachment ) { var cropDetails = attachment.get( 'cropDetails' ), - control = this.get( 'control' ); + control = this.get( 'control' ), + ratio = cropDetails.width / cropDetails.height; - if ( ! control.params.flex_width ) { - cropDetails.dst_width = control.params.width; - } - if ( ! control.params.flex_height ) { - cropDetails.dst_height = control.params.height; + // Use crop measurements when flexible in both directions. + if ( control.params.flex_width && control.params.flex_height ) { + cropDetails.dst_width = cropDetails.width; + cropDetails.dst_height = cropDetails.height; + + // Constrain flexible side based on image ratio and size of the fixed side. + } else { + cropDetails.dst_width = control.params.flex_width ? control.params.height * ratio : control.params.width; + cropDetails.dst_height = control.params.flex_height ? control.params.width / ratio : control.params.height; } return wp.ajax.post( 'crop-image', {