Site Icon: Improve responsiveness for small screen devices.

Using Jcrop's `trueSize` argument also allows us to get rid of all that behind
the scenes temp image creating and back and forth calculating of image sizes.

Props tyxla for initial patch.
See #16434.


Built from https://develop.svn.wordpress.org/trunk@33053


git-svn-id: http://core.svn.wordpress.org/trunk@33024 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/site-icon-rtl.css

@@ -17,6 +17,10 @@
 	max-width: 720px;
 }
 
+.site-icon-crop-wrapper {
+	float: right;
+}
+
 .site-icon-crop-preview-shell {
 	float: left;
 	overflow: hidden;
@@ -55,4 +59,25 @@
 	height: 64px;
 	overflow: hidden;
 	width: 64px;
-} 
+}
+
+.site-icon-crop-shell .submit {
+	clear: both;
+}
+
+@media only screen and (max-width: 768px) {
+	.site-icon-crop-wrapper,
+	.site-icon-crop-preview-shell {
+		float: none;
+	}
+
+	.site-icon-crop-wrapper {
+		max-width: 100%;
+		margin-bottom: 20px;
+	}
+
+	.site-icon-crop-wrapper img {
+		max-width: 100%;
+		height: auto;
+	}
+}

wp-admin/css/site-icon.css

@@ -17,6 +17,10 @@
 	max-width: 720px;
 }
 
+.site-icon-crop-wrapper {
+	float: left;
+}
+
 .site-icon-crop-preview-shell {
 	float: right;
 	overflow: hidden;
@@ -55,4 +59,25 @@
 	height: 64px;
 	overflow: hidden;
 	width: 64px;
-} 
+}
+
+.site-icon-crop-shell .submit {
+	clear: both;
+}
+
+@media only screen and (max-width: 768px) {
+	.site-icon-crop-wrapper,
+	.site-icon-crop-preview-shell {
+		float: none;
+	}
+
+	.site-icon-crop-wrapper {
+		max-width: 100%;
+		margin-bottom: 20px;
+	}
+
+	.site-icon-crop-wrapper img {
+		max-width: 100%;
+		height: auto;
+	}
+}

wp-admin/includes/class-wp-site-icon.php

@@ -249,33 +249,14 @@ class WP_Site_Icon {
 			return;
 		}
 
-		// Let's resize the image so that the user can easier crop a image that in the admin view.
+		wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', array(
-		$crop_height = absint( $this->page_crop * $image_size[1] / $image_size[0] );
+			'init_x'    => 0,
-		$cropped = wp_crop_image( $attachment_id, 0, 0, 0, 0, $this->page_crop, $crop_height );
+			'init_y'    => 0,
-		if ( ! $cropped || is_wp_error( $cropped ) ) {
+			'init_size' => $this->min_size,
-			wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
+			'min_size'  => $this->min_size,
-		}
+			'width'     => $image_size[0],
-		$cropped_size = getimagesize( $cropped );
+			'height'    => $image_size[1],
-
+		) );
-		// set default values (in case of no JS)
-		$crop_ratio = $image_size[0] / $cropped_size[0];
-		if ( $cropped_size[0] < $cropped_size[1] ) {
-			$crop_x    = 0;
-			$crop_y    = absint( ( $cropped_size[1] - $cropped_size[0] ) / 2 );
-			$crop_size = $cropped_size[0];
-		} elseif ( $cropped_size[0] > $cropped_size[1] ) {
-			$crop_x    = absint( ( $cropped_size[0] - $cropped_size[1] ) / 2 );
-			$crop_y    = 0;
-			$crop_size = $cropped_size[1];
-		} else {
-			$crop_x    = 0;
-			$crop_y    = 0;
-			$crop_size = $cropped_size[0];
-		}
-
-		wp_delete_file( $cropped );
-
-		wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', $this->initial_crop_data( $crop_ratio, $cropped_size ) );
 		?>
 
 		<div class="wrap">
