Changeset 22137

Timestamp:

10/08/2012 11:20:04 PM (12 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>