WordPress.org

Make WordPress Core

Changeset 22137


Ignore:
Timestamp:
10/08/2012 11:20:04 PM (8 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22125 r22137  
    231231    position: relative;
    232232    float: left;
    233     width: 200px;
    234     height: 200px;
     233    width: 199px;
     234    height: 199px;
    235235
    236236    padding: 0;
    237237    margin: 0 10px 20px;
    238     border: 1px solid #dfdfdf;
     238    box-shadow:
     239        inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
     240        inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
     241    background: #eee;
    239242
    240243    -webkit-user-select: none;
     
    245248}
    246249
    247 .attachment:hover {
    248     border-color: #d54e21;
    249 }
    250 
    251 .attachment.library.selected {
    252     border-color: #21759b;
    253 }
    254 
    255250.attachment.library.selected:after {
    256251    content: '\2713';
     
    277272}
    278273
    279 .attachment img {
    280     display: block;
    281     max-height: 200px;
    282     max-width: 200px;
    283 
    284     /* Vertically center the thumbnails. */
    285     position: absolute;
     274.attachment .icon,
     275.attachment .thumbnail {
     276    display: block;
     277    position: absolute;
     278    top: 0;
     279    left: 0;
     280    margin: 0 auto;
     281}
     282
     283/* Vertically center the icons. */
     284.attachment .icon {
    286285    top: 50%;
    287286    left: 50%;
     
    291290    -o-transform:      translate( -50%, -50% );
    292291    transform:         translate( -50%, -50% );
    293 
    294     margin: 0 auto;
    295     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.4 );
     292}
     293
     294.attachment .thumbnail,
     295.attachment .thumbnail img {
     296    -webkit-transition-property: width, height, top, left, right, bottom;
     297    -moz-transition-property:    width, height, top, left, right, bottom;
     298    -ms-transition-property:     width, height, top, left, right, bottom;
     299    -o-transition-property:      width, height, top, left, right, bottom;
     300    transition-property:         width, height, top, left, right, bottom;
     301    -webkit-transition-duration: 80ms;
     302    -moz-transition-duration:    80ms;
     303    -ms-transition-duration:     80ms;
     304    -o-transition-duration:      80ms;
     305    transition-duration:         80ms;
     306    -webkit-transition-delay:    125ms;
     307    -moz-transition-delay:       125ms;
     308    -ms-transition-delay:        125ms;
     309    -o-transition-delay:         125ms;
     310    transition-delay:            125ms;
     311}
     312
     313.attachment .thumbnail {
     314    width: 199px;
     315    height: 199px;
     316}
     317
     318.attachment .thumbnail:after {
     319    content: '';
     320    display: block;
     321    position: absolute;
     322    top: 0;
     323    left: 0;
     324    right: 0;
     325    bottom: 0;
     326    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
     327    overflow: hidden;
     328}
     329
     330.attachment.fit .thumbnail:after {
     331    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
     332}
     333
     334.attachment .thumbnail img {
     335    position: absolute;
    296336}
    297337
  • trunk/wp-includes/js/media-models.js

    r22126 r22137  
    147147                return {
    148148                    width : maxWidth,
    149                     height: maxWidth * height / width
     149                    height: Math.round( maxWidth * height / width )
    150150                };
    151151            } else if ( 'height' === constraint && height > maxHeight ) {
    152152                return {
    153                     width : maxHeight * width / height,
     153                    width : Math.round( maxHeight * width / height ),
    154154                    height: maxHeight
    155155                };
  • trunk/wp-includes/js/media-views.js

    r22120 r22137  
    377377
    378378        events: {
    379             'click': 'toggleSelection'
     379            'click': 'toggleSelection',
     380            'mouseenter': 'shrink',
     381            'mouseleave': 'expand'
    380382        },
    381383
     
    397399            var attachment = this.model.toJSON(),
    398400                options = {
    399                     thumbnail:   'image' === attachment.type ? attachment.url : attachment.icon,
     401                    icon:        attachment.icon,
    400402                    uploading:   attachment.uploading,
    401403                    orientation: attachment.orientation || 'landscape',
     
    405407                };
    406408
    407             // Use the medium image size if possible. If the medium size
    408             // doesn't exist, then the attachment is too small.
    409             // In that case, use the attachment itself.
    410             if ( attachment.sizes && attachment.sizes.medium ) {
    411                 options.orientation = attachment.sizes.medium.orientation;
    412                 options.thumbnail   = attachment.sizes.medium.url;
    413             }
     409
     410            if ( 'image' === attachment.type )
     411                _.extend( options, this.crop() );
    414412
    415413            this.$el.html( this.template( options ) );
     
    457455        preventDefault: function( event ) {
    458456            event.preventDefault();
     457        },
     458
     459        imageSize: function( size ) {
     460            var sizes = this.model.get('sizes');
     461
     462            size = size || 'medium';
     463
     464            // Use the provided image size if possible.
     465            if ( sizes && sizes[ size ] ) {
     466                return sizes[ size ];
     467            } else {
     468                return {
     469                    url:         this.model.get('url'),
     470                    width:       this.model.get('width'),
     471                    height:      this.model.get('height'),
     472                    orientation: this.model.get('orientation')
     473                };
     474            }
     475        },
     476
     477        crop: function( sizeId ) {
     478            var edge = 199,
     479                size = this.imageSize( sizeId ),
     480                wide, tall;
     481
     482            wide = wp.media.fit( _.extend( { maxWidth:  edge }, size ) );
     483            tall = wp.media.fit( _.extend( { maxHeight: edge }, size ) );
     484
     485            _.extend( size, wide.width > tall.width ? wide : tall );
     486
     487            size.top  = ( edge - size.height ) / 2;
     488            size.left = ( edge - size.width ) / 2;
     489            return size;
     490        },
     491
     492        fit: function( sizeId ) {
     493            var margin = 10,
     494                full = 199,
     495                edge = full - ( margin * 2 ),
     496                size = _.extend( wp.media.fit( _.extend({
     497                    maxWidth:  edge,
     498                    maxHeight: edge
     499                }, this.imageSize( sizeId ) ) ) );
     500
     501            size.top  = Math.round( margin + ( edge - size.height ) / 2 );
     502            size.left = Math.round( margin + ( edge - size.width ) / 2 );
     503            return size;
     504        },
     505
     506        shrink: function() {
     507            var size = _.pick( this.fit(), 'top', 'left', 'width', 'height' );
     508            this.$el.addClass('fit');
     509            this.$('.thumbnail').css( size );
     510            this.$('.thumbnail img').css( _.extend( size, { top: 0, left: 0 } ) );
     511        },
     512
     513        expand: function() {
     514            var size = _.pick( this.crop(), 'top', 'left', 'width', 'height' );
     515            this.$el.removeClass('fit');
     516            this.$('.thumbnail img').css( size );
     517            this.$('.thumbnail').css({ top: 0, left: 0, width: 199, height: 199 });
     518
    459519        }
    460520    });
  • trunk/wp-includes/media.php

    r22120 r22137  
    13311331    <script type="text/html" id="tmpl-attachment">
    13321332        <div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
    1333             <% if ( thumbnail ) { %>
    1334                 <img src="<%- thumbnail %>" draggable="false" />
     1333            <% if ( 'image' === type ) { %>
     1334                <div class="thumbnail">
     1335                    <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
     1336                    style="top:<%- top %>px; left:<%- left %>px;" />
     1337                </div>
     1338            <% } else { %>
     1339                <img src="<%- icon %>" class="icon" draggable="false" />
    13351340            <% } %>
    13361341
     
    13441349
    13451350            <% if ( buttons.insert ) { %>
    1346                 <a class="insert button button-primary button-small" href="#"><?php _e( 'Insert' ); ?></a>
     1351                <a class="insert button button-small" href="#"><?php _e( 'Insert' ); ?></a>
    13471352            <% } %>
    13481353        </div>
Note: See TracChangeset for help on using the changeset viewer.