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); - - /* '' + suggestedWidth + ' ' + suggestedHeight + '' */ - 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: $( '
' + l10n.suggestedDimensions + ' ' + frameOptions.crop.suggestedWidth + ' × ' + frameOptions.crop.suggestedHeight + '
' )[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]) ); ?>

+ <# if ( data.suggestedWidth && data.suggestedHeight ) { #> +

+ {{{data.suggestedWidth}}} × {{{data.suggestedHeight}}} +

+ <# } #> + 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…' ), - '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