@@ -287,6 +268,10 @@ class WP_Site_Icon {
 					<p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
 					<p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
 
+					<div class="site-icon-crop-wrapper">
+						<img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="512" height="" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
+					</div>
+
 					<div class="site-icon-crop-preview-shell hide-if-no-js">
 						<h3><?php _e( 'Preview' ); ?></h3>
 						<strong><?php _e( 'As your favicon' ); ?></strong>
@@ -304,16 +289,14 @@ class WP_Site_Icon {
 							<img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
 						</div>
 					</div>
-					<img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="<?php echo esc_attr( $cropped_size[0] ); ?>" height="<?php echo esc_attr( $cropped_size[1] ); ?>" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
 
-					<input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" />
+					<input type="hidden" id="crop-x" name="crop-x" value="0" />
-					<input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" />
+					<input type="hidden" id="crop-y" name="crop-y" value="0" />
-					<input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $crop_size ); ?>" />
+					<input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $this->min_size ); ?>" />
-					<input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $crop_size ); ?>" />
+					<input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $this->min_size ); ?>" />
 
 					<input type="hidden" name="action" value="set_site_icon" />
 					<input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" />
-					<input type="hidden" name="crop_ratio" value="<?php echo esc_attr( $crop_ratio ); ?>" />
 					<?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?>
 						<input type="hidden" name="create-new-attachment" value="true" />
 					<?php endif; ?>
