WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366-02.patch

File 27366-02.patch, 19.3 KB (added by gcorne, 11 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 f3e03ff..b83fdf2 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 */
    … …  
    17801847                top: 40%;
    17811848        }
    17821849
     1850        .image-details .media-modal {
     1851                left: 30px;
     1852                right: 30px;
     1853        }
     1854
    17831855        .media-selection {
    17841856                min-width: 120px;
    17851857        }
    … …  
    18481920                display: none;
    18491921        }
    18501922
     1923        .image-details .media-frame-title {
     1924                display: block;
     1925                top: 0;
     1926                font-size: 14px;
     1927        }
     1928
    18511929        .media-frame-toolbar {
    18521930                position: absolute;
    18531931                bottom: 0px;
    … …  
    19041982                top: 118px;
    19051983        }
    19061984
     1985        .image-details .media-frame.hide-router .media-frame-content {
     1986                top: 40px;
     1987        }
     1988
    19071989        .media-frame .attachments-browser {
    19081990                padding-bottom: 300px;
    19091991        }
    … …  
    19382020        }
    19392021
    19402022        /* Full-bleed modal */
    1941         .media-modal {
     2023        .media-modal,
     2024        .image-details .media-modal {
    19422025                position: fixed;
    19432026                top: 0;
    19442027                left: 0;
    … …  
    19742057                padding-bottom: 52px;
    19752058        }
    19762059
     2060        .image-details .column-settings,
     2061        .image-details .column-image {
     2062                float: none;
     2063                width: 100%;
     2064        }
     2065
    19772066        /* Gallery */
    19782067        .media-frame.hide-router .media-frame-content {
    19792068                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 be0ee8f..d8cb86a 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
    … …  
    25562560
    25572561                },
    25582562
    2559 
    25602563                renderMenu: function( view ) {
    25612564                        var lastState = this.lastState(),
    25622565                                previous = lastState && lastState.id,
    … …  
    26112614                },
    26122615
    26132616                renderReplaceImageToolbar: function() {
     2617                        var frame = this,
     2618                                lastState = frame.lastState(),
     2619                                previous = lastState && lastState.id;
     2620
    26142621                        this.toolbar.set( new media.view.Toolbar({
    26152622                                controller: this,
    26162623                                items: {
     2624                                        back: {
     2625                                                text:     l10n.back,
     2626                                                priority: 20,
     2627                                                click:    function() {
     2628                                                        if ( previous ) {
     2629                                                                frame.setState( previous );
     2630                                                        } else {
     2631                                                                frame.close();
     2632                                                        }
     2633                                                }
     2634                                        },
     2635
    26172636                                        replace: {
    26182637                                                style:    'primary',
    26192638                                                text:     l10n.replace,
    … …  
    59045923                className: 'image-details',
    59055924                template:  media.template('image-details'),
    59065925                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    5907                         'click .edit-attachment': 'editAttachment'
     5926                        'click .edit-attachment': 'editAttachment',
     5927                        'click .replace-attachment': 'replaceAttachment',
     5928                        'click .show-advanced': 'showAdvanced'
    59085929                } ),
    59095930                initialize: function() {
    59105931                        // used in AttachmentDisplay.prototype.updateLinkTo
    59115932                        this.options.attachment = this.model.attachment;
    59125933                        if ( this.model.attachment ) {
    5913                                 this.listenTo( this.model.attachment, 'change:url', this.updateUrl );
     5934                                this.listenTo( this.model, 'change:url', this.updateUrl );
     5935                                this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
    59145936                        }
    59155937                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    59165938                },
    … …  
    59455967                },
    59465968
    59475969                resetFocus: function() {
    5948                         this.$( '.caption textarea' ).focus();
    5949                         this.$( '.embed-image-settings' ).scrollTop( 0 );
     5970                        this.$( '.link-to-custom' ).blur();
     5971                        this.$( '.embed-media-settings' ).scrollTop( 0 );
    59505972                },
    59515973
    59525974                updateUrl: function() {
    5953                         this.$( '.thumbnail img' ).attr( 'src', this.model.get('url' ) );
     5975                        this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
    59545976                        this.$( '.url' ).val( this.model.get('url' ) );
    59555977                },
    59565978
     5979                toggleLinkSettings: function() {
     5980                        if ( this.model.get( 'link' ) === 'none' ) {
     5981                                this.$( '.link-settings' ).addClass('hidden');
     5982                        } else {
     5983                                this.$( '.link-settings' ).removeClass('hidden');
     5984                        }
     5985                },
     5986
     5987                showAdvanced: function( event ) {
     5988                        event.preventDefault();
     5989                        $( event.target ).closest('.advanced')
     5990                                .find( '.hidden' ).removeClass( 'hidden' );
     5991                        $( event.target ).remove();
     5992
     5993
     5994                },
     5995
    59575996                editAttachment: function( event ) {
    59585997                        var editState = this.controller.state( 'edit-image' );
    59595998
    … …  
    59626001                                editState.set( 'image', this.model.attachment );
    59636002                                this.controller.setState( 'edit-image' );
    59646003                        }
     6004                },
     6005
     6006                replaceAttachment: function( event ) {
     6007                        event.preventDefault();
     6008                        this.controller.setState( 'replace-image' );
    59656009                }
    59666010        });
    59676011

  • 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 2d2e587..f0a5807 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    112112        }
    113113
    114114        function extractImageData( imageNode ) {
    115                 var classes, metadata, captionBlock, caption,
     115                var classes, metadata, captionBlock, caption, link,
    116116                        dom = editor.dom;
    117117
    118118                // default attributes
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    121121                        url: false,
    122122                        height: '',
    123123                        width: '',
    124                         size: 'none',
     124                        size: false,
    125125                        caption: '',
    126126                        alt: '',
    127127                        align: 'none',
    128128                        link: false,
    129                         linkUrl: ''
     129                        linkUrl: '',
     130                        linkClassName: '',
     131                        linkTargetBlank: false,
     132                        linkRel: '',
     133                        title: '',
     134                        className: ''
    130135                };
    131136
    132137                metadata.url = dom.getAttrib( imageNode, 'src' );
    133138                metadata.alt = dom.getAttrib( imageNode, 'alt' );
     139                metadata.title = dom.getAttrib( imageNode, 'title' );
    134140                metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    135141                metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
     142                metadata.className = imageNode.className;
    136143
    137                 //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored
    138                 // when the image and/or caption are updated
    139                 // maybe use getAttribs()
    140 
    141                 // extract meta data from classes (candidate for turning into a method)
    142                 classes = imageNode.className.split( ' ' );
     144                classes = metadata.className.split( ' ' );
    143145                tinymce.each( classes, function( name ) {
    144146
    145147                        if ( /^wp-image/.test( name ) ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    155157                        }
    156158                } );
    157159
    158                 // extract caption
     160                // Extract caption
    159161                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    160162
    161163                if ( captionBlock.length ) {
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    171173                        caption = dom.select( 'dd.wp-caption-dd', captionBlock );
    172174                        if ( caption.length ) {
    173175                                caption = caption[0];
    174                                 // need to do some more thinking about this
     176
    175177                                metadata.caption = editor.serializer.serialize( caption )
    176178                                        .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
    177179                        }
    178180                }
    179181
    180                 // extract linkTo
     182                // Extract linkTo
    181183                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
    182                         metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
     184                        link = imageNode.parentNode;
     185                        metadata.linkUrl = dom.getAttrib( link, 'href' );
     186                        metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
     187                        metadata.linkRel = dom.getAttrib( link, 'rel' );
     188                        metadata.linkClassName = link.className;
    183189                }
    184190
    185191                return metadata;
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    222228                                nodeToReplace = imageNode.parentNode;
    223229                        }
    224230                }
    225                 // uniqueId isn't super exciting, so maybe we want to use something else
     231
    226232                uid = editor.dom.uniqueId( 'wp_' );
    227233                editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
    228234                editor.dom.replace( node, nodeToReplace );
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    245251
    246252        function createImageAndLink( imageData, mode ) {
    247253                var classes = [],
    248                         props;
     254                        attrs, linkAttrs;
    249255
    250256                mode = mode ? mode : 'node';
    251257
    … … tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    260266                        }
    261267                }
    262268
    263                 props = {
     269                attrs = {
    264270                        src: imageData.url,
    265271                        width: imageData.width,
    266272                        height: imageData.height,
    267                         alt: imageData.alt
     273                        alt: imageData.alt,
     274                        title: imageData.title
    268275                };
    269276
    270277                if ( classes.length ) {
    271                         props['class'] = classes.join( ' ' );
     278                        attrs['class'] = classes.join( ' ' );
    272279                }
    273280
    274281                if ( imageData.linkUrl ) {
     282
     283                        linkAttrs = {
     284                                href: imageData.linkUrl
     285                        };
     286
     287                        if ( imageData.linkRel ) {
     288                                linkAttrs.rel = imageData.linkRel;
     289                        }
     290
     291                        console.log( imageData );
     292                        if ( imageData.linkTargetBlank ) {
     293                                linkAttrs.target = '_blank';
     294                        }
     295
     296                        if ( imageData.linkClassName ) {
     297                                linkAttrs['class'] = imageData.linkClassName;
     298                        }
     299
    275300                        if ( mode === 'node' ) {
    276                                 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 ) );
    277302                        } else if ( mode === 'html' ) {
    278                                 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 ) );
    279304                        }
     305
    280306                } else if ( mode === 'node' ) {
    281                         return editor.dom.create( 'img', props );
     307                        return editor.dom.create( 'img', attrs );
    282308                } else if ( mode === 'html' ) {
    283                         return editor.dom.createHTML( 'img', props );
     309                        return editor.dom.createHTML( 'img', attrs );
    284310                }
    285311        }
    286312

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

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
index 49cbe90..d2333b5 100644
    function wp_print_media_templates() { 
    667667        </script>
    668668
    669669        <script type="text/html" id="tmpl-image-details">
    670                 <?php // reusing .media-embed to pick up the styles for now ?>
    671670                <div class="media-embed">
    672671                        <div class="embed-media-settings">
    673                                 <div class="thumbnail">
    674                                         <img src="{{ data.model.url }}" draggable="false" />
    675                                 </div>
    676                                 <# if ( data.attachment && window.imageEdit ) { #>
    677                                         <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
    678                                 <# } #>
    679 
    680                                 <div class="setting url">
    681                                         <?php // might want to make the url editable if it isn't an attachment ?>
    682                                         <input type="text" disabled="disabled" value="{{ data.model.url }}" />
    683                                 </div>
     672                                <div class="column-settings">
     673                                        <?php
     674                                        /** This filter is documented in wp-admin/includes/media.php */
     675                                        if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     676                                                <label class="setting caption">
     677                                                        <span><?php _e('Caption'); ?></span>
     678                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     679                                                </label>
     680                                        <?php endif; ?>
    684681
    685                                 <?php
    686                                 /** This filter is documented in wp-admin/includes/media.php */
    687                                 if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
    688                                         <label class="setting caption">
    689                                                 <span><?php _e('Caption'); ?></span>
    690                                                 <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     682                                        <label class="setting alt-text">
     683                                                <span><?php _e('Alternative Text'); ?></span>
     684                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    691685                                        </label>
    692                                 <?php endif; ?>
    693686
    694                                 <label class="setting alt-text">
    695                                         <span><?php _e('Alt Text'); ?></span>
    696                                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    697                                 </label>
     687                                        <div class="advanced">
     688                                                <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     689                                                <div class="hidden">
     690                                                        <label class="setting title-text">
     691                                                                <span><?php _e('Title Attribute'); ?></span>
     692                                                                <input type="text" data-setting="title" value="{{ data.model.title }}" />
     693                                                        </label>
     694                                                </div>
     695                                        </div>
    698696
    699                                 <div class="setting align">
    700                                         <span><?php _e('Align'); ?></span>
    701                                         <div class="button-group button-large" data-setting="align">
    702                                                 <button class="button" value="left">
    703                                                         <?php esc_attr_e('Left'); ?>
    704                                                 </button>
    705                                                 <button class="button" value="center">
    706                                                         <?php esc_attr_e('Center'); ?>
    707                                                 </button>
    708                                                 <button class="button" value="right">
    709                                                         <?php esc_attr_e('Right'); ?>
    710                                                 </button>
    711                                                 <button class="button active" value="none">
    712                                                         <?php esc_attr_e('None'); ?>
    713                                                 </button>
     697                                        <div class="setting align">
     698                                                <span><?php _e('Align'); ?></span>
     699                                                <div class="button-group button-large" data-setting="align">
     700                                                        <button class="button" value="left">
     701                                                                <?php esc_attr_e('Left'); ?>
     702                                                        </button>
     703                                                        <button class="button" value="center">
     704                                                                <?php esc_attr_e('Center'); ?>
     705                                                        </button>
     706                                                        <button class="button" value="right">
     707                                                                <?php esc_attr_e('Right'); ?>
     708                                                        </button>
     709                                                        <button class="button active" value="none">
     710                                                                <?php esc_attr_e('None'); ?>
     711                                                        </button>
     712                                                </div>
    714713                                        </div>
    715                                 </div>
    716                                 <div class="setting link-to">
    717                                         <span><?php _e('Link To'); ?></span>
    718                                         <div class="button-group button-large" data-setting="link">
     714
    719715                                        <# if ( data.attachment ) { #>
    720                                                 <button class="button" value="file">
    721                                                         <?php esc_attr_e('Media File'); ?>
    722                                                 </button>
    723                                                 <button class="button" value="post">
    724                                                         <?php esc_attr_e('Attachment Page'); ?>
    725                                                 </button>
    726                                         <# } else { #>
    727                                                 <button class="button" value="file">
    728                                                         <?php esc_attr_e('Image URL'); ?>
    729                                                 </button>
     716                                                <div class="setting size">
     717                                                        <span><?php _e('Size'); ?></span>
     718                                                        <div class="button-group button-large" data-setting="size">
     719                                                        <?php
     720                                                                /** This filter is documented in wp-admin/includes/media.php */
     721                                                                $sizes = apply_filters( 'image_size_names_choose', array(
     722                                                                        'thumbnail' => __('Thumbnail'),
     723                                                                        'medium'    => __('Medium'),
     724                                                                        'large'     => __('Large'),
     725                                                                        'full'      => __('Full Size'),
     726                                                                ) );
     727
     728                                                                foreach ( $sizes as $value => $name ) : ?>
     729                                                                        <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     730                                                                        if ( size ) { #>
     731                                                                                <button class="button" value="<?php echo esc_attr( $value ); ?>">
     732                                                                                        <?php echo esc_html( $name ); ?>
     733                                                                                        </button>
     734                                                                        <# } #>
     735                                                                <?php endforeach; ?>
     736                                                        </div>
     737                                                </div>
    730738                                        <# } #>
    731                                                 <button class="button" value="custom">
    732                                                         <?php esc_attr_e('Custom URL'); ?>
    733                                                 </button>
    734                                                 <button class="button active" value="none">
    735                                                         <?php esc_attr_e('None'); ?>
    736                                                 </button>
     739
     740                                        <div class="setting link-to">
     741                                                <span><?php _e('Link To'); ?></span>
     742                                                <div class="button-group button-large" data-setting="link">
     743                                                <# if ( data.attachment ) { #>
     744                                                        <button class="button" value="file">
     745                                                                <?php esc_attr_e('Media File'); ?>
     746                                                        </button>
     747                                                        <button class="button" value="post">
     748                                                                <?php esc_attr_e('Attachment Page'); ?>
     749                                                        </button>
     750                                                <# } else { #>
     751                                                        <button class="button" value="file">
     752                                                                <?php esc_attr_e('Image URL'); ?>
     753                                                        </button>
     754                                                <# } #>
     755                                                        <button class="button" value="custom">
     756                                                                <?php esc_attr_e('Custom URL'); ?>
     757                                                        </button>
     758                                                        <button class="button active" value="none">
     759                                                                <?php esc_attr_e('None'); ?>
     760                                                        </button>
     761                                                </div>
     762                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    737763                                        </div>
    738                                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
    739                                 </div>
    740764
    741                                 <# if ( data.attachment ) { #>
    742                                         <div class="setting size">
    743                                                 <span><?php _e('Size'); ?></span>
    744                                                 <div class="button-group button-large" data-setting="size">
    745                                                 <?php
    746                                                         /** This filter is documented in wp-admin/includes/media.php */
    747                                                         $sizes = apply_filters( 'image_size_names_choose', array(
    748                                                                 'thumbnail' => __('Thumbnail'),
    749                                                                 'medium'    => __('Medium'),
    750                                                                 'large'     => __('Large'),
    751                                                                 'full'      => __('Full Size'),
    752                                                         ) );
    753 
    754                                                         foreach ( $sizes as $value => $name ) : ?>
    755                                                                 <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
    756                                                                 if ( size ) { #>
    757                                                                         <button class="button" value="<?php echo esc_attr( $value ); ?>">
    758                                                                                 <?php echo esc_html( $name ); ?>
    759                                                                                 </button>
    760                                                                 <# } #>
    761                                                         <?php endforeach; ?>
     765
     766                                        <div class="link-settings">
     767                                                <div class="setting link-target">
     768                                                        <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>
     769                                                </div>
     770                                                <div class="advanced">
     771                                                        <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
     772                                                        <div class="hidden">
     773                                                                <label class="setting link-rel">
     774                                                                        <span><?php _e('Link Rel'); ?></span>
     775                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     776                                                                </label>
     777                                                                <label class="setting link-class-name">
     778                                                                        <span><?php _e('CSS Class'); ?></span>
     779                                                                        <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
     780                                                                </label>
     781                                                        </div>
    762782                                                </div>
    763783                                        </div>
    764                                 <# } #>
     784
     785                                </div>
     786                                <div class="column-image">
     787                                        <div class="image">
     788                                                <img src="{{ data.model.url }}" draggable="false" />
     789                                        </div>
     790                                        <# if ( data.attachment && window.imageEdit ) { #>
     791                                                <div class="actions">
     792                                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
     793                                                        <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
     794                                                </div>
     795                                        <# } #>
     796                                </div>
    765797                        </div>
    766798                </div>
    767799        </script>