From aa19c0d66cdefe56146f5b2b83aad78e5cff06e9 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Mon, 8 Oct 2012 23:20:04 +0000 Subject: [PATCH] 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 | 76 ++++++++++++++++++++++++-------- wp-includes/js/media-models.js | 4 +- wp-includes/js/media-views.js | 78 +++++++++++++++++++++++++++++---- wp-includes/media.php | 11 +++-- 4 files changed, 137 insertions(+), 32 deletions(-) diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index d0a0a5a036..0b9e586e8e 100644 --- a/wp-includes/css/media-views.css +++ b/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 { diff --git a/wp-includes/js/media-models.js b/wp-includes/js/media-models.js index b10a5a2eb9..abc0bc73a5 100644 --- a/wp-includes/js/media-models.js +++ b/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 { diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 06936c2f66..34eddb6bc3 100644 --- a/wp-includes/js/media-views.js +++ b/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 }); + } }); diff --git a/wp-includes/media.php b/wp-includes/media.php index f7ec75474d..e36c2176b2 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1330,8 +1330,13 @@ function wp_print_media_templates( $attachment ) {