From 55a3f09ec4af244d089cd4d1796ff3b1f20956ba Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Wed, 14 Nov 2012 22:08:02 +0000
Subject: [PATCH] Media: Improve image size-related UI and code.

* Add dimensions to the "sizes" dropdown.
* Ensure a `full` size is generated in `wp_prepare_attachment_for_js()`.
* Print the dimensions for the full size in the attachment summary (instead of those for the current size).
* When generating the attachment view's template, map `imageSize()` to the `size` property instead of overriding the default data.

see #21390.


git-svn-id: https://develop.svn.wordpress.org/trunk@22580 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/js/media-views.js |  2 +-
 wp-includes/media.php         | 31 +++++++++++++------------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js
index 72c9230f0a..b37742343f 100644
--- a/wp-includes/js/media-views.js
+++ b/wp-includes/js/media-views.js
@@ -2139,7 +2139,7 @@
 			options.describe = this.controller.state().get('describe');
 
 			if ( 'image' === options.type )
-				_.extend( options, this.imageSize() );
+				options.size = this.imageSize();
 
 			this.$el.html( this.template( options ) );
 
diff --git a/wp-includes/media.php b/wp-includes/media.php
index 145ec45bed..d9551e341d 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1280,12 +1280,14 @@ function wp_prepare_attachment_for_js( $attachment ) {
 			}
 		}
 
-		$response = array_merge( $response, array(
+		$sizes['full'] = array(
 			'height'      => $meta['height'],
 			'width'       => $meta['width'],
-			'sizes'       => $sizes,
+			'url'         => $attachment_url,
 			'orientation' => $meta['height'] > $meta['width'] ? 'portrait' : 'landscape',
-		) );
+		);
+
+		$response = array_merge( $response, array( 'sizes' => $sizes ), $sizes['full'] );
 	}
 
 	if ( function_exists('get_compat_media_markup') )
@@ -1430,7 +1432,7 @@ function wp_print_media_templates( $attachment ) {
 			<# } else if ( 'image' === data.type ) { #>
 				<div class="thumbnail">
 					<div class="centered">
-						<img src="{{ data.url }}" draggable="false" />
+						<img src="{{ data.size.url }}" draggable="false" />
 					</div>
 				</div>
 			<# } else { #>
@@ -1468,7 +1470,7 @@ function wp_print_media_templates( $attachment ) {
 				<# if ( data.uploading ) { #>
 					<div class="media-progress-bar"><div></div></div>
 				<# } else if ( 'image' === data.type ) { #>
-					<img src="{{ data.url }}" draggable="false" />
+					<img src="{{ data.size.url }}" draggable="false" />
 				<# } else { #>
 					<img src="{{ data.icon }}" class="icon" draggable="false" />
 				<# } #>
@@ -1609,22 +1611,15 @@ function wp_print_media_templates( $attachment ) {
 						'full'      => __('Full Size'),
 					) );
 
-					foreach ( $sizes as $value => $name ) :
-						if ( 'full' === $name )
-							continue;
-						?>
-						<# if ( data.sizes['<?php echo esc_js( $value ); ?>'] ) { #>
+					foreach ( $sizes as $value => $name ) : ?>
+						<#
+						var size = data.sizes['<?php echo esc_js( $value ); ?>'];
+						if ( size ) { #>
 							<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
-								<?php echo esc_html( $name ); ?>
+								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
 							</option>
 						<# } #>>
-					<?php endforeach;
-
-					if ( ! empty( $sizes['full'] ) ) : ?>
-						<option value="full">
-							<?php echo esc_html( $sizes['full'] ); ?>
-						</option>
-					<?php endif; ?>
+					<?php endforeach; ?>
 				</select>
 			</label>
 		<# } #>