Changeset 22137

Timestamp:

10/08/2012 11:20:04 PM (14 years ago)

Author:

koopersmith

Message:

Better thumbnail previews in the image editor.

• Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out.
• Various style changes.

see #21390.

Location:

trunk/wp-includes

Files:

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

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

@@ -231 +231 @@
         position: relative;
         float: left;
-        width: 200px;
-        height: 200px;
+        width: 199px;
+        height: 199px;
 
         padding: 0;
         margin: 0 10px 20px;
-        border: 1px solid #dfdfdf;
+        box-shadow:
+                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
+                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
+        background: #eee;
 
         -webkit-user-select: none;
@@ -245 +248 @@
 }
 
-.attachment:hover {
-        border-color: #d54e21;
-}
-
-.attachment.library.selected {
-        border-color: #21759b;
-}
-
 .attachment.library.selected:after {
         content: '\2713';
@@ -277 +272 @@
 }
 
-.attachment img {
-        display: block;
-        max-height: 200px;
-        max-width: 200px;
-
-        /* Vertically center the thumbnails. */
-        position: absolute;
+.attachment .icon,
+.attachment .thumbnail {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin: 0 auto;
+}
+
+/* Vertically center the icons. */
+.attachment .icon {
         top: 50%;
         left: 50%;
@@ -291 +290 @@
         -o-transform:      translate( -50%, -50% );
         transform:         translate( -50%, -50% );
-
-        margin: 0 auto;
-        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.4 );
+}
+
+.attachment .thumbnail,
+.attachment .thumbnail img {
+        -webkit-transition-property: width, height, top, left, right, bottom;
+        -moz-transition-property:    width, height, top, left, right, bottom;
+        -ms-transition-property:     width, height, top, left, right, bottom;
+        -o-transition-property:      width, height, top, left, right, bottom;
+        transition-property:         width, height, top, left, right, bottom;
+        -webkit-transition-duration: 80ms;
+        -moz-transition-duration:    80ms;
+        -ms-transition-duration:     80ms;
+        -o-transition-duration:      80ms;
+        transition-duration:         80ms;
+        -webkit-transition-delay:    125ms;
+        -moz-transition-delay:       125ms;
+        -ms-transition-delay:        125ms;
+        -o-transition-delay:         125ms;
+        transition-delay:            125ms;
+}
+
+.attachment .thumbnail {
+        width: 199px;
+        height: 199px;
+}
+
+.attachment .thumbnail:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+        overflow: hidden;
+}
+
+.attachment.fit .thumbnail:after {
+        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
+}
+
+.attachment .thumbnail img {
+        position: absolute;
 }
 

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

@@ -147 +147 @@
                                 return {
                                         width : maxWidth,
-                                        height: maxWidth * height / width
+                                        height: Math.round( maxWidth * height / width )
                                 };
                         } else if ( 'height' === constraint && height > maxHeight ) {
                                 return {
-                                        width : maxHeight * width / height,
+                                        width : Math.round( maxHeight * width / height ),
                                         height: maxHeight
                                 };

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

@@ -377 +377 @@
 
                 events: {
-                        'click': 'toggleSelection'
+                        'click': 'toggleSelection',
+                        'mouseenter': 'shrink',
+                        'mouseleave': 'expand'
                 },
 
@@ -397 +399 @@
                         var attachment = this.model.toJSON(),
                                 options = {
-                                        thumbnail:   'image' === attachment.type ? attachment.url : attachment.icon,
+                                        icon:        attachment.icon,
                                         uploading:   attachment.uploading,
                                         orientation: attachment.orientation || 'landscape',
@@ -405 +407 @@
                                 };
 
-                        // Use the medium image size if possible. If the medium size
-                        // doesn't exist, then the attachment is too small.
-                        // In that case, use the attachment itself.
-                        if ( attachment.sizes && attachment.sizes.medium ) {
-                                options.orientation = attachment.sizes.medium.orientation;
-                                options.thumbnail   = attachment.sizes.medium.url;
-                        }
+
+                        if ( 'image' === attachment.type )
+                                _.extend( options, this.crop() );
 
                         this.$el.html( this.template( options ) );
@@ -457 +455 @@
                 preventDefault: function( event ) {
                         event.preventDefault();
+                },
+
+                imageSize: function( size ) {
+                        var sizes = this.model.get('sizes');
+
+                        size = size || 'medium';
+
+                        // Use the provided image size if possible.
+                        if ( sizes && sizes[ size ] ) {
+                                return sizes[ size ];
+                        } else {
+                                return {
+                                        url:         this.model.get('url'),
+                                        width:       this.model.get('width'),
+                                        height:      this.model.get('height'),
+                                        orientation: this.model.get('orientation')
+                                };
+                        }
+                },
+
+                crop: function( sizeId ) {
+                        var edge = 199,
+                                size = this.imageSize( sizeId ),
+                                wide, tall;
+
+                        wide = wp.media.fit( _.extend( { maxWidth:  edge }, size ) );
+                        tall = wp.media.fit( _.extend( { maxHeight: edge }, size ) );
+
+                        _.extend( size, wide.width > tall.width ? wide : tall );
+
+                        size.top  = ( edge - size.height ) / 2;
+                        size.left = ( edge - size.width ) / 2;
+                        return size;
+                },
+
+                fit: function( sizeId ) {
+                        var margin = 10,
+                                full = 199,
+                                edge = full - ( margin * 2 ),
+                                size = _.extend( wp.media.fit( _.extend({
+                                        maxWidth:  edge,
+                                        maxHeight: edge
+                                }, this.imageSize( sizeId ) ) ) );
+
+                        size.top  = Math.round( margin + ( edge - size.height ) / 2 );
+                        size.left = Math.round( margin + ( edge - size.width ) / 2 );
+                        return size;
+                },
+
+                shrink: function() {
+                        var size = _.pick( this.fit(), 'top', 'left', 'width', 'height' );
+                        this.$el.addClass('fit');
+                        this.$('.thumbnail').css( size );
+                        this.$('.thumbnail img').css( _.extend( size, { top: 0, left: 0 } ) );
+                },
+
+                expand: function() {
+                        var size = _.pick( this.crop(), 'top', 'left', 'width', 'height' );
+                        this.$el.removeClass('fit');
+                        this.$('.thumbnail img').css( size );
+                        this.$('.thumbnail').css({ top: 0, left: 0, width: 199, height: 199 });
+
                 }
         });

trunk/wp-includes/media.php

@@ -1331 +1331 @@
         <script type="text/html" id="tmpl-attachment">
                 <div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
-                        <% if ( thumbnail ) { %>
-                                <img src="<%- thumbnail %>" draggable="false" />
+                        <% if ( 'image' === type ) { %>
+                                <div class="thumbnail">
+                                        <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
+                                        style="top:<%- top %>px; left:<%- left %>px;" />
+                                </div>
+                        <% } else { %>
+                                <img src="<%- icon %>" class="icon" draggable="false" />
                         <% } %>
 
@@ -1344 +1349 @@
 
                         <% if ( buttons.insert ) { %>
-                                <a class="insert button button-primary button-small" href="#"><?php _e( 'Insert' ); ?></a>
+                                <a class="insert button button-small" href="#"><?php _e( 'Insert' ); ?></a>
                         <% } %>
                 </div>