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

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

@@ -419 +419 @@
                  * @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: {
-                                        type: 'image'
-                                },
                                 button: {
                                         text: l10n.selectAndCrop,
                                         close: false
                                 },
-                                multiple: false,
-                                imgSelectOptions: this.calculateImageSelectOptions
+                                states: [
+                                        new wp.media.controller.Library({
+                                                title:     l10n.chooseImage,
+                                                library:   wp.media.query({ type: 'image' }),
+                                                multiple:  false,
+                                                priority:  20,
+                                                suggestedWidth: _wpCustomizeHeader.data.width,
+                                                suggestedHeight: _wpCustomizeHeader.data.height
+                                        }),
+                                        new wp.media.controller.Cropper({
+                                                imgSelectOptions: this.calculateImageSelectOptions
+                                        })
+                                ]
                         });
 
-                        this.frame.states.add([new wp.media.controller.Cropper()]);
-
                         this.frame.on('select', this.onSelect, this);
                         this.frame.on('cropped', this.onCropped, this);
                         this.frame.on('skippedcrop', this.onSkippedCrop, this);

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

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

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

@@ -1843 +1843 @@
                                 display:    state.get('displaySettings'),
                                 dragInfo:   state.get('dragInfo'),
 
+                                suggestedWidth:  state.get('suggestedWidth'),
+                                suggestedHeight: state.get('suggestedHeight'),
+
                                 AttachmentView: state.get('AttachmentView')
                         });
                 },
@@ -3312 +3315 @@
                                 }) );
                         }
                 },
+
+                prepare: function() {
+                        var suggestedWidth = this.controller.state().get('suggestedWidth'),
+                                suggestedHeight = this.controller.state().get('suggestedHeight');
+
+                        if ( suggestedWidth && suggestedHeight ) {
+                                return {
+                                        suggestedWidth: suggestedWidth,
+                                        suggestedHeight: suggestedHeight
+                                };
+                        }
+                },
                 /**
                  * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
                  */
@@ -5196 +5211 @@
                                         priority: -40
                                 }) );
                         }
+
+                        if ( this.options.suggestedWidth && this.options.suggestedHeight ) {
+                                this.toolbar.set( 'suggestedDimensions', new media.View({
+                                        el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + this.options.suggestedWidth + ' &times; ' + this.options.suggestedHeight + '</div>' )[0],
+                                        priority: -40
+                                }) );
+                        }
                 },
 
                 updateContent: function() {
@@ -6228 +6250 @@
                         };
                 },
                 onImageLoad: function() {
-                        var imgOptions = this.controller.frame.options.imgSelectOptions;
+                        var imgOptions = this.controller.get('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.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:' ),
                 'cropError' => __( 'There has been an error cropping your image.' ),
 
                 // Edit Audio