WordPress.org

Make WordPress Core

Changeset 28030


Ignore:
Timestamp:
04/08/2014 01:54:44 AM (8 years ago)
Author:
nacin
Message:

Header Images: Add suggested dimensions to the media workflow.

props ehg, gcorne.
see #21785.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r27946 r28030  
    420420         */
    421421        openMedia: function(event) {
    422             var suggestedWidth, suggestedHeight,
    423                 l10n = _wpMediaViewsL10n;
     422            var l10n = _wpMediaViewsL10n;
    424423
    425424            event.preventDefault();
    426 
    427             suggestedWidth = l10n.suggestedWidth.replace('%d', _wpCustomizeHeader.data.width);
    428             suggestedHeight = l10n.suggestedHeight.replace('%d', _wpCustomizeHeader.data.height);
    429 
    430             /* '<span class="suggested-dimensions">' + suggestedWidth + ' ' + suggestedHeight + '</span>' */
    431425
    432426            this.frame = wp.media({
     
    440434                },
    441435                multiple: false,
    442                 imgSelectOptions: this.calculateImageSelectOptions
     436                crop: {
     437                    suggestedWidth: _wpCustomizeHeader.data.width,
     438                    suggestedHeight: _wpCustomizeHeader.data.height,
     439                    imgSelectOptions: this.calculateImageSelectOptions
     440                }
    443441            });
    444442
  • trunk/src/wp-includes/css/media-views.css

    r27946 r28030  
    930930    font-size: 13px;
    931931    color: #666;
     932    margin-right: 0.5em;
    932933}
    933934
  • trunk/src/wp-includes/js/media-views.js

    r28019 r28030  
    33133313            }
    33143314        },
     3315
     3316        prepare: function() {
     3317            var cropOptions = this.controller.options.crop;
     3318            if ( cropOptions ) {
     3319                return {
     3320                    suggestedWidth: cropOptions.suggestedWidth,
     3321                    suggestedHeight: cropOptions.suggestedHeight
     3322                }
     3323            }
     3324        },
    33153325        /**
    33163326         * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
     
    51555165
    51565166        createToolbar: function() {
    5157             var filters, FiltersConstructor;
     5167            var filters, FiltersConstructor,
     5168                frameOptions = this.controller.options;
    51585169
    51595170            /**
     
    51965207                this.toolbar.set( 'dragInfo', new media.View({
    51975208                    el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
     5209                    priority: -40
     5210                }) );
     5211            }
     5212
     5213            if ( frameOptions.crop ) {
     5214                this.toolbar.set( 'suggestedDimensions', new media.View({
     5215                    el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + frameOptions.crop.suggestedWidth + ' &times; ' + frameOptions.crop.suggestedHeight + '</div>' )[0],
    51985216                    priority: -40
    51995217                }) );
     
    62316249        },
    62326250        onImageLoad: function() {
    6233             var imgOptions = this.controller.frame.options.imgSelectOptions;
     6251            var imgOptions = this.controller.frame.options.crop.imgSelectOptions;
    62346252            if (typeof imgOptions === 'function') {
    62356253                imgOptions = imgOptions(this.options.attachment, this.controller);
  • trunk/src/wp-includes/media-template.php

    r28008 r28030  
    205205                    printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
    206206                ?></p>
     207
     208                <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
     209                    <p class="suggested-dimensions">
     210                        <?php _e( 'Suggested image dimensions:' ); ?> {{{data.suggestedWidth}}} &times; {{{data.suggestedHeight}}}
     211                    </p>
     212                <# } #>
    207213
    208214                <?php
  • trunk/src/wp-includes/media.php

    r28023 r28030  
    25262526        'cropYourImage' => __( 'Crop your image' ),
    25272527        'cropping' => __( 'Cropping&hellip;' ),
    2528         'suggestedWidth' => __( 'Suggested width is %d pixels.' ),
    2529         'suggestedHeight' => __( 'Suggested height is %d pixels.' ),
     2528        'suggestedDimensions' => __( 'Suggested image dimensions:' ),
    25302529        'cropError' => __( 'There has been an error cropping your image.' ),
    25312530
Note: See TracChangeset for help on using the changeset viewer.