Make WordPress Core

Changeset 22580


Ignore:
Timestamp:
11/14/2012 10:08:02 PM (12 years ago)
Author:
koopersmith
Message:

Media: Improve image size-related UI and code.

  • Add dimensions to the "sizes" dropdown.
  • Ensure a full size is generated in wp_prepare_attachment_for_js().
  • Print the dimensions for the full size in the attachment summary (instead of those for the current size).
  • When generating the attachment view's template, map imageSize() to the size property instead of overriding the default data.

see #21390.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/js/media-views.js

    r22558 r22580  
    21402140
    21412141            if ( 'image' === options.type )
    2142                 _.extend( options, this.imageSize() );
     2142                options.size = this.imageSize();
    21432143
    21442144            this.$el.html( this.template( options ) );
  • trunk/wp-includes/media.php

    r22578 r22580  
    12811281        }
    12821282
    1283         $response = array_merge( $response, array(
     1283        $sizes['full'] = array(
    12841284            'height'      => $meta['height'],
    12851285            'width'       => $meta['width'],
    1286             'sizes'       => $sizes,
     1286            'url'         => $attachment_url,
    12871287            'orientation' => $meta['height'] > $meta['width'] ? 'portrait' : 'landscape',
    1288         ) );
     1288        );
     1289
     1290        $response = array_merge( $response, array( 'sizes' => $sizes ), $sizes['full'] );
    12891291    }
    12901292
     
    14311433                <div class="thumbnail">
    14321434                    <div class="centered">
    1433                         <img src="{{ data.url }}" draggable="false" />
     1435                        <img src="{{ data.size.url }}" draggable="false" />
    14341436                    </div>
    14351437                </div>
     
    14691471                    <div class="media-progress-bar"><div></div></div>
    14701472                <# } else if ( 'image' === data.type ) { #>
    1471                     <img src="{{ data.url }}" draggable="false" />
     1473                    <img src="{{ data.size.url }}" draggable="false" />
    14721474                <# } else { #>
    14731475                    <img src="{{ data.icon }}" class="icon" draggable="false" />
     
    16101612                    ) );
    16111613
    1612                     foreach ( $sizes as $value => $name ) :
    1613                         if ( 'full' === $name )
    1614                             continue;
    1615                         ?>
    1616                         <# if ( data.sizes['<?php echo esc_js( $value ); ?>'] ) { #>
     1614                    foreach ( $sizes as $value => $name ) : ?>
     1615                        <#
     1616                        var size = data.sizes['<?php echo esc_js( $value ); ?>'];
     1617                        if ( size ) { #>
    16171618                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
    1618                                 <?php echo esc_html( $name ); ?>
     1619                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
    16191620                            </option>
    16201621                        <# } #>>
    1621                     <?php endforeach;
    1622 
    1623                     if ( ! empty( $sizes['full'] ) ) : ?>
    1624                         <option value="full">
    1625                             <?php echo esc_html( $sizes['full'] ); ?>
    1626                         </option>
    1627                     <?php endif; ?>
     1622                    <?php endforeach; ?>
    16281623                </select>
    16291624            </label>
Note: See TracChangeset for help on using the changeset viewer.