WordPress.org
Get WordPress

Make WordPress Core

Changeset 27797


Ignore:
Timestamp:
03/27/2014 10:40:06 PM (11 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.