WordPress.org
Get WordPress

Make WordPress Core

Changeset 27898


Ignore:
Timestamp:
04/02/2014 01:53:56 AM (11 years ago)
Author:
azaozz
Message:

Edit Image modal:

  • Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal.
  • Switch to using <select> for the Size and Link To.
  • Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…).
  • On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields.
  • Keep image at top on screen sizes where the two columns are stacked into a single column.
  • Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism.

Props gcorne, see #27366

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

Legend:

Unmodified
Added
Removed

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

    r27842 r27898  
    271271}
    272272
    273 .media-sidebar h3 {
     273.media-sidebar h3,
     274.image-details h3 {
    274275    position: relative;
    275276    font-weight: bold;
    … …  
    16041605    top: 0;
    16051606    overflow: visible;
     1607    padding: 0;
    16061608}
    16071609
    16081610.image-details .column-settings {
    1609     width: 44%;
    1610     float: left;
    1611     margin-right: 20px;
     1611    background: #f3f3f3;
     1612    border-right: 1px solid #ddd;
     1613    min-height: 100%;
     1614    width: 52%;
     1615    position: absolute;
     1616    top: 0;
     1617    left: 0;
     1618}
     1619
     1620.image-details .column-settings h3 {
     1621    margin: 20px;
     1622    padding-top: 20px;
     1623    border-top: 1px solid #ddd;
    16121624}
    16131625
    16141626.image-details .column-image {
    1615     width: 53%;
    1616     float: left;
    1617 }
    1618 
    1619 .image-details .column-image:after {
    1620     content: '';
    1621     display: table;
    1622     clear: both;
     1627    width: 48%;
     1628    position: absolute;
     1629    left: 52%;
     1630    top: 0;
     1631}
     1632
     1633.image-details .image {
     1634    margin: 20px;
    16231635}
    16241636
    … …  
    16281640}
    16291641
     1642.image-details .advanced-toggle {
     1643    font-style: italic;
     1644    color: #666;
     1645    text-decoration: none;
     1646    margin: 20px;
     1647    display: block;
     1648}
     1649
     1650.image-details .advanced-toggle::after {
     1651    font: normal 20px/1 'dashicons';
     1652    speak: none;
     1653    vertical-align: top;
     1654    -webkit-font-smoothing: antialiased;
     1655    -moz-osx-font-smoothing: grayscale;
     1656    content: '\f140';
     1657    display: inline-block;
     1658    margin-top: -2px;
     1659}
     1660
     1661.image-details .advanced-visible .advanced-toggle::after {
     1662    content: '\f142';
     1663    margin-top: 0;
     1664}
    16301665
    16311666.media-embed .thumbnail {
    … …  
    16621697}
    16631698
    1664 .image-details .setting {
     1699.image-details .embed-media-settings .setting {
    16651700    float: none;
     1701    width: auto;
    16661702}
    16671703
    16681704.image-details .actions {
    16691705    margin: 10px 0;
     1706}
     1707
     1708.image-details .hidden {
     1709    display: none;
    16701710}
    16711711
    … …  
    16781718}
    16791719
    1680 .image-details .setting input[type="text"],
    1681 .image-details .setting textarea {
     1720.image-details .embed-media-settings .setting input[type="text"],
     1721.image-details .embed-media-settings .setting textarea {
    16821722    max-width: inherit;
     1723    width: 70%;
     1724}
     1725
     1726.image-details .embed-media-settings .setting input.link-to-custom,
     1727.image-details .embed-media-settings .link-target {
     1728    margin-left: 27%;
     1729    width: 70%;
     1730}
     1731
     1732.image-details .embed-media-settings .link-target {
     1733    margin-top: 24px;
    16831734}
    16841735
    … …  
    16951746}
    16961747
     1748.image-details .embed-media-settings .setting span {
     1749    float: left;
     1750    width: 25%;
     1751    text-align: right;
     1752    margin: 8px 1% 0 1%;
     1753    line-height: 1.1;
     1754}
     1755
    16971756.media-embed .setting .button-group {
    16981757    margin: 2px 0;
    … …  
    17081767.link-settings {
    17091768    margin-top: 10px;
    1710 }
    1711 
    1712 .advanced .hidden {
    1713     display: none;
    17141769}
    17151770
    … …  
    19311986    }
    19321987
     1988    .image-details .embed-media-settings .setting {
     1989        margin: 20px;
     1990    }
     1991
     1992    .image-details .embed-media-settings .setting span {
     1993        float: none;
     1994        text-align: left;
     1995        width: 100%;
     1996        margin-bottom: 4px;
     1997    }
     1998
     1999    .image-details .embed-media-settings .setting input.link-to-custom,
     2000    .image-details .embed-media-settings .setting input[type="text"],
     2001    .image-details .embed-media-settings .setting textarea {
     2002        width: 100%;
     2003        margin-left: 0;
     2004    }
     2005
     2006    .image-details .link-target {
     2007        width: 100%;
     2008    }
     2009
    19332010    .media-selection {
    19342011        min-width: 120px;
    … …  
    21382215    .image-details .column-settings,
    21392216    .image-details .column-image {
    2140         float: none;
     2217        position: relative;
     2218        padding: 10px 0 20px 0;
     2219        left: 0;
    21412220        width: 100%;
    2142     }
     2221        min-height: inherit;
     2222    }
     2223
    21432224
    21442225    /* Gallery */

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

    r27841 r27898  
    60606060            'click .edit-attachment': 'editAttachment',
    60616061            'click .replace-attachment': 'replaceAttachment',
    6062             'click .show-advanced': 'showAdvanced'
     6062            'click .advanced-toggle': 'toggleAdvanced'
    60636063        } ),
    60646064        initialize: function() {
    60656065            // used in AttachmentDisplay.prototype.updateLinkTo
    60666066            this.options.attachment = this.model.attachment;
    6067             if ( this.model.attachment ) {
    6068                 this.listenTo( this.model, 'change:url', this.updateUrl );
    6069                 this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    6070             }
     6067            this.listenTo( this.model, 'change:url', this.updateUrl );
     6068            this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    60716069            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    60726070        },
    … …  
    61146112
    61156113        updateUrl: function() {
    6116             this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
    6117             this.$( '.url' ).val( this.model.get('url' ) );
     6114            this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
     6115            this.$( '.url' ).val( this.model.get( 'url' ) );
    61186116        },
    61196117
    … …  
    61266124        },
    61276125
    6128         showAdvanced: function( event ) {
     6126        toggleAdvanced: function( event ) {
     6127            var $advanced = $( event.target ).closest( '.advanced' );
    61296128            event.preventDefault();
    6130             $( event.target ).closest('.advanced')
    6131                 .find( '.hidden' ).removeClass( 'hidden' );
    6132             $( event.target ).remove();
     6129            if ( $advanced.hasClass('advanced-visible') ) {
     6130                $advanced.removeClass('advanced-visible');
     6131                $advanced.find('div').addClass('hidden');
     6132            } else {
     6133                $advanced.addClass('advanced-visible');
     6134                $advanced.find('div').removeClass('hidden');
     6135            }
    61336136        },
    61346137

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

    r27797 r27898  
    115115
    116116    function extractImageData( imageNode ) {
    117         var classes, metadata, captionBlock, caption, link,
     117        var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
    118118            dom = editor.dom;
    119119
    … …  
    128128            alt: '',
    129129            align: 'none',
     130            extraClasses: '',
    130131            link: false,
    131132            linkUrl: '',
    … …  
    133134            linkTargetBlank: false,
    134135            linkRel: '',
    135             title: '',
    136             className: ''
     136            title: ''
    137137        };
    138138
    … …  
    140140        metadata.alt = dom.getAttrib( imageNode, 'alt' );
    141141        metadata.title = dom.getAttrib( imageNode, 'title' );
    142         metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    143         metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
    144         metadata.className = imageNode.className;
    145 
    146         classes = metadata.className.split( ' ' );
     142
     143        width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
     144        height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
     145
     146        metadata.width = parseInt( width, 10 );
     147        metadata.height = parseInt( height, 10 );
     148
     149        classes = tinymce.explode( imageNode.className, ' ' );
     150        extraClasses = [];
     151
    147152        tinymce.each( classes, function( name ) {
    148153
    149154            if ( /^wp-image/.test( name ) ) {
    150155                metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
    151             }
    152 
    153             if ( /^align/.test( name ) ) {
     156            } else if ( /^align/.test( name ) ) {
    154157                metadata.align = name.replace( 'align', '' );
    155             }
    156 
    157             if ( /^size/.test( name ) ) {
     158            } else if ( /^size/.test( name ) ) {
    158159                metadata.size = name.replace( 'size-', '' );
    159             }
     160            } else {
     161                extraClasses.push( name );
     162            }
     163
    160164        } );
     165
     166        metadata.extraClasses = extraClasses.join( ' ' );
    161167
    162168        // Extract caption
    … …  
    195201
    196202    function updateImage( imageNode, imageData ) {
    197         var className, width, node, html, captionNode, nodeToReplace, uid, editedImg, id;
    198 
    199         if ( imageData.caption ) {
    200 
    201             html = createImageAndLink( imageData, 'html' );
    202 
    203             width = parseInt( imageData.width, 10 );
    204 
    205             if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
    206                 width += 10;
    207             }
    208 
    209             className = 'align' + imageData.align;
    210             id = imageData.attachment_id ? 'id="attachment_'+ imageData.attachment_id +'" ' : '';
    211 
    212             // should create a new function for generating the caption markup
    213             html =  '<dl ' + id + 'class="wp-caption '+ className +'" style="width: '+ width +'px">' +
    214                 '<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
    215 
    216             node = editor.dom.create( 'div', { 'class': 'mceTemp' }, html );
    217         } else {
    218             node = createImageAndLink( imageData, 'node' );
    219         }
    220 
    221         nodeToReplace = imageNode;
    222 
    223         captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
    224 
    225         if ( captionNode ) {
    226             nodeToReplace = captionNode;
    227         } else {
    228             if ( imageNode.parentNode.nodeName === 'A' ) {
    229                 nodeToReplace = imageNode.parentNode;
    230             }
    231         }
    232 
    233         uid = editor.dom.uniqueId( 'wp_' );
    234         editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
    235         editor.dom.replace( node, nodeToReplace );
    236 
    237         // find the updated node
    238         node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
    239 
    240         editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
    241 
    242         editor.nodeChanged();
    243 
    244         editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
    245 
    246         if ( editedImg ) {
    247             editor.selection.select( editedImg );
    248             // refresh toolbar
    249             addToolbar( editedImg );
    250         }
    251     }
    252 
    253     function createImageAndLink( imageData, mode ) {
    254         var classes = [],
    255             attrs, linkAttrs;
    256 
    257         mode = mode ? mode : 'node';
     203        var classes, className, width, node, html, parent, wrap,
     204            captionNode, dd, dl, id, attrs, linkAttrs,
     205            dom = editor.dom;
     206
     207        classes = tinymce.explode( imageData.extraClasses, ' ' );
     208
     209        if ( ! classes ) {
     210            classes = [];
     211        }
    258212
    259213        if ( ! imageData.caption ) {
    … …  
    270224        attrs = {
    271225            src: imageData.url,
    272             width: imageData.width,
    273             height: imageData.height,
     226            width: imageData.width || null,
     227            height: imageData.height || null,
    274228            alt: imageData.alt,
    275             title: imageData.title || null
     229            title: imageData.title || null,
     230            'class': classes.join( ' ' ) || null
    276231        };
    277232
    278         if ( classes.length ) {
    279             attrs['class'] = classes.join( ' ' );
    280         }
    281 
    282         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 
    300             if ( mode === 'node' ) {
    301                 return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    302             } else if ( mode === 'html' ) {
    303                 return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    304             }
    305 
    306         } else if ( mode === 'node' ) {
    307             return editor.dom.create( 'img', attrs );
    308         } else if ( mode === 'html' ) {
    309             return editor.dom.createHTML( 'img', attrs );
    310         }
     233        dom.setAttribs( imageNode, attrs );
     234
     235        linkAttrs = {
     236            href: imageData.linkUrl,
     237            rel: imageData.linkRel || null,
     238            target: imageData.linkTargetBlank ? '_blank': null,
     239            'class': imageData.linkClassName || null
     240        };
     241
     242        if ( imageNode.parentNode.nodeName === 'A' ) {
     243            if ( imageData.linkUrl ) {
     244                dom.setAttribs( imageNode.parentNode, linkAttrs );
     245            } else {
     246                dom.remove( imageNode.parentNode, true );
     247            }
     248        } else if ( imageData.linkUrl ) {
     249            html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
     250            dom.outerHTML( imageNode, html );
     251        }
     252
     253        captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
     254
     255        if ( imageNode.parentNode.nodeName === 'A' ) {
     256            node = imageNode.parentNode;
     257        } else {
     258            node = imageNode;
     259        }
     260
     261        if ( imageData.caption ) {
     262            width = parseInt( imageData.width, 10 );
     263            id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
     264            className = 'wp-caption align' + imageData.align;
     265
     266            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     267                width += 10;
     268            }
     269
     270            if ( captionNode ) {
     271                dl = dom.select( 'dl.wp-caption', captionNode );
     272
     273                if ( dl.length ) {
     274                    dom.setAttribs( dl, {
     275                        id: id,
     276                        'class': className,
     277                        style: 'width: ' + width + 'px'
     278                    } );
     279                }
     280
     281                dd = dom.select( '.wp-caption-dd', captionNode );
     282
     283                if ( dd.length ) {
     284                    dom.setHTML( dd[0], imageData.caption );
     285                }
     286
     287            } else {
     288                id = id ? 'id="'+ id +'" ' : '';
     289
     290                // should create a new function for generating the caption markup
     291                html =  '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
     292                    '<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
     293
     294                if ( parent = dom.getParent( node, 'p' ) ) {
     295                    wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
     296                    dom.insertAfter( wrap, parent );
     297                    dom.remove( node );
     298
     299                    if ( dom.isEmpty( parent ) ) {
     300                        dom.remove( parent );
     301                    }
     302                } else {
     303                    dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
     304                }
     305            }
     306        } else if ( captionNode ) {
     307            // Remove the caption wrapper and place the image in new paragraph
     308            parent = dom.create( 'p' );
     309            captionNode.parentNode.insertBefore( parent, captionNode );
     310            parent.appendChild( node );
     311            dom.remove( captionNode );
     312        }
     313
     314        editor.nodeChanged();
     315        // refresh the toolbar
     316        addToolbar( imageNode );
    311317    }
    312318

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

    r27868 r27898  
    642642        <div class="media-embed">
    643643            <div class="embed-media-settings">
     644                <div class="column-image">
     645                    <div class="image">
     646                        <img src="{{ data.model.url }}" draggable="false" />
     647
     648                        <# if ( data.attachment && window.imageEdit ) { #>
     649                            <div class="actions">
     650                                <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     651                                <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     652                            </div>
     653                        <# } #>
     654                    </div>
     655                </div>
    644656                <div class="column-settings">
    645657                    <?php
    … …  
    657669                    </label>
    658670
    659                     <div class="setting advanced">
    660                         <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
    661                         <div class="hidden">
    662                             <label class="setting title-text">
    663                                 <span><?php _e('Title Attribute'); ?></span>
    664                                 <input type="text" data-setting="title" value="{{ data.model.title }}" />
    665                             </label>
    666                         </div>
    667                     </div>
    668 
     671                    <h3><?php _e( 'Display Settings' ); ?></h3>
    669672                    <div class="setting align">
    670673                        <span><?php _e('Align'); ?></span>
    … …  
    686689
    687690                    <# if ( data.attachment ) { #>
    688                         <div class="setting size">
    689                             <span><?php _e('Size'); ?></span>
    690                             <div class="button-group button-large" data-setting="size">
    691                             <?php
    692                                 /** This filter is documented in wp-admin/includes/media.php */
    693                                 $sizes = apply_filters( 'image_size_names_choose', array(
    694                                     'thumbnail' => __('Thumbnail'),
    695                                     'medium'    => __('Medium'),
    696                                     'large'     => __('Large'),
    697                                     'full'      => __('Full Size'),
    698                                 ) );
    699 
    700                                 foreach ( $sizes as $value => $name ) : ?>
    701                                     <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    702                                     if ( size ) { #>
    703                                         <button class="button" value="<?php echo esc_attr( $value ); ?>">
    704                                             <?php echo esc_html( $name ); ?>
    705                                             </button>
    706                                     <# } #>
    707                                 <?php endforeach; ?>
    708                             </div>
    709                         </div>
     691                        <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
     692                            <label class="setting">
     693                                <span><?php _e('Size'); ?></span>
     694                                <select class="size" name="size"
     695                                    data-setting="size"
     696                                    <# if ( data.userSettings ) { #>
     697                                        data-user-setting="imgsize"
     698                                    <# } #>>
     699                                    <?php
     700                                    /** This filter is documented in wp-admin/includes/media.php */
     701                                    $sizes = apply_filters( 'image_size_names_choose', array(
     702                                        'thumbnail' => __('Thumbnail'),
     703                                        'medium'    => __('Medium'),
     704                                        'large'     => __('Large'),
     705                                        'full'      => __('Full Size'),
     706                                    ) );
     707
     708                                    foreach ( $sizes as $value => $name ) : ?>
     709                                        <#
     710                                        var size = data.sizes['<?php echo esc_js( $value ); ?>'];
     711                                        if ( size ) { #>
     712                                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
     713                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
     714                                            </option>
     715                                        <# } #>
     716                                    <?php endforeach; ?>
     717                                </select>
     718                            </label>
     719                        <# } #>
    710720                    <# } #>
    711721
    712722                    <div class="setting link-to">
    713723                        <span><?php _e('Link To'); ?></span>
    714                         <div class="button-group button-large" data-setting="link">
     724                        <select data-setting="link">
    715725                        <# if ( data.attachment ) { #>
    716                             <button class="button" value="file">
     726                            <option value="file">
    717727                                <?php esc_attr_e('Media File'); ?>
    718                             </button>
    719                             <button class="button" value="post">
     728                            </option>
     729                            <option value="post">
    720730                                <?php esc_attr_e('Attachment Page'); ?>
    721                             </button>
     731                            </option>
    722732                        <# } else { #>
    723                             <button class="button" value="file">
     733                            <option value="file">
    724734                                <?php esc_attr_e('Image URL'); ?>
    725                             </button>
     735                            </option>
    726736                        <# } #>
    727                             <button class="button" value="custom">
     737                            <option value="custom">
    728738                                <?php esc_attr_e('Custom URL'); ?>
    729                             </button>
    730                             <button class="button active" value="none">
     739                            </option>
     740                            <option value="none">
    731741                                <?php esc_attr_e('None'); ?>
    732                             </button>
    733                         </div>
     742                            </option>
     743                        </select>
    734744                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
    735745                    </div>
    736 
    737 
    738                     <div class="setting link-settings">
    739                         <div class="setting link-target">
    740                             <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>
    741                         </div>
    742                         <div class="advanced">
    743                             <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
    744                             <div class="hidden">
    745                                 <label class="setting link-rel">
    746                                     <span><?php _e('Link Rel'); ?></span>
    747                                     <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
    748                                 </label>
    749                                 <label class="setting link-class-name">
    750                                     <span><?php _e('CSS Class'); ?></span>
    751                                     <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
    752                                 </label>
     746                    <div class="advanced">
     747                        <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
     748                        <div class="hidden">
     749                            <label class="setting title-text">
     750                                <span><?php _e('Image Title Attribute'); ?></span>
     751                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     752                            </label>
     753                            <label class="setting extra-classes">
     754                                <span><?php _e('Image CSS Class'); ?></span>
     755                                <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
     756                            </label>
     757                            <div class="setting link-target">
     758                                <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>
    753759                            </div>
     760                            <label class="setting link-rel">
     761                                <span><?php _e('Link Rel'); ?></span>
     762                                <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     763                            </label>
     764                            <label class="setting link-class-name">
     765                                <span><?php _e('Link CSS Class'); ?></span>
     766                                <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     767                            </label>
    754768                        </div>
    755769                    </div>
    756 
    757                 </div>
    758                 <div class="column-image">
    759                     <div class="image">
    760                         <img src="{{ data.model.url }}" draggable="false" />
    761                     </div>
    762                     <# if ( data.attachment && window.imageEdit ) { #>
    763                         <div class="actions">
    764                             <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
    765                             <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
    766                         </div>
    767                     <# } #>
    768770                </div>
    769771            </div>
Note: See TracChangeset for help on using the changeset viewer.