Header Images: Add suggested dimensions to the media workflow.

props ehg, gcorne.
see #21785.

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


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

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,
+				crop: {
+					suggestedWidth: _wpCustomizeHeader.data.width,
+					suggestedHeight: _wpCustomizeHeader.data.height,
 					imgSelectOptions: this.calculateImageSelectOptions
+				}
 			});
 
 			this.frame.states.add([new wp.media.controller.Cropper()]);

wp-includes/css/media-views-rtl.css

@@ -929,6 +929,7 @@
 	line-height: 18px;
 	font-size: 13px;
 	color: #666;
+	margin-left: 0.5em;
 }
 
 /**

wp-includes/css/media-views.css

@@ -929,6 +929,7 @@
 	line-height: 18px;
 	font-size: 13px;
 	color: #666;
+	margin-right: 0.5em;
 }
 
 /**

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);
 			}

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' ); ?>

wp-includes/media.php

@@ -2525,8 +2525,7 @@ function wp_enqueue_media( $args = array() ) {
 		'cropImage' => __( 'Crop Image' ),
 		'cropYourImage' => __( 'Crop your image' ),
 		'cropping' => __( 'Cropping…' ),
-		'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