@@ -358,8 +341,7 @@ class WP_Site_Icon {
 			$this->delete_site_icon();
 
 			if ( empty( $_REQUEST['skip-cropping'] ) ) {
-				$crop_data = $this->convert_coordinates_from_resized_to_full( $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], (float) $_REQUEST['crop_ratio'] );
+				$cropped = wp_crop_image( $attachment_id, $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], $this->min_size, $this->min_size );
-				$cropped   = wp_crop_image( $attachment_id, $crop_data['crop_x'], $crop_data['crop_y'], $crop_data['crop_width'], $crop_data['crop_height'], $this->min_size, $this->min_size );
 
 			} elseif ( $create_new_attachement ) {
 				$cropped = _copy_image_file( $attachment_id );
@@ -390,70 +372,6 @@ class WP_Site_Icon {
 		add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' );
 	}
 
-	/**
-	 * This function is used to pass data to the localize script
-	 * so that we can center the cropper and also set the minimum
-	 * cropper.
-	 *
-	 * @since 4.3.0
-	 *
-	 * @param float $ratio
-	 * @param array $cropped_size
-	 * @return array
-	 */
-	public function initial_crop_data( $ratio, $cropped_size ) {
-		$init_x = $init_y = $init_size = 0;
-
-		$min_crop_size  = ( $this->min_size / $ratio );
-		$resized_width  = $cropped_size[0];
-		$resized_height = $cropped_size[1];
-
-		// Landscape format ( width > height )
-		if ( $resized_width > $resized_height ) {
-			$init_x    = ( $this->page_crop - $resized_height ) / 2;
-			$init_size = $resized_height;
-		}
-
-		// Portrait format ( height > width )
-		if ( $resized_width < $resized_height ) {
-			$init_y    = ( $this->page_crop - $resized_width ) / 2;
-			$init_size = $resized_height;
-		}
-
-		// Square height == width
-		if ( $resized_width == $resized_height ) {
-			$init_size = $resized_height;
-		}
-
-		return array(
-			'init_x'    => $init_x,
-			'init_y'    => $init_y,
-			'init_size' => $init_size,
-			'min_size'  => $min_crop_size,
-		);
-	}
-
-	/**
-	 * Converts the coordinates from the downsized image to the original image for accurate cropping.
-	 *
-	 * @since 4.3.0
-	 *
-	 * @param int   $crop_x
-	 * @param int   $crop_y
-	 * @param int   $crop_width
-	 * @param int   $crop_height
-	 * @param float $ratio
-	 * @return array
-	 */
-	public function convert_coordinates_from_resized_to_full( $crop_x, $crop_y, $crop_width, $crop_height, $ratio ) {
-		return array(
-			'crop_x'      => floor( $crop_x * $ratio ),
-			'crop_y'      => floor( $crop_y * $ratio ),
-			'crop_width'  => floor( $crop_width * $ratio ),
-			'crop_height' => floor( $crop_height * $ratio ),
-		);
-	}
-
 	/**
 	 * Upload the file to be cropped in the second step.
 	 *

wp-admin/js/site-icon-crop.js

@@ -16,21 +16,18 @@
 			var rx = 64 / coords.w,
 				ry = 64 / coords.h,
 				preview_rx = 16 / coords.w,
-				preview_ry = 16 / coords.h,
+				preview_ry = 16 / coords.h;
-				$cropImage = $( '#crop-image' ),
-				$homeIcon = $( '#preview-homeicon' ),
-				$favicon = $( '#preview-favicon' );
 
-			$homeIcon.css({
+			$( '#preview-homeicon' ).css({
-				width: Math.round(rx * $cropImage.attr( 'width' ) ) + 'px',
+				width: Math.round(rx * wpSiteIconCropData.width ) + 'px',
-				height: Math.round(ry * $cropImage.attr( 'height' ) ) + 'px',
+				height: Math.round(ry * wpSiteIconCropData.height ) + 'px',
 				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
 				marginTop: '-' + Math.round(ry * coords.y) + 'px'
 			});
 
-			$favicon.css({
+			$( '#preview-favicon' ).css({
-				width: Math.round( preview_rx *  $cropImage.attr( 'width' ) ) + 'px',
+				width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px',
-				height: Math.round( preview_ry * $cropImage.attr( 'height' ) ) + 'px',
+				height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px',
 				marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px',
 				marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px'
 			});
@@ -43,6 +40,7 @@
 				aspectRatio: 1,
 				onSelect: siteIconCrop.updateCoords,
 				onChange: siteIconCrop.updateCoords,
+				trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ],
 				minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
 			});
 			jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);

wp-admin/js/site-icon-crop.min.js

@@ -1 +1 @@
-!function(a){var b={},c={updateCoords:function(b){a("#crop-x").val(b.x),a("#crop-y").val(b.y),a("#crop-width").val(b.w),a("#crop-height").val(b.h),c.showPreview(b)},showPreview:function(b){var c=64/b.w,d=64/b.h,e=16/b.w,f=16/b.h,g=a("#crop-image"),h=a("#preview-homeicon"),i=a("#preview-favicon");h.css({width:Math.round(c*g.attr("width"))+"px",height:Math.round(d*g.attr("height"))+"px",marginLeft:"-"+Math.round(c*b.x)+"px",marginTop:"-"+Math.round(d*b.y)+"px"}),i.css({width:Math.round(e*g.attr("width"))+"px",height:Math.round(f*g.attr("height"))+"px",marginLeft:"-"+Math.round(e*b.x)+"px",marginTop:"-"+Math.floor(f*b.y)+"px"})},ready:function(){b=a.Jcrop("#crop-image"),b.setOptions({bgColor:"transparent",aspectRatio:1,onSelect:c.updateCoords,onChange:c.updateCoords,minSize:[wpSiteIconCropData.min_size,wpSiteIconCropData.min_size]}),b.animateTo([wpSiteIconCropData.init_x,wpSiteIconCropData.init_y,wpSiteIconCropData.init_size,wpSiteIconCropData.init_size])}};c.ready()}(jQuery);
+!function(a){var b={},c={updateCoords:function(b){a("#crop-x").val(b.x),a("#crop-y").val(b.y),a("#crop-width").val(b.w),a("#crop-height").val(b.h),c.showPreview(b)},showPreview:function(b){var c=64/b.w,d=64/b.h,e=16/b.w,f=16/b.h;a("#preview-homeicon").css({width:Math.round(c*wpSiteIconCropData.width)+"px",height:Math.round(d*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(c*b.x)+"px",marginTop:"-"+Math.round(d*b.y)+"px"}),a("#preview-favicon").css({width:Math.round(e*wpSiteIconCropData.width)+"px",height:Math.round(f*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(e*b.x)+"px",marginTop:"-"+Math.floor(f*b.y)+"px"})},ready:function(){b=a.Jcrop("#crop-image"),b.setOptions({bgColor:"transparent",aspectRatio:1,onSelect:c.updateCoords,onChange:c.updateCoords,trueSize:[wpSiteIconCropData.width,wpSiteIconCropData.height],minSize:[wpSiteIconCropData.min_size,wpSiteIconCropData.min_size]}),b.animateTo([wpSiteIconCropData.init_x,wpSiteIconCropData.init_y,wpSiteIconCropData.init_size,wpSiteIconCropData.init_size])}};c.ready()}(jQuery);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-beta1-33052';
+$wp_version = '4.3-beta1-33053';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.