Changeset 22580

Timestamp:

11/14/2012 10:08:02 PM (14 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:

• js/media-views.js (modified) (1 diff)
• media.php (modified) (4 diffs)

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

@@ -2140 +2140 @@
 
                         if ( 'image' === options.type )
-                                _.extend( options, this.imageSize() );
+                                options.size = this.imageSize();
 
                         this.$el.html( this.template( options ) );

trunk/wp-includes/media.php

@@ -1281 +1281 @@
                 }
 
-                $response = array_merge( $response, array(
+                $sizes['full'] = array(
                         'height'      => $meta['height'],
                         'width'       => $meta['width'],
-                        'sizes'       => $sizes,
+                        'url'         => $attachment_url,
                         'orientation' => $meta['height'] > $meta['width'] ? 'portrait' : 'landscape',
-                ) );
+                );
+
+                $response = array_merge( $response, array( 'sizes' => $sizes ), $sizes['full'] );
         }
 
@@ -1431 +1433 @@
                                 <div class="thumbnail">
                                         <div class="centered">
-                                                <img src="{{ data.url }}" draggable="false" />
+                                                <img src="{{ data.size.url }}" draggable="false" />
                                         </div>
                                 </div>
@@ -1469 +1471 @@
                                         <div class="media-progress-bar"><div></div></div>
                                 <# } else if ( 'image' === data.type ) { #>
-                                        <img src="{{ data.url }}" draggable="false" />
+                                        <img src="{{ data.size.url }}" draggable="false" />
                                 <# } else { #>
                                         <img src="{{ data.icon }}" class="icon" draggable="false" />
@@ -1610 +1612 @@
                                         ) );
 
-                                        foreach ( $sizes as $value => $name ) :
-                                                if ( 'full' === $name )
-                                                        continue;
-                                                ?>
-                                                <# if ( data.sizes['<?php echo esc_js( $value ); ?>'] ) { #>
+                                        foreach ( $sizes as $value => $name ) : ?>
+                                                <#
+                                                var size = data.sizes['<?php echo esc_js( $value ); ?>'];
+                                                if ( size ) { #>
                                                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
-                                                                <?php echo esc_html( $name ); ?>
+                                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                                                         </option>
                                                 <# } #>>
-                                        <?php endforeach;
-
-                                        if ( ! empty( $sizes['full'] ) ) : ?>
-                                                <option value="full">
-                                                        <?php echo esc_html( $sizes['full'] ); ?>
-                                                </option>
-                                        <?php endif; ?>
+                                        <?php endforeach; ?>
                                 </select>
                         </label>