Ticket #21785: 21785-suggested-dimensions.4.diff

src/wp-admin/js/customize-controls.js

@@ -420 +420 @@
                  * @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: {
@@ -440 +434 @@
                                         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()]);

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

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

src/wp-includes/js/media-views.js

@@ -3310 +3310 @@
                                 }) );
                         }
                 },
+
+                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
                  */
@@ -5150 +5160 @@
                 },
 
                 createToolbar: function() {
-                        var filters, FiltersConstructor;
+                        var filters, FiltersConstructor, frameOptions = this.controller.options;
 
                         /**
                          * @member {wp.media.view.Toolbar}
@@ -5194 +5204 @@
                                         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() {
@@ -6225 +6242 @@
                         };
                 },
                 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);
                         }

src/wp-includes/media-template.php

@@ -205 +205 @@
                                         printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
                                 ?></p>
 
+                                <# if ( data && 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' ); ?>

src/wp-includes/media.php

@@ -2527 +2527 @@
                 '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' ),
 
                 // Edit Audio
                 'audioDetailsTitle'     => __( 'Audio Details' ),