WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366-03.patch

File 27366-03.patch, 20.2 KB (added by gcorne, 9 years ago)

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

    diff --git src/wp-includes/css/media-views.css src/wp-includes/css/media-views.css
index 0dab534..609f781 100644
     
    14621462        padding: 16px;
    14631463}
    14641464
     1465.media-frame .imgedit-wrap table {
     1466        width: 100%;
     1467}
     1468
    14651469.media-frame .imgedit-wrap table td {
    14661470        vertical-align: top;
    14671471        padding-top: 0;
    … …  
    15131517        overflow: auto;
    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;
     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;
    15181555}
    15191556
     1557.image-details .image img {
     1558        max-width: 100%;
     1559        max-height: 500px;
     1560}
     1561
     1562
    15201563.media-embed .thumbnail {
    15211564        max-width: 100%;
    15221565        max-height: 200px;
    … …  
    15291572        display: block;
    15301573}
    15311574
    1532 .media-embed .edit-attachment {
    1533         margin-left: 10px;
    1534 }
    1535 
    15361575.media-embed .thumbnail:after {
    15371576        content: '';
    15381577        display: block;
    … …  
    15541593        clear: both;
    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}
    15601620
    … …  
    15701630        margin: 2px 0;
    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
    15811648/* Drag & drop on the editor upload */
    … …  
    17811848                top: 40%;
    17821849        }
    17831850
     1851        .image-details .media-modal {
     1852                left: 30px;
     1853                right: 30px;
     1854        }
     1855
    17841856        .media-selection {
    17851857                min-width: 120px;
    17861858        }
    … …  
    18491921                display: none;
    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;
    18541932                bottom: 0px;
    … …  
    19051983                top: 118px;
    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;
    19101992        }
    … …  
    19392021        }
    19402022
    19412023        /* Full-bleed modal */
    1942         .media-modal {
     2024        .media-modal,
     2025        .image-details .media-modal {
    19432026                position: fixed;
    19442027                top: 0;
    19452028                left: 0;
    … …  
    19752058                padding-bottom: 52px;
    19762059        }
    19772060
     2061        .image-details .column-settings,
     2062        .image-details .column-image {
     2063                float: none;
     2064                width: 100%;
     2065        }
     2066
    19782067        /* Gallery */
    19792068        .media-frame.hide-router .media-frame-content {
    19802069                top: 73px;

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

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
index e543b7a..7bcf5b5 100644
     
    761761                initialize: function( options ) {
    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        });
    766770
    … …  
    26222626
    26232627                },
    26242628
    2625 
    26262629                renderMenu: function( view ) {
    26272630                        var lastState = this.lastState(),
    26282631                                previous = lastState && lastState.id,
    … …  
    26772680                },
    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',
    26852704                                                text:     l10n.replace,
    … …  
    59705989                className: 'image-details',
    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() {
    59765997                        // used in AttachmentDisplay.prototype.updateLinkTo
    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 );
    59826004                },
    … …  
    60016023                                this.model.dfd.done( function() {
    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
    60146039                        return this;
    60156040                },
    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' ) );
    60256050                },
    60266051
     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();
     6065                },
     6066
    60276067                editAttachment: function( event ) {
    60286068                        var editState = this.controller.states.get( 'edit-image' );
    60296069
    … …  
    60326072                                editState.set( 'image', this.model.attachment );
    60336073                                this.controller.setState( 'edit-image' );
    60346074                        }
     6075                },
     6076
     6077                replaceAttachment: function( event ) {
     6078                        event.preventDefault();
     6079                        this.controller.setState( 'replace-image' );
    60356080                }
    60366081        });
    60376082

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

    diff --git src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 893d925..5a67041 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    114114        }
    115115
    116116        function extractImageData( imageNode ) {
    117                 var classes, metadata, captionBlock, caption,
     117                var classes, metadata, captionBlock, caption, link,
    118118                        dom = editor.dom;
    119119
    120120                // default attributes
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    123123                        url: false,
    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 );
     144                metadata.className = imageNode.className;
    138145
    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( ' ' );
     146                classes = metadata.className.split( ' ' );
    145147                tinymce.each( classes, function( name ) {
    146148
    147149                        if ( /^wp-image/.test( name ) ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    157159                        }
    158160                } );
    159161
    160                 // extract caption
     162                // Extract caption
    161163                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    162164
    163165                if ( captionBlock.length ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    173175                        caption = dom.select( 'dd.wp-caption-dd', captionBlock );
    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>$/, '' );
    179181                        }
    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
    187193                return metadata;
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    223229                                nodeToReplace = imageNode.parentNode;
    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 );
    229235                editor.dom.replace( node, nodeToReplace );
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    246252
    247253        function createImageAndLink( imageData, mode ) {
    248254                var classes = [],
    249                         props;
     255                        attrs, linkAttrs;
    250256
    251257                mode = mode ? mode : 'node';
    252258
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    261267                        }
    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
    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 ) );
     303                                return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
    280304                        }
     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        }
    287312
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    817842
    818843                        removeToolbar();
    819844                }
     845
     846                // Key presses will replace the image so we need to remove the toolbar
     847                if ( dom.getAttrib( node, 'data-wp-imgselect' ) ) {
     848                        removeToolbar();
     849                }
    820850        });
    821851
    822852        editor.on( 'mousedown', function( event ) {

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

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
index e127f32..870a711 100644
    function wp_print_media_templates() { 
    634634        </script>
    635635
    636636        <script type="text/html" id="tmpl-image-details">
    637                 <?php // reusing .media-embed to pick up the styles for now ?>
    638637                <div class="media-embed">
    639638                        <div class="embed-media-settings">
    640                                 <div class="thumbnail">
    641                                         <img src="{{ data.model.url }}" draggable="false" />
    642                                 </div>
    643                                 <# if ( data.attachment && window.imageEdit ) { #>
    644                                         <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
    645                                 <# } #>
    646 
    647                                 <div class="setting url">
    648                                         <?php // might want to make the url editable if it isn't an attachment ?>
    649                                         <input type="text" disabled="disabled" value="{{ data.model.url }}" />
    650                                 </div>
     639                                <div class="column-settings">
     640                                        <?php
     641                                        /** This filter is documented in wp-admin/includes/media.php */
     642                                        if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     643                                                <label class="setting caption">
     644                                                        <span><?php _e('Caption'); ?></span>
     645                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     646                                                </label>
     647                                        <?php endif; ?>
    651648
    652                                 <?php
    653                                 /** This filter is documented in wp-admin/includes/media.php */
    654                                 if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
    655                                         <label class="setting caption">
    656                                                 <span><?php _e('Caption'); ?></span>
    657                                                 <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     649                                        <label class="setting alt-text">
     650                                                <span><?php _e('Alternative Text'); ?></span>
     651                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    658652                                        </label>
    659                                 <?php endif; ?>
    660653
    661                                 <label class="setting alt-text">
    662                                         <span><?php _e('Alt Text'); ?></span>
    663                                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    664                                 </label>
     654                                        <div class="advanced">
     655                                                <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     656                                                <div class="hidden">
     657                                                        <label class="setting title-text">
     658                                                                <span><?php _e('Title Attribute'); ?></span>
     659                                                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     660                                                        </label>
     661                                                </div>
     662                                        </div>
    665663
    666                                 <div class="setting align">
    667                                         <span><?php _e('Align'); ?></span>
    668                                         <div class="button-group button-large" data-setting="align">
    669                                                 <button class="button" value="left">
    670                                                         <?php esc_attr_e('Left'); ?>
    671                                                 </button>
    672                                                 <button class="button" value="center">
    673                                                         <?php esc_attr_e('Center'); ?>
    674                                                 </button>
    675                                                 <button class="button" value="right">
    676                                                         <?php esc_attr_e('Right'); ?>
    677                                                 </button>
    678                                                 <button class="button active" value="none">
    679                                                         <?php esc_attr_e('None'); ?>
    680                                                 </button>
     664                                        <div class="setting align">
     665                                                <span><?php _e('Align'); ?></span>
     666                                                <div class="button-group button-large" data-setting="align">
     667                                                        <button class="button" value="left">
     668                                                                <?php esc_attr_e('Left'); ?>
     669                                                        </button>
     670                                                        <button class="button" value="center">
     671                                                                <?php esc_attr_e('Center'); ?>
     672                                                        </button>
     673                                                        <button class="button" value="right">
     674                                                                <?php esc_attr_e('Right'); ?>
     675                                                        </button>
     676                                                        <button class="button active" value="none">
     677                                                                <?php esc_attr_e('None'); ?>
     678                                                        </button>
     679                                                </div>
    681680                                        </div>
    682                                 </div>
    683                                 <div class="setting link-to">
    684                                         <span><?php _e('Link To'); ?></span>
    685                                         <div class="button-group button-large" data-setting="link">
     681
    686682                                        <# if ( data.attachment ) { #>
    687                                                 <button class="button" value="file">
    688                                                         <?php esc_attr_e('Media File'); ?>
    689                                                 </button>
    690                                                 <button class="button" value="post">
    691                                                         <?php esc_attr_e('Attachment Page'); ?>
    692                                                 </button>
    693                                         <# } else { #>
    694                                                 <button class="button" value="file">
    695                                                         <?php esc_attr_e('Image URL'); ?>
    696                                                 </button>
     683                                                <div class="setting size">
     684                                                        <span><?php _e('Size'); ?></span>
     685                                                        <div class="button-group button-large" data-setting="size">
     686                                                        <?php
     687                                                                /** This filter is documented in wp-admin/includes/media.php */
     688                                                                $sizes = apply_filters( 'image_size_names_choose', array(
     689                                                                        'thumbnail' => __('Thumbnail'),
     690                                                                        'medium'    => __('Medium'),
     691                                                                        'large'     => __('Large'),
     692                                                                        'full'      => __('Full Size'),
     693                                                                ) );
     694
     695                                                                foreach ( $sizes as $value => $name ) : ?>
     696                                                                        <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     697                                                                        if ( size ) { #>
     698                                                                                <button class="button" value="<?php echo esc_attr( $value ); ?>">
     699                                                                                        <?php echo esc_html( $name ); ?>
     700                                                                                        </button>
     701                                                                        <# } #>
     702                                                                <?php endforeach; ?>
     703                                                        </div>
     704                                                </div>
    697705                                        <# } #>
    698                                                 <button class="button" value="custom">
    699                                                         <?php esc_attr_e('Custom URL'); ?>
    700                                                 </button>
    701                                                 <button class="button active" value="none">
    702                                                         <?php esc_attr_e('None'); ?>
    703                                                 </button>
     706
     707                                        <div class="setting link-to">
     708                                                <span><?php _e('Link To'); ?></span>
     709                                                <div class="button-group button-large" data-setting="link">
     710                                                <# if ( data.attachment ) { #>
     711                                                        <button class="button" value="file">
     712                                                                <?php esc_attr_e('Media File'); ?>
     713                                                        </button>
     714                                                        <button class="button" value="post">
     715                                                                <?php esc_attr_e('Attachment Page'); ?>
     716                                                        </button>
     717                                                <# } else { #>
     718                                                        <button class="button" value="file">
     719                                                                <?php esc_attr_e('Image URL'); ?>
     720                                                        </button>
     721                                                <# } #>
     722                                                        <button class="button" value="custom">
     723                                                                <?php esc_attr_e('Custom URL'); ?>
     724                                                        </button>
     725                                                        <button class="button active" value="none">
     726                                                                <?php esc_attr_e('None'); ?>
     727                                                        </button>
     728                                                </div>
     729                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    704730                                        </div>
    705                                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    706                                 </div>
    707731
    708                                 <# if ( data.attachment ) { #>
    709                                         <div class="setting size">
    710                                                 <span><?php _e('Size'); ?></span>
    711                                                 <div class="button-group button-large" data-setting="size">
    712                                                 <?php
    713                                                         /** This filter is documented in wp-admin/includes/media.php */
    714                                                         $sizes = apply_filters( 'image_size_names_choose', array(
    715                                                                 'thumbnail' => __('Thumbnail'),
    716                                                                 'medium'    => __('Medium'),
    717                                                                 'large'     => __('Large'),
    718                                                                 'full'      => __('Full Size'),
    719                                                         ) );
    720 
    721                                                         foreach ( $sizes as $value => $name ) : ?>
    722                                                                 <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    723                                                                 if ( size ) { #>
    724                                                                         <button class="button" value="<?php echo esc_attr( $value ); ?>">
    725                                                                                 <?php echo esc_html( $name ); ?>
    726                                                                                 </button>
    727                                                                 <# } #>
    728                                                         <?php endforeach; ?>
     732
     733                                        <div class="link-settings">
     734                                                <div class="setting link-target">
     735                                                        <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>
     736                                                </div>
     737                                                <div class="advanced">
     738                                                        <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     739                                                        <div class="hidden">
     740                                                                <label class="setting link-rel">
     741                                                                        <span><?php _e('Link Rel'); ?></span>
     742                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     743                                                                </label>
     744                                                                <label class="setting link-class-name">
     745                                                                        <span><?php _e('CSS Class'); ?></span>
     746                                                                        <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     747                                                                </label>
     748                                                        </div>
    729749                                                </div>
    730750                                        </div>
    731                                 <# } #>
     751
     752                                </div>
     753                                <div class="column-image">
     754                                        <div class="image">
     755                                                <img src="{{ data.model.url }}" draggable="false" />
     756                                        </div>
     757                                        <# if ( data.attachment && window.imageEdit ) { #>
     758                                                <div class="actions">
     759                                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     760                                                        <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     761                                                </div>
     762                                        <# } #>
     763                                </div>
    732764                        </div>
    733765                </div>
    734766        </script>