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
This commit is contained in:
parent
1617e5ebdf
commit
aa19c0d66c
|
@ -230,12 +230,15 @@
|
||||||
.attachment {
|
.attachment {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
width: 200px;
|
width: 199px;
|
||||||
height: 200px;
|
height: 199px;
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 10px 20px;
|
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;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -244,14 +247,6 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachment:hover {
|
|
||||||
border-color: #d54e21;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment.library.selected {
|
|
||||||
border-color: #21759b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment.library.selected:after {
|
.attachment.library.selected:after {
|
||||||
content: '\2713';
|
content: '\2713';
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -276,13 +271,17 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachment img {
|
.attachment .icon,
|
||||||
|
.attachment .thumbnail {
|
||||||
display: block;
|
display: block;
|
||||||
max-height: 200px;
|
|
||||||
max-width: 200px;
|
|
||||||
|
|
||||||
/* Vertically center the thumbnails. */
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertically center the icons. */
|
||||||
|
.attachment .icon {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-webkit-transform: translate( -50%, -50% );
|
-webkit-transform: translate( -50%, -50% );
|
||||||
|
@ -290,9 +289,50 @@
|
||||||
-ms-transform: translate( -50%, -50% );
|
-ms-transform: translate( -50%, -50% );
|
||||||
-o-transform: translate( -50%, -50% );
|
-o-transform: translate( -50%, -50% );
|
||||||
transform: translate( -50%, -50% );
|
transform: translate( -50%, -50% );
|
||||||
|
}
|
||||||
|
|
||||||
margin: 0 auto;
|
.attachment .thumbnail,
|
||||||
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.4 );
|
.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 {
|
.attachment .insert {
|
||||||
|
|
|
@ -146,11 +146,11 @@ window.wp = window.wp || {};
|
||||||
if ( 'width' === constraint && width > maxWidth ) {
|
if ( 'width' === constraint && width > maxWidth ) {
|
||||||
return {
|
return {
|
||||||
width : maxWidth,
|
width : maxWidth,
|
||||||
height: maxWidth * height / width
|
height: Math.round( maxWidth * height / width )
|
||||||
};
|
};
|
||||||
} else if ( 'height' === constraint && height > maxHeight ) {
|
} else if ( 'height' === constraint && height > maxHeight ) {
|
||||||
return {
|
return {
|
||||||
width : maxHeight * width / height,
|
width : Math.round( maxHeight * width / height ),
|
||||||
height: maxHeight
|
height: maxHeight
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -376,7 +376,9 @@
|
||||||
template: media.template('attachment'),
|
template: media.template('attachment'),
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'click': 'toggleSelection'
|
'click': 'toggleSelection',
|
||||||
|
'mouseenter': 'shrink',
|
||||||
|
'mouseleave': 'expand'
|
||||||
},
|
},
|
||||||
|
|
||||||
buttons: {},
|
buttons: {},
|
||||||
|
@ -396,7 +398,7 @@
|
||||||
render: function() {
|
render: function() {
|
||||||
var attachment = this.model.toJSON(),
|
var attachment = this.model.toJSON(),
|
||||||
options = {
|
options = {
|
||||||
thumbnail: 'image' === attachment.type ? attachment.url : attachment.icon,
|
icon: attachment.icon,
|
||||||
uploading: attachment.uploading,
|
uploading: attachment.uploading,
|
||||||
orientation: attachment.orientation || 'landscape',
|
orientation: attachment.orientation || 'landscape',
|
||||||
type: attachment.type,
|
type: attachment.type,
|
||||||
|
@ -404,13 +406,9 @@
|
||||||
buttons: this.buttons
|
buttons: this.buttons
|
||||||
};
|
};
|
||||||
|
|
||||||
// Use the medium image size if possible. If the medium size
|
|
||||||
// doesn't exist, then the attachment is too small.
|
if ( 'image' === attachment.type )
|
||||||
// In that case, use the attachment itself.
|
_.extend( options, this.crop() );
|
||||||
if ( attachment.sizes && attachment.sizes.medium ) {
|
|
||||||
options.orientation = attachment.sizes.medium.orientation;
|
|
||||||
options.thumbnail = attachment.sizes.medium.url;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$el.html( this.template( options ) );
|
this.$el.html( this.template( options ) );
|
||||||
|
|
||||||
|
@ -456,6 +454,68 @@
|
||||||
|
|
||||||
preventDefault: function( event ) {
|
preventDefault: function( event ) {
|
||||||
event.preventDefault();
|
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 });
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1330,8 +1330,13 @@ function wp_print_media_templates( $attachment ) {
|
||||||
|
|
||||||
<script type="text/html" id="tmpl-attachment">
|
<script type="text/html" id="tmpl-attachment">
|
||||||
<div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
|
<div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
|
||||||
<% if ( thumbnail ) { %>
|
<% if ( 'image' === type ) { %>
|
||||||
<img src="<%- thumbnail %>" draggable="false" />
|
<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 ) { %>
|
<% if ( uploading ) { %>
|
||||||
|
@ -1343,7 +1348,7 @@ function wp_print_media_templates( $attachment ) {
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
<% if ( buttons.insert ) { %>
|
<% 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>
|
||||||
<div class="describe"></div>
|
<div class="describe"></div>
|
||||||
|
|
Loading…
Reference in New Issue