WordPress.org

Make WordPress Core

Ticket #27366: 27366-07.patch

File 27366-07.patch, 20.5 KB (added by gcorne, 6 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 cccf307..7ee5d1e 100644
     
    270270        width: 100%;
    271271}
    272272
    273 .media-sidebar h3 {
     273.media-sidebar h3,
     274.image-details h3 {
    274275        position: relative;
    275276        font-weight: bold;
    276277        text-transform: uppercase;
     
    16031604.image-details .embed-media-settings {
    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;
     1627        width: 48%;
     1628        position: absolute;
     1629        left: 52%;
     1630        top: 0;
    16171631}
    16181632
    1619 .image-details .column-image:after {
    1620     content: '';
    1621         display: table;
    1622     clear: both;
     1633.image-details .image {
     1634        margin: 20px;
    16231635}
    16241636
    16251637.image-details .image img {
     
    16271639        max-height: 500px;
    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 {
    16321667        max-width: 100%;
     
    16611696        clear: both;
    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;
    16701706}
    16711707
     1708.image-details .hidden {
     1709        display: none;
     1710}
     1711
    16721712.media-embed .setting input[type="text"],
    16731713.media-embed .setting textarea {
    16741714        display: block;
     
    16771717        margin: 1px 0;
    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
    16851736.media-embed .setting input.hidden {
     
    16941745        color: #666;
    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;
    16991758}
     
    17091768        margin-top: 10px;
    17101769}
    17111770
    1712 .advanced .hidden {
    1713         display: none;
    1714 }
    1715 
    17161771/* Drag & drop on the editor upload */
    17171772#wp-fullscreen-body .uploader-editor,
    17181773.wp-editor-wrap .uploader-editor {
     
    19301985                right: 30px;
    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;
    19352012        }
     
    21372214
    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%;
     2221                min-height: inherit;
    21422222        }
    21432223
     2224
    21442225        /* Gallery */
    21452226        .media-frame.hide-router .media-frame-content {
    21462227                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 80db8d2..fef88de 100644
     
    60596059                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    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                },
    60736071
     
    61136111                },
    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
    61206118                toggleLinkSettings: function() {
     
    61256123                        }
    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
    61356138                editAttachment: function( event ) {
  • 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 9f76d4c..54f34e1 100644
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    114114        }
    115115
    116116        function extractImageData( imageNode ) {
    117                 var classes, metadata, captionBlock, caption, link,
     117                var classes, extraClasses, metadata, captionBlock, caption, link,
    118118                        dom = editor.dom;
    119119
    120120                // default attributes
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    127127                        caption: '',
    128128                        alt: '',
    129129                        align: 'none',
     130                        extraClasses: '',
    130131                        link: false,
    131132                        linkUrl: '',
    132133                        linkClassName: '',
    133134                        linkTargetBlank: false,
    134135                        linkRel: '',
    135                         title: '',
    136                         className: ''
     136                        title: ''
    137137                };
    138138
    139139                metadata.url = dom.getAttrib( imageNode, 'src' );
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    141141                metadata.title = dom.getAttrib( imageNode, 'title' );
    142142                metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
    143143                metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
    144                 metadata.className = imageNode.className;
    145144
    146                 classes = metadata.className.split( ' ' );
     145                classes = tinymce.explode( imageNode.className, ' ' );
     146                extraClasses = [];
     147
    147148                tinymce.each( classes, function( name ) {
    148149
    149150                        if ( /^wp-image/.test( name ) ) {
    150151                                metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
    151                         }
    152 
    153                         if ( /^align/.test( name ) ) {
     152                        } else if ( /^align/.test( name ) ) {
    154153                                metadata.align = name.replace( 'align', '' );
    155                         }
    156 
    157                         if ( /^size/.test( name ) ) {
     154                        } else if ( /^size/.test( name ) ) {
    158155                                metadata.size = name.replace( 'size-', '' );
     156                        } else {
     157                                extraClasses.push( name );
    159158                        }
     159
    160160                } );
    161161
     162                metadata.extraClasses = extraClasses.join( ' ' );
     163
    162164                // Extract caption
    163165                captionBlock = dom.getParents( imageNode, '.wp-caption' );
    164166
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    194196        }
    195197
    196198        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();
     199                var classes, className, width, node, html,
     200                        captionNode, dd, dl, id, attrs, linkAttrs,
     201                        dom = editor.dom;
    243202
    244                 editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
     203                classes = tinymce.explode( imageData.extraClasses, ' ' );
    245204
    246                 if ( editedImg ) {
    247                         editor.selection.select( editedImg );
    248                         // refresh toolbar
    249                         addToolbar( editedImg );
     205                if ( ! classes ) {
     206                        classes = [];
    250207                }
    251         }
    252 
    253         function createImageAndLink( imageData, mode ) {
    254                 var classes = [],
    255                         attrs, linkAttrs;
    256 
    257                 mode = mode ? mode : 'node';
    258208
    259209                if ( ! imageData.caption ) {
    260210                        classes.push( 'align' + imageData.align );
    tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 
    272222                        width: imageData.width,
    273223                        height: imageData.height,
    274224                        alt: imageData.alt,
    275                         title: imageData.title || null
     225                        title: imageData.title || null,
     226                        'class': classes.join( ' ' )
    276227                };
    277228
    278                 if ( classes.length ) {
    279                         attrs['class'] = classes.join( ' ' );
    280                 }
    281 
    282                 if ( imageData.linkUrl ) {
     229                dom.setAttribs( imageNode, attrs );
    283230
    284                         linkAttrs = {
    285                                 href: imageData.linkUrl
    286                         };
     231                linkAttrs = {
     232                        href: imageData.linkUrl,
     233                        rel: imageData.linkRel || null,
     234                        target: imageData.linkTargetBlank ? '_blank': null,
     235                        'class': imageData.linkClassName || null
     236                };
    287237
    288                         if ( imageData.linkRel ) {
    289                                 linkAttrs.rel = imageData.linkRel;
     238                if ( imageNode.parentNode.nodeName === 'A' ) {
     239                        if ( imageData.linkUrl ) {
     240                                dom.setAttribs( imageNode.parentNode, linkAttrs );
     241                        } else {
     242                                dom.remove( imageNode.parentNode, true );
    290243                        }
     244                } else if ( imageData.linkUrl ) {
     245                        html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
     246                        dom.outerHTML( imageNode, html );
     247                }
    291248
    292                         if ( imageData.linkTargetBlank ) {
    293                                 linkAttrs.target = '_blank';
    294                         }
     249                if ( imageData.caption ) {
     250                        captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
     251                        width = parseInt( imageData.width, 10 );
     252                        id = imageData.attachment_id ? 'id="attachment_'+ imageData.attachment_id +'" ' : '';
     253                        className = 'wp-caption align' + imageData.align;
    295254
    296                         if ( imageData.linkClassName ) {
    297                                 linkAttrs['class'] = imageData.linkClassName;
     255                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     256                                width += 10;
    298257                        }
    299258
    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                         }
     259                        if ( captionNode ) {
     260                                dl = dom.select( 'dl.wp-caption', captionNode );
     261
     262                                if ( dl.length ) {
     263                                        dom.setAttribs( dl, {
     264                                                id: id,
     265                                                'class': className,
     266                                                style: 'width: ' + width + 'px'
     267                                        } );
     268                                }
     269
     270                                dd = dom.select( '.wp-caption-dd', captionNode );
     271
     272                                if ( dd.length ) {
     273                                        dom.setHTML( dd[0], imageData.caption );
     274                                }
    305275
    306                 } else if ( mode === 'node' ) {
    307                         return editor.dom.create( 'img', attrs );
    308                 } else if ( mode === 'html' ) {
    309                         return editor.dom.createHTML( 'img', attrs );
     276                        } else {
     277
     278                                if ( imageNode.parentNode.nodeName === 'A' ) {
     279                                        node = imageNode.parentNode;
     280                                } else {
     281                                        node = imageNode;
     282                                }
     283
     284                                // should create a new function for generating the caption markup
     285                                html =  '<div class="mceTemp"><dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
     286                                        '<dt class="wp-caption-dt">'+ dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl></div>';
     287                                dom.setOuterHTML( node, html );
     288                        }
    310289                }
     290
     291                editor.nodeChanged();
     292                // refresh the toolbar
     293                addToolbar( imageNode );
    311294        }
    312295
    313296        function editImage( img ) {
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index 76e595c..1d75368 100644
    function wp_print_media_templates() { 
    641641        <script type="text/html" id="tmpl-image-details">
    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
    646658                                        /** This filter is documented in wp-admin/includes/media.php */
    function wp_print_media_templates() { 
    656668                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    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>
    671674                                                <div class="button-group button-large" data-setting="align">
    function wp_print_media_templates() { 
    685688                                        </div>
    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>
    770772                </div>