Changeset 37113

Timestamp:

03/30/2016 03:13:34 PM (9 years ago)

Author:

obenland

Message:

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.

Location:

trunk/src/wp-includes/js

Files:

• media-views.js (modified) (1 diff)
• media/controllers/customize-image-cropper.js (modified) (1 diff)

trunk/src/wp-includes/js/media-views.js

@@ -401 +401 @@
     doCrop: function( attachment ) {
         var cropDetails = attachment.get( 'cropDetails' ),
-            control = this.get( 'control' );
-
-        if ( ! control.params.flex_width ) {
-            cropDetails.dst_width = control.params.width;
-        }
-        if ( ! control.params.flex_height ) {
-            cropDetails.dst_height = control.params.height;
+            control = this.get( 'control' ),
+            ratio = cropDetails.width / cropDetails.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;
         }
 

trunk/src/wp-includes/js/media/controllers/customize-image-cropper.js

@@ -15 +15 @@
     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;
         }