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.


git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views.css

@@ -230,12 +230,15 @@
 .attachment {
 	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;
 	-moz-user-select:    none;
@@ -244,14 +247,6 @@
 	user-select:         none;
 }
 
-.attachment:hover {
-	border-color: #d54e21;
-}
-
-.attachment.library.selected {
-	border-color: #21759b;
-}
-
 .attachment.library.selected:after {
 	content: '\2713';
 	display: block;
@@ -276,13 +271,17 @@
 	overflow: hidden;
 }
 
-.attachment img {
+.attachment .icon,
+.attachment .thumbnail {
 	display: block;
-	max-height: 200px;
-	max-width: 200px;
-
-	/* Vertically center the thumbnails. */
 	position: absolute;
+	top: 0;
+	left: 0;
+	margin: 0 auto;
+}
+
+/* Vertically center the icons. */
+.attachment .icon {
 	top: 50%;
 	left: 50%;
 	-webkit-transform: translate( -50%, -50% );
@@ -290,9 +289,50 @@
 	-ms-transform:     translate( -50%, -50% );
 	-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;
 }
 
 .attachment .insert {

wp-includes/js/media-models.js

@@ -146,11 +146,11 @@ window.wp = window.wp || {};
 			if ( 'width' === constraint && width > maxWidth ) {
 				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
 				};
 			} else {

wp-includes/js/media-views.js

@@ -376,7 +376,9 @@
 		template:  media.template('attachment'),
 
 		events: {
-			'click': 'toggleSelection'
+			'click': 'toggleSelection',
+			'mouseenter': 'shrink',
+			'mouseleave': 'expand'
 		},
 
 		buttons: {},
@@ -396,7 +398,7 @@
 		render: function() {
 			var attachment = this.model.toJSON(),
 				options = {
-					thumbnail:   'image' === attachment.type ? attachment.url : attachment.icon,
+					icon:        attachment.icon,
 					uploading:   attachment.uploading,
 					orientation: attachment.orientation || 'landscape',
 					type:        attachment.type,
@@ -404,13 +406,9 @@
 					buttons:     this.buttons
 				};
 
-			// 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 ) );
 
@@ -456,6 +454,68 @@
 
 		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 });
+
 		}
 	});
 

wp-includes/media.php

@@ -1330,8 +1330,13 @@ function wp_print_media_templates( $attachment ) {
 
 	<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" />
 			<% } %>
 
 			<% if ( uploading ) { %>
@@ -1343,7 +1348,7 @@ function wp_print_media_templates( $attachment ) {
 			<% } %>
 
 			<% 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>
 		<div class="describe"></div>