WordPress.org
Get WordPress

Make WordPress Core

Changeset 27797


Ignore:
Timestamp:
03/27/2014 10:40:06 PM (13 years ago)
Author:
azaozz
Message:

Edit Image modal:

  • Bring back some of the advanced settings.
  • Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit.
  • The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
  • Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.

(updates two PNGs from precommit)
Props gcorne, see #27366

Location:
trunk/src/wp-includes
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/css/media-views.css

    r27773 r27797  
    14631463}
    14641464
     1465.media-frame .imgedit-wrap table {
     1466        width: 100%;
     1467}
     1468
    14651469.media-frame .imgedit-wrap table td {
    14661470        vertical-align: top;
    … …  
    15141518}
    15151519
     1520.image-details .media-modal {
     1521        left: 140px;
     1522        right: 140px;
     1523}
     1524
     1525.image-details .media-frame-menu {
     1526        display: none;
     1527}
     1528
     1529.image-details .media-frame-title,
     1530.image-details .media-frame-content,
     1531.image-details .media-frame-router {
     1532        left: 0;
     1533}
     1534
    15161535.image-details .embed-media-settings {
    15171536        top: 0;
    1518 }
     1537        overflow: visible;
     1538}
     1539
     1540.image-details .column-settings {
     1541        width: 44%;
     1542        float: left;
     1543        margin-right: 20px;
     1544}
     1545
     1546.image-details .column-image {
     1547        width: 53%;
     1548        float: left;
     1549}
     1550
     1551.image-details .column-image:after {
     1552    content: '';
     1553        display: table;
     1554    clear: both;
     1555}
     1556
     1557.image-details .image img {
     1558        max-width: 100%;
     1559        max-height: 500px;
     1560}
     1561
    15191562
    15201563.media-embed .thumbnail {
    … …  
    15301573}
    15311574
    1532 .media-embed .edit-attachment {
    1533         margin-left: 10px;
    1534 }
    1535 
    15361575.media-embed .thumbnail:after {
    15371576        content: '';
    … …  
    15491588.media-embed .setting {
    15501589        width: 100%;
    1551         margin-top: 10px;
     1590        margin: 10px 0;
    15521591        float: left;
    15531592        display: block;
    … …  
    15551594}
    15561595
    1557 .media-embed .setting .hidden {
     1596.image-details .setting {
     1597        float: none;
     1598}
     1599
     1600.image-details .actions {
     1601        margin: 10px 0;
     1602}
     1603
     1604.media-embed .setting input[type="text"],
     1605.media-embed .setting textarea {
     1606        display: block;
     1607        width: 100%;
     1608        max-width: 400px;
     1609        margin: 1px 0;
     1610}
     1611
     1612.image-details .setting input[type="text"],
     1613.image-details .setting textarea {
     1614        max-width: inherit;
     1615}
     1616
     1617.media-embed .setting input.hidden {
    15581618        display: none;
    15591619}
    … …  
    15711631}
    15721632
    1573 .media-embed .setting input[type="text"],
    1574 .media-embed .setting textarea {
    1575         display: block;
    1576         width: 100%;
    1577         max-width: 400px;
    1578         margin: 1px 0;
     1633.media-embed-sidebar {
     1634        position: absolute;
     1635        top: 0;
     1636        left: 440px;
     1637}
     1638
     1639.advanced,
     1640.link-settings {
     1641        margin-top: 10px;
     1642}
     1643
     1644.advanced .hidden {
     1645        display: none;
    15791646}
    15801647
    … …  
    17821849        }
    17831850
     1851        .image-details .media-modal {
     1852                left: 30px;
     1853                right: 30px;
     1854        }
     1855
    17841856        .media-selection {
    17851857                min-width: 120px;
    … …  
    18501922        }
    18511923
     1924        .image-details .media-frame-title {
     1925                display: block;
     1926                top: 0;
     1927                font-size: 14px;
     1928        }
     1929
    18521930        .media-frame-toolbar {
    18531931                position: absolute;
    … …  
    19061984        }
    19071985
     1986        .image-details .media-frame.hide-router .media-frame-content {
     1987                top: 40px;
     1988        }
     1989
    19081990        .media-frame .attachments-browser {
    19091991                padding-bottom: 300px;
    … …  
    19402022
    19412023        /* Full-bleed modal */
    1942         .media-modal {
     2024        .media-modal,
     2025        .image-details .media-modal {
    19432026                position: fixed;
    19442027                top: 0;
    … …  
    19742057        .embed-media-settings {
    19752058                padding-bottom: 52px;
     2059        }
     2060
     2061        .image-details .column-settings,
     2062        .image-details .column-image {
     2063                float: none;
     2064                width: 100%;
    19762065        }
    19772066

  • trunk/src/wp-includes/js/media-views.js

    r27789 r27797  
    762762                        this.image = options.image;
    763763                        media.controller.State.prototype.initialize.apply( this, arguments );
     764                },
     765
     766                activate: function() {
     767                        this.frame.modal.$el.addClass('image-details');
    764768                }
    765769        });
    … …  
    26232627                },
    26242628
    2625 
    26262629                renderMenu: function( view ) {
    26272630                        var lastState = this.lastState(),
    … …  
    26782681
    26792682                renderReplaceImageToolbar: function() {
     2683                        var frame = this,
     2684                                lastState = frame.lastState(),
     2685                                previous = lastState && lastState.id;
     2686
    26802687                        this.toolbar.set( new media.view.Toolbar({
    26812688                                controller: this,
    26822689                                items: {
     2690                                        back: {
     2691                                                text:     l10n.back,
     2692                                                priority: 20,
     2693                                                click:    function() {
     2694                                                        if ( previous ) {
     2695                                                                frame.setState( previous );
     2696                                                        } else {
     2697                                                                frame.close();
     2698                                                        }
     2699                                                }
     2700                                        },
     2701
    26832702                                        replace: {
    26842703                                                style:    'primary',
    … …  
    59715990                template:  media.template('image-details'),
    59725991                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    5973                         'click .edit-attachment': 'editAttachment'
     5992                        'click .edit-attachment': 'editAttachment',
     5993                        'click .replace-attachment': 'replaceAttachment',
     5994                        'click .show-advanced': 'showAdvanced'
    59745995                } ),
    59755996                initialize: function() {
    … …  
    59775998                        this.options.attachment = this.model.attachment;
    59785999                        if ( this.model.attachment ) {
    5979                                 this.listenTo( this.model.attachment, 'change:url', this.updateUrl );
     6000                                this.listenTo( this.model, 'change:url', this.updateUrl );
     6001                                this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    59806002                        }
    59816003                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    … …  
    60026024                                        media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
    60036025                                        self.resetFocus();
     6026                                        self.toggleLinkSettings();
    60046027                                } ).fail( function() {
    60056028                                        self.model.attachment = false;
    60066029                                        media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
    60076030                                        self.resetFocus();
     6031                                        self.toggleLinkSettings();
    60086032                                } );
    60096033                        } else {
    60106034                                media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
    60116035                                setTimeout( function() { self.resetFocus(); }, 10 );
     6036                                self.toggleLinkSettings();
    60126037                        }
    60136038
    … …  
    60166041
    60176042                resetFocus: function() {
    6018                         this.$( '.caption textarea' ).focus();
    6019                         this.$( '.embed-image-settings' ).scrollTop( 0 );
     6043                        this.$( '.link-to-custom' ).blur();
     6044                        this.$( '.embed-media-settings' ).scrollTop( 0 );
    60206045                },
    60216046
    60226047                updateUrl: function() {
    6023                         this.$( '.thumbnail img' ).attr( 'src', this.model.get('url' ) );
     6048                        this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
    60246049                        this.$( '.url' ).val( this.model.get('url' ) );
     6050                },
     6051
     6052                toggleLinkSettings: function() {
     6053                        if ( this.model.get( 'link' ) === 'none' ) {
     6054                                this.$( '.link-settings' ).addClass('hidden');
     6055                        } else {
     6056                                this.$( '.link-settings' ).removeClass('hidden');
     6057                        }
     6058                },
     6059
     6060                showAdvanced: function( event ) {
     6061                        event.preventDefault();
     6062                        $( event.target ).closest('.advanced')
     6063                                .find( '.hidden' ).removeClass( 'hidden' );
     6064                        $( event.target ).remove();
    60256065                },
    60266066
    … …  
    60336073                                this.controller.setState( 'edit-image' );
    60346074                        }
     6075                },
     6076
     6077                replaceAttachment: function( event ) {
     6078                        event.preventDefault();
     6079                        this.controller.setState( 'replace-image' );
    60356080                }
    60366081        });

  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r27786 r27797  
    115115
    116116        function extractImageData( imageNode ) {
    117                 var classes, metadata, captionBlock, caption,
     117                var classes, metadata, captionBlock, caption, link,
    118118                        dom = editor.dom;
    119119
    … …  
    124124                        height: '',
    125125                        width: '',
    126                         size: 'none',
     126                        size: false,
    127127                        caption: '',
    128128                        alt: '',
    129129                        align: 'none',
    130130                        link: false,
    131                         linkUrl: ''
     131                        linkUrl: '',
     132                        linkClassName: '',
     133                        linkTargetBlank: false,
     134                        linkRel: '',
     135                        title: '',
     136                        className: ''
    132137                };
    133138
    134139                metadata.url = dom.getAttrib( imageNode, 'src' );
    135140                metadata.alt = dom.getAttrib( imageNode, 'alt' );
     141                metadata.title = dom.getAttrib( imageNode, 'title' );
    136142                metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    137143                metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
    138 
    139                 //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored
    140                 // when the image and/or caption are updated
    141                 // maybe use getAttribs()
    142 
    143                 // extract meta data from classes (candidate for turning into a method)
    144                 classes = imageNode.className.split( ' ' );
     144                metadata.className = imageNode.className;
     145
     146                classes = metadata.className.split( ' ' );
    145147                tinymce.each( classes, function( name ) {
    146148
    … …  
    158160                } );
    159161
    160                 // extract caption
     162                // Extract caption
    161163                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    162164
    … …  
    174176                        if ( caption.length ) {
    175177                                caption = caption[0];
    176                                 // need to do some more thinking about this
     178
    177179                                metadata.caption = editor.serializer.serialize( caption )
    178180                                        .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
    … …  
    180182                }
    181183
    182                 // extract linkTo
     184                // Extract linkTo
    183185                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
    184                         metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
     186                        link = imageNode.parentNode;
     187                        metadata.linkUrl = dom.getAttrib( link, 'href' );
     188                        metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
     189                        metadata.linkRel = dom.getAttrib( link, 'rel' );
     190                        metadata.linkClassName = link.className;
    185191                }
    186192
    … …  
    224230                        }
    225231                }
    226                 // uniqueId isn't super exciting, so maybe we want to use something else
     232
    227233                uid = editor.dom.uniqueId( 'wp_' );
    228234                editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
    … …  
    247253        function createImageAndLink( imageData, mode ) {
    248254                var classes = [],
    249                         props;
     255                        attrs, linkAttrs;
    250256
    251257                mode = mode ? mode : 'node';
    … …  
    262268                }
    263269
    264                 props = {
     270                attrs = {
    265271                        src: imageData.url,
    266272                        width: imageData.width,
    267273                        height: imageData.height,
    268                         alt: imageData.alt
     274                        alt: imageData.alt,
     275                        title: imageData.title || null
    269276                };
    270277
    271278                if ( classes.length ) {
    272                         props['class'] = classes.join( ' ' );
     279                        attrs['class'] = classes.join( ' ' );
    273280                }
    274281
    275282                if ( imageData.linkUrl ) {
     283
     284                        linkAttrs = {
     285                                href: imageData.linkUrl
     286                        };
     287
     288                        if ( imageData.linkRel ) {
     289                                linkAttrs.rel = imageData.linkRel;
     290                        }
     291
     292                        if ( imageData.linkTargetBlank ) {
     293                                linkAttrs.target = '_blank';
     294                        }
     295
     296                        if ( imageData.linkClassName ) {
     297                                linkAttrs['class'] = imageData.linkClassName;
     298                        }
     299
    276300                        if ( mode === 'node' ) {
    277                                 return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
     301                                return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    278302                        } else if ( mode === 'html' ) {
    279                                 return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
    280                         }
     303                                return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
     304                        }
     305
    281306                } else if ( mode === 'node' ) {
    282                         return editor.dom.create( 'img', props );
     307                        return editor.dom.create( 'img', attrs );
    283308                } else if ( mode === 'html' ) {
    284                         return editor.dom.createHTML( 'img', props );
     309                        return editor.dom.createHTML( 'img', attrs );
    285310                }
    286311        }

  • trunk/src/wp-includes/media-template.php

    r27796 r27797  
    639639
    640640        <script type="text/html" id="tmpl-image-details">
    641                 <?php // reusing .media-embed to pick up the styles for now ?>
    642641                <div class="media-embed">
    643642                        <div class="embed-media-settings">
    644                                 <div class="thumbnail">
    645                                         <img src="{{ data.model.url }}" draggable="false" />
    646                                 </div>
    647                                 <# if ( data.attachment && window.imageEdit ) { #>
    648                                         <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
    649                                 <# } #>
    650 
    651                                 <div class="setting url">
    652                                         <?php // might want to make the url editable if it isn't an attachment ?>
    653                                         <input type="text" disabled="disabled" value="{{ data.model.url }}" />
    654                                 </div>
    655 
    656                                 <?php
    657                                 /** This filter is documented in wp-admin/includes/media.php */
    658                                 if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
    659                                         <label class="setting caption">
    660                                                 <span><?php _e('Caption'); ?></span>
    661                                                 <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     643                                <div class="column-settings">
     644                                        <?php
     645                                        /** This filter is documented in wp-admin/includes/media.php */
     646                                        if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     647                                                <label class="setting caption">
     648                                                        <span><?php _e('Caption'); ?></span>
     649                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     650                                                </label>
     651                                        <?php endif; ?>
     652
     653                                        <label class="setting alt-text">
     654                                                <span><?php _e('Alternative Text'); ?></span>
     655                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    662656                                        </label>
    663                                 <?php endif; ?>
    664 
    665                                 <label class="setting alt-text">
    666                                         <span><?php _e('Alt Text'); ?></span>
    667                                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    668                                 </label>
    669 
    670                                 <div class="setting align">
    671                                         <span><?php _e('Align'); ?></span>
    672                                         <div class="button-group button-large" data-setting="align">
    673                                                 <button class="button" value="left">
    674                                                         <?php esc_attr_e('Left'); ?>
    675                                                 </button>
    676                                                 <button class="button" value="center">
    677                                                         <?php esc_attr_e('Center'); ?>
    678                                                 </button>
    679                                                 <button class="button" value="right">
    680                                                         <?php esc_attr_e('Right'); ?>
    681                                                 </button>
    682                                                 <button class="button active" value="none">
    683                                                         <?php esc_attr_e('None'); ?>
    684                                                 </button>
    685                                         </div>
    686                                 </div>
    687                                 <div class="setting link-to">
    688                                         <span><?php _e('Link To'); ?></span>
    689                                         <div class="button-group button-large" data-setting="link">
    690                                         <# if ( data.attachment ) { #>
    691                                                 <button class="button" value="file">
    692                                                         <?php esc_attr_e('Media File'); ?>
    693                                                 </button>
    694                                                 <button class="button" value="post">
    695                                                         <?php esc_attr_e('Attachment Page'); ?>
    696                                                 </button>
    697                                         <# } else { #>
    698                                                 <button class="button" value="file">
    699                                                         <?php esc_attr_e('Image URL'); ?>
    700                                                 </button>
    701                                         <# } #>
    702                                                 <button class="button" value="custom">
    703                                                         <?php esc_attr_e('Custom URL'); ?>
    704                                                 </button>
    705                                                 <button class="button active" value="none">
    706                                                         <?php esc_attr_e('None'); ?>
    707                                                 </button>
    708                                         </div>
    709                                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    710                                 </div>
    711 
    712                                 <# if ( data.attachment ) { #>
    713                                         <div class="setting size">
    714                                                 <span><?php _e('Size'); ?></span>
    715                                                 <div class="button-group button-large" data-setting="size">
    716                                                 <?php
    717                                                         /** This filter is documented in wp-admin/includes/media.php */
    718                                                         $sizes = apply_filters( 'image_size_names_choose', array(
    719                                                                 'thumbnail' => __('Thumbnail'),
    720                                                                 'medium'    => __('Medium'),
    721                                                                 'large'     => __('Large'),
    722                                                                 'full'      => __('Full Size'),
    723                                                         ) );
    724 
    725                                                         foreach ( $sizes as $value => $name ) : ?>
    726                                                                 <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    727                                                                 if ( size ) { #>
    728                                                                         <button class="button" value="<?php echo esc_attr( $value ); ?>">
    729                                                                                 <?php echo esc_html( $name ); ?>
    730                                                                                 </button>
    731                                                                 <# } #>
    732                                                         <?php endforeach; ?>
     657
     658                                        <div class="setting advanced">
     659                                                <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     660                                                <div class="hidden">
     661                                                        <label class="setting title-text">
     662                                                                <span><?php _e('Title Attribute'); ?></span>
     663                                                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     664                                                        </label>
    733665                                                </div>
    734666                                        </div>
    735                                 <# } #>
     667
     668                                        <div class="setting align">
     669                                                <span><?php _e('Align'); ?></span>
     670                                                <div class="button-group button-large" data-setting="align">
     671                                                        <button class="button" value="left">
     672                                                                <?php esc_attr_e('Left'); ?>
     673                                                        </button>
     674                                                        <button class="button" value="center">
     675                                                                <?php esc_attr_e('Center'); ?>
     676                                                        </button>
     677                                                        <button class="button" value="right">
     678                                                                <?php esc_attr_e('Right'); ?>
     679                                                        </button>
     680                                                        <button class="button active" value="none">
     681                                                                <?php esc_attr_e('None'); ?>
     682                                                        </button>
     683                                                </div>
     684                                        </div>
     685
     686                                        <# if ( data.attachment ) { #>
     687                                                <div class="setting size">
     688                                                        <span><?php _e('Size'); ?></span>
     689                                                        <div class="button-group button-large" data-setting="size">
     690                                                        <?php
     691                                                                /** This filter is documented in wp-admin/includes/media.php */
     692                                                                $sizes = apply_filters( 'image_size_names_choose', array(
     693                                                                        'thumbnail' => __('Thumbnail'),
     694                                                                        'medium'    => __('Medium'),
     695                                                                        'large'     => __('Large'),
     696                                                                        'full'      => __('Full Size'),
     697                                                                ) );
     698
     699                                                                foreach ( $sizes as $value => $name ) : ?>
     700                                                                        <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     701                                                                        if ( size ) { #>
     702                                                                                <button class="button" value="<?php echo esc_attr( $value ); ?>">
     703                                                                                        <?php echo esc_html( $name ); ?>
     704                                                                                        </button>
     705                                                                        <# } #>
     706                                                                <?php endforeach; ?>
     707                                                        </div>
     708                                                </div>
     709                                        <# } #>
     710
     711                                        <div class="setting link-to">
     712                                                <span><?php _e('Link To'); ?></span>
     713                                                <div class="button-group button-large" data-setting="link">
     714                                                <# if ( data.attachment ) { #>
     715                                                        <button class="button" value="file">
     716                                                                <?php esc_attr_e('Media File'); ?>
     717                                                        </button>
     718                                                        <button class="button" value="post">
     719                                                                <?php esc_attr_e('Attachment Page'); ?>
     720                                                        </button>
     721                                                <# } else { #>
     722                                                        <button class="button" value="file">
     723                                                                <?php esc_attr_e('Image URL'); ?>
     724                                                        </button>
     725                                                <# } #>
     726                                                        <button class="button" value="custom">
     727                                                                <?php esc_attr_e('Custom URL'); ?>
     728                                                        </button>
     729                                                        <button class="button active" value="none">
     730                                                                <?php esc_attr_e('None'); ?>
     731                                                        </button>
     732                                                </div>
     733                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
     734                                        </div>
     735
     736
     737                                        <div class="setting link-settings">
     738                                                <div class="setting link-target">
     739                                                        <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
     740                                                </div>
     741                                                <div class="advanced">
     742                                                        <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     743                                                        <div class="hidden">
     744                                                                <label class="setting link-rel">
     745                                                                        <span><?php _e('Link Rel'); ?></span>
     746                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     747                                                                </label>
     748                                                                <label class="setting link-class-name">
     749                                                                        <span><?php _e('CSS Class'); ?></span>
     750                                                                        <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     751                                                                </label>
     752                                                        </div>
     753                                                </div>
     754                                        </div>
     755
     756                                </div>
     757                                <div class="column-image">
     758                                        <div class="image">
     759                                                <img src="{{ data.model.url }}" draggable="false" />
     760                                        </div>
     761                                        <# if ( data.attachment && window.imageEdit ) { #>
     762                                                <div class="actions">
     763                                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     764                                                        <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     765                                                </div>
     766                                        <# } #>
     767                                </div>
    736768                        </div>
    737769                </div>
Note: See TracChangeset for help on using the changeset viewer.