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