From d29a5cee5fb0bf395b80e80b18f8550de5ba326e Mon Sep 17 00:00:00 2001
From: Andrew Nacin <nacin@git.wordpress.org>
Date: Tue, 8 Apr 2014 01:54:44 +0000
Subject: [PATCH] Header Images: Add suggested dimensions to the media
 workflow.

props ehg, gcorne.
see #21785.


git-svn-id: https://develop.svn.wordpress.org/trunk@28030 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-controls.js | 14 ++++++--------
 src/wp-includes/css/media-views.css   |  1 +
 src/wp-includes/js/media-views.js     | 22 ++++++++++++++++++++--
 src/wp-includes/media-template.php    |  6 ++++++
 src/wp-includes/media.php             |  3 +--
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 88e020c631..1bb6445a3c 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -419,16 +419,10 @@
 		 * @param {event} event
 		 */
 		openMedia: function(event) {
-			var suggestedWidth, suggestedHeight,
-				l10n = _wpMediaViewsL10n;
+			var l10n = _wpMediaViewsL10n;
 
 			event.preventDefault();
 
-			suggestedWidth = l10n.suggestedWidth.replace('%d', _wpCustomizeHeader.data.width);
-			suggestedHeight = l10n.suggestedHeight.replace('%d', _wpCustomizeHeader.data.height);
-
-			/* '<span class="suggested-dimensions">' + suggestedWidth + ' ' + suggestedHeight + '</span>' */
-
 			this.frame = wp.media({
 				title: l10n.chooseImage,
 				library: {
@@ -439,7 +433,11 @@
 					close: false
 				},
 				multiple: false,
-				imgSelectOptions: this.calculateImageSelectOptions
+				crop: {
+					suggestedWidth: _wpCustomizeHeader.data.width,
+					suggestedHeight: _wpCustomizeHeader.data.height,
+					imgSelectOptions: this.calculateImageSelectOptions
+				}
 			});
 
 			this.frame.states.add([new wp.media.controller.Cropper()]);
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 2e172b143a..c339723301 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -929,6 +929,7 @@
 	line-height: 18px;
 	font-size: 13px;
 	color: #666;
+	margin-right: 0.5em;
 }
 
 /**
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 0964b96b09..e43fbc6f3c 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -3312,6 +3312,16 @@
 				}) );
 			}
 		},
+
+		prepare: function() {
+			var cropOptions = this.controller.options.crop;
+			if ( cropOptions ) {
+				return {
+					suggestedWidth: cropOptions.suggestedWidth,
+					suggestedHeight: cropOptions.suggestedHeight
+				}
+			}
+		},
 		/**
 		 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
 		 */
@@ -5154,7 +5164,8 @@
 		},
 
 		createToolbar: function() {
-			var filters, FiltersConstructor;
+			var filters, FiltersConstructor,
+				frameOptions = this.controller.options;
 
 			/**
 			 * @member {wp.media.view.Toolbar}
@@ -5198,6 +5209,13 @@
 					priority: -40
 				}) );
 			}
+
+			if ( frameOptions.crop ) {
+				this.toolbar.set( 'suggestedDimensions', new media.View({
+					el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + frameOptions.crop.suggestedWidth + ' &times; ' + frameOptions.crop.suggestedHeight + '</div>' )[0],
+					priority: -40
+				}) );
+			}
 		},
 
 		updateContent: function() {
@@ -6230,7 +6248,7 @@
 			};
 		},
 		onImageLoad: function() {
-			var imgOptions = this.controller.frame.options.imgSelectOptions;
+			var imgOptions = this.controller.frame.options.crop.imgSelectOptions;
 			if (typeof imgOptions === 'function') {
 				imgOptions = imgOptions(this.options.attachment, this.controller);
 			}
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 92026f2e57..90d37e6760 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -205,6 +205,12 @@ function wp_print_media_templates() {
 					printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
 				?></p>
 
+				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
+					<p class="suggested-dimensions">
+						<?php _e( 'Suggested image dimensions:' ); ?> {{{data.suggestedWidth}}} &times; {{{data.suggestedHeight}}}
+					</p>
+				<# } #>
+
 				<?php
 				/** This action is documented in wp-admin/includes/media.php */
 				do_action( 'post-upload-ui' ); ?>
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 18666e8691..fe09a947ae 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -2525,8 +2525,7 @@ function wp_enqueue_media( $args = array() ) {
 		'cropImage' => __( 'Crop Image' ),
 		'cropYourImage' => __( 'Crop your image' ),
 		'cropping' => __( 'Cropping&hellip;' ),
-		'suggestedWidth' => __( 'Suggested width is %d pixels.' ),
-		'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
+		'suggestedDimensions' => __( 'Suggested image dimensions:' ),
 		'cropError' => __( 'There has been an error cropping your image.' ),
 
 		// Edit Audio