<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27797] trunk/src/wp-includes: Edit Image modal:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27797">27797</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2014-03-27 22:40:06 +0000 (Thu, 27 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Edit Image modal:
- Bring back some of the advanced settings.
- Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit.
- The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview."
- Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited.
(updates two PNGs from precommit)
Props gcorne, see <a href="http://core.trac.wordpress.org/ticket/27366">#27366</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesimagesmediaarchivepng">trunk/src/wp-includes/images/media/archive.png</a></li>
<li><a href="#trunksrcwpincludesimagesmediaaudiopng">trunk/src/wp-includes/images/media/audio.png</a></li>
<li><a href="#trunksrcwpincludesjsmediaviewsjs">trunk/src/wp-includes/js/media-views.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/css/media-views.css (27796 => 27797)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/css/media-views.css 2014-03-27 21:09:39 UTC (rev 27796)
+++ trunk/src/wp-includes/css/media-views.css 2014-03-27 22:40:06 UTC (rev 27797)
</span><span class="lines">@@ -1462,6 +1462,10 @@
</span><span class="cx"> padding: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.media-frame .imgedit-wrap table {
+ width: 100%;
+}
+
</ins><span class="cx"> .media-frame .imgedit-wrap table td {
</span><span class="cx"> vertical-align: top;
</span><span class="cx"> padding-top: 0;
</span><span class="lines">@@ -1513,10 +1517,49 @@
</span><span class="cx"> overflow: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .media-modal {
+ left: 140px;
+ right: 140px;
+}
+
+.image-details .media-frame-menu {
+ display: none;
+}
+
+.image-details .media-frame-title,
+.image-details .media-frame-content,
+.image-details .media-frame-router {
+ left: 0;
+}
+
</ins><span class="cx"> .image-details .embed-media-settings {
</span><span class="cx"> top: 0;
</span><ins>+ overflow: visible;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .column-settings {
+ width: 44%;
+ float: left;
+ margin-right: 20px;
+}
+
+.image-details .column-image {
+ width: 53%;
+ float: left;
+}
+
+.image-details .column-image:after {
+ content: '';
+ display: table;
+ clear: both;
+}
+
+.image-details .image img {
+ max-width: 100%;
+ max-height: 500px;
+}
+
+
</ins><span class="cx"> .media-embed .thumbnail {
</span><span class="cx"> max-width: 100%;
</span><span class="cx"> max-height: 200px;
</span><span class="lines">@@ -1529,10 +1572,6 @@
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-embed .edit-attachment {
- margin-left: 10px;
-}
-
</del><span class="cx"> .media-embed .thumbnail:after {
</span><span class="cx"> content: '';
</span><span class="cx"> display: block;
</span><span class="lines">@@ -1548,13 +1587,34 @@
</span><span class="cx">
</span><span class="cx"> .media-embed .setting {
</span><span class="cx"> width: 100%;
</span><del>- margin-top: 10px;
</del><ins>+ margin: 10px 0;
</ins><span class="cx"> float: left;
</span><span class="cx"> display: block;
</span><span class="cx"> clear: both;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-embed .setting .hidden {
</del><ins>+.image-details .setting {
+ float: none;
+}
+
+.image-details .actions {
+ margin: 10px 0;
+}
+
+.media-embed .setting input[type="text"],
+.media-embed .setting textarea {
+ display: block;
+ width: 100%;
+ max-width: 400px;
+ margin: 1px 0;
+}
+
+.image-details .setting input[type="text"],
+.image-details .setting textarea {
+ max-width: inherit;
+}
+
+.media-embed .setting input.hidden {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1570,14 +1630,21 @@
</span><span class="cx"> margin: 2px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-embed .setting input[type="text"],
-.media-embed .setting textarea {
- display: block;
- width: 100%;
- max-width: 400px;
- margin: 1px 0;
</del><ins>+.media-embed-sidebar {
+ position: absolute;
+ top: 0;
+ left: 440px;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.advanced,
+.link-settings {
+ margin-top: 10px;
+}
+
+.advanced .hidden {
+ display: none;
+}
+
</ins><span class="cx"> /* Drag & drop on the editor upload */
</span><span class="cx"> .wp-editor-wrap .uploader-editor {
</span><span class="cx"> background: rgba( 150, 150, 150, 0.9 );
</span><span class="lines">@@ -1781,6 +1848,11 @@
</span><span class="cx"> top: 40%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .image-details .media-modal {
+ left: 30px;
+ right: 30px;
+ }
+
</ins><span class="cx"> .media-selection {
</span><span class="cx"> min-width: 120px;
</span><span class="cx"> }
</span><span class="lines">@@ -1849,6 +1921,12 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .image-details .media-frame-title {
+ display: block;
+ top: 0;
+ font-size: 14px;
+ }
+
</ins><span class="cx"> .media-frame-toolbar {
</span><span class="cx"> position: absolute;
</span><span class="cx"> bottom: 0px;
</span><span class="lines">@@ -1905,6 +1983,10 @@
</span><span class="cx"> top: 118px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .image-details .media-frame.hide-router .media-frame-content {
+ top: 40px;
+ }
+
</ins><span class="cx"> .media-frame .attachments-browser {
</span><span class="cx"> padding-bottom: 300px;
</span><span class="cx"> }
</span><span class="lines">@@ -1939,7 +2021,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Full-bleed modal */
</span><del>- .media-modal {
</del><ins>+ .media-modal,
+ .image-details .media-modal {
</ins><span class="cx"> position: fixed;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="lines">@@ -1975,6 +2058,12 @@
</span><span class="cx"> padding-bottom: 52px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .image-details .column-settings,
+ .image-details .column-image {
+ float: none;
+ width: 100%;
+ }
+
</ins><span class="cx"> /* Gallery */
</span><span class="cx"> .media-frame.hide-router .media-frame-content {
</span><span class="cx"> top: 73px;
</span></span></pre></div>
<a id="trunksrcwpincludesimagesmediaarchivepng"></a>
<div class="binary"><h4>Modified: trunk/src/wp-includes/images/media/archive.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpincludesimagesmediaaudiopng"></a>
<div class="binary"><h4>Modified: trunk/src/wp-includes/images/media/audio.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-views.js (27796 => 27797)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-views.js 2014-03-27 21:09:39 UTC (rev 27796)
+++ trunk/src/wp-includes/js/media-views.js 2014-03-27 22:40:06 UTC (rev 27797)
</span><span class="lines">@@ -761,6 +761,10 @@
</span><span class="cx"> initialize: function( options ) {
</span><span class="cx"> this.image = options.image;
</span><span class="cx"> media.controller.State.prototype.initialize.apply( this, arguments );
</span><ins>+ },
+
+ activate: function() {
+ this.frame.modal.$el.addClass('image-details');
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -2622,7 +2626,6 @@
</span><span class="cx">
</span><span class="cx"> },
</span><span class="cx">
</span><del>-
</del><span class="cx"> renderMenu: function( view ) {
</span><span class="cx"> var lastState = this.lastState(),
</span><span class="cx"> previous = lastState && lastState.id,
</span><span class="lines">@@ -2677,9 +2680,25 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> renderReplaceImageToolbar: function() {
</span><ins>+ var frame = this,
+ lastState = frame.lastState(),
+ previous = lastState && lastState.id;
+
</ins><span class="cx"> this.toolbar.set( new media.view.Toolbar({
</span><span class="cx"> controller: this,
</span><span class="cx"> items: {
</span><ins>+ back: {
+ text: l10n.back,
+ priority: 20,
+ click: function() {
+ if ( previous ) {
+ frame.setState( previous );
+ } else {
+ frame.close();
+ }
+ }
+ },
+
</ins><span class="cx"> replace: {
</span><span class="cx"> style: 'primary',
</span><span class="cx"> text: l10n.replace,
</span><span class="lines">@@ -5970,13 +5989,16 @@
</span><span class="cx"> className: 'image-details',
</span><span class="cx"> template: media.template('image-details'),
</span><span class="cx"> events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
</span><del>- 'click .edit-attachment': 'editAttachment'
</del><ins>+ 'click .edit-attachment': 'editAttachment',
+ 'click .replace-attachment': 'replaceAttachment',
+ 'click .show-advanced': 'showAdvanced'
</ins><span class="cx"> } ),
</span><span class="cx"> initialize: function() {
</span><span class="cx"> // used in AttachmentDisplay.prototype.updateLinkTo
</span><span class="cx"> this.options.attachment = this.model.attachment;
</span><span class="cx"> if ( this.model.attachment ) {
</span><del>- this.listenTo( this.model.attachment, 'change:url', this.updateUrl );
</del><ins>+ this.listenTo( this.model, 'change:url', this.updateUrl );
+ this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
</ins><span class="cx"> }
</span><span class="cx"> media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
</span><span class="cx"> },
</span><span class="lines">@@ -6001,29 +6023,47 @@
</span><span class="cx"> this.model.dfd.done( function() {
</span><span class="cx"> media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
</span><span class="cx"> self.resetFocus();
</span><ins>+ self.toggleLinkSettings();
</ins><span class="cx"> } ).fail( function() {
</span><span class="cx"> self.model.attachment = false;
</span><span class="cx"> media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
</span><span class="cx"> self.resetFocus();
</span><ins>+ self.toggleLinkSettings();
</ins><span class="cx"> } );
</span><span class="cx"> } else {
</span><span class="cx"> media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
</span><span class="cx"> setTimeout( function() { self.resetFocus(); }, 10 );
</span><ins>+ self.toggleLinkSettings();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return this;
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> resetFocus: function() {
</span><del>- this.$( '.caption textarea' ).focus();
- this.$( '.embed-image-settings' ).scrollTop( 0 );
</del><ins>+ this.$( '.link-to-custom' ).blur();
+ this.$( '.embed-media-settings' ).scrollTop( 0 );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateUrl: function() {
</span><del>- this.$( '.thumbnail img' ).attr( 'src', this.model.get('url' ) );
</del><ins>+ this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
</ins><span class="cx"> this.$( '.url' ).val( this.model.get('url' ) );
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ toggleLinkSettings: function() {
+ if ( this.model.get( 'link' ) === 'none' ) {
+ this.$( '.link-settings' ).addClass('hidden');
+ } else {
+ this.$( '.link-settings' ).removeClass('hidden');
+ }
+ },
+
+ showAdvanced: function( event ) {
+ event.preventDefault();
+ $( event.target ).closest('.advanced')
+ .find( '.hidden' ).removeClass( 'hidden' );
+ $( event.target ).remove();
+ },
+
</ins><span class="cx"> editAttachment: function( event ) {
</span><span class="cx"> var editState = this.controller.states.get( 'edit-image' );
</span><span class="cx">
</span><span class="lines">@@ -6032,6 +6072,11 @@
</span><span class="cx"> editState.set( 'image', this.model.attachment );
</span><span class="cx"> this.controller.setState( 'edit-image' );
</span><span class="cx"> }
</span><ins>+ },
+
+ replaceAttachment: function( event ) {
+ event.preventDefault();
+ this.controller.setState( 'replace-image' );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (27796 => 27797)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-03-27 21:09:39 UTC (rev 27796)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-03-27 22:40:06 UTC (rev 27797)
</span><span class="lines">@@ -114,7 +114,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function extractImageData( imageNode ) {
</span><del>- var classes, metadata, captionBlock, caption,
</del><ins>+ var classes, metadata, captionBlock, caption, link,
</ins><span class="cx"> dom = editor.dom;
</span><span class="cx">
</span><span class="cx"> // default attributes
</span><span class="lines">@@ -123,25 +123,27 @@
</span><span class="cx"> url: false,
</span><span class="cx"> height: '',
</span><span class="cx"> width: '',
</span><del>- size: 'none',
</del><ins>+ size: false,
</ins><span class="cx"> caption: '',
</span><span class="cx"> alt: '',
</span><span class="cx"> align: 'none',
</span><span class="cx"> link: false,
</span><del>- linkUrl: ''
</del><ins>+ linkUrl: '',
+ linkClassName: '',
+ linkTargetBlank: false,
+ linkRel: '',
+ title: '',
+ className: ''
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> metadata.url = dom.getAttrib( imageNode, 'src' );
</span><span class="cx"> metadata.alt = dom.getAttrib( imageNode, 'alt' );
</span><ins>+ metadata.title = dom.getAttrib( imageNode, 'title' );
</ins><span class="cx"> metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
</span><span class="cx"> metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
</span><ins>+ metadata.className = imageNode.className;
</ins><span class="cx">
</span><del>- //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored
- // when the image and/or caption are updated
- // maybe use getAttribs()
-
- // extract meta data from classes (candidate for turning into a method)
- classes = imageNode.className.split( ' ' );
</del><ins>+ classes = metadata.className.split( ' ' );
</ins><span class="cx"> tinymce.each( classes, function( name ) {
</span><span class="cx">
</span><span class="cx"> if ( /^wp-image/.test( name ) ) {
</span><span class="lines">@@ -157,7 +159,7 @@
</span><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- // extract caption
</del><ins>+ // Extract caption
</ins><span class="cx"> captionBlock = dom.getParents( imageNode, '.wp-caption' );
</span><span class="cx">
</span><span class="cx"> if ( captionBlock.length ) {
</span><span class="lines">@@ -173,15 +175,19 @@
</span><span class="cx"> caption = dom.select( 'dd.wp-caption-dd', captionBlock );
</span><span class="cx"> if ( caption.length ) {
</span><span class="cx"> caption = caption[0];
</span><del>- // need to do some more thinking about this
</del><ins>+
</ins><span class="cx"> metadata.caption = editor.serializer.serialize( caption )
</span><span class="cx"> .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // extract linkTo
</del><ins>+ // Extract linkTo
</ins><span class="cx"> if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
</span><del>- metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
</del><ins>+ link = imageNode.parentNode;
+ metadata.linkUrl = dom.getAttrib( link, 'href' );
+ metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
+ metadata.linkRel = dom.getAttrib( link, 'rel' );
+ metadata.linkClassName = link.className;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return metadata;
</span><span class="lines">@@ -223,7 +229,7 @@
</span><span class="cx"> nodeToReplace = imageNode.parentNode;
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>- // uniqueId isn't super exciting, so maybe we want to use something else
</del><ins>+
</ins><span class="cx"> uid = editor.dom.uniqueId( 'wp_' );
</span><span class="cx"> editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
</span><span class="cx"> editor.dom.replace( node, nodeToReplace );
</span><span class="lines">@@ -246,7 +252,7 @@
</span><span class="cx">
</span><span class="cx"> function createImageAndLink( imageData, mode ) {
</span><span class="cx"> var classes = [],
</span><del>- props;
</del><ins>+ attrs, linkAttrs;
</ins><span class="cx">
</span><span class="cx"> mode = mode ? mode : 'node';
</span><span class="cx">
</span><span class="lines">@@ -261,27 +267,46 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- props = {
</del><ins>+ attrs = {
</ins><span class="cx"> src: imageData.url,
</span><span class="cx"> width: imageData.width,
</span><span class="cx"> height: imageData.height,
</span><del>- alt: imageData.alt
</del><ins>+ alt: imageData.alt,
+ title: imageData.title || null
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> if ( classes.length ) {
</span><del>- props['class'] = classes.join( ' ' );
</del><ins>+ attrs['class'] = classes.join( ' ' );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( imageData.linkUrl ) {
</span><ins>+
+ linkAttrs = {
+ href: imageData.linkUrl
+ };
+
+ if ( imageData.linkRel ) {
+ linkAttrs.rel = imageData.linkRel;
+ }
+
+ if ( imageData.linkTargetBlank ) {
+ linkAttrs.target = '_blank';
+ }
+
+ if ( imageData.linkClassName ) {
+ linkAttrs['class'] = imageData.linkClassName;
+ }
+
</ins><span class="cx"> if ( mode === 'node' ) {
</span><del>- return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
</del><ins>+ return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
</ins><span class="cx"> } else if ( mode === 'html' ) {
</span><del>- return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
</del><ins>+ return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> } else if ( mode === 'node' ) {
</span><del>- return editor.dom.create( 'img', props );
</del><ins>+ return editor.dom.create( 'img', attrs );
</ins><span class="cx"> } else if ( mode === 'html' ) {
</span><del>- return editor.dom.createHTML( 'img', props );
</del><ins>+ return editor.dom.createHTML( 'img', attrs );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media-template.php (27796 => 27797)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media-template.php 2014-03-27 21:09:39 UTC (rev 27796)
+++ trunk/src/wp-includes/media-template.php 2014-03-27 22:40:06 UTC (rev 27797)
</span><span class="lines">@@ -638,101 +638,133 @@
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script type="text/html" id="tmpl-image-details">
</span><del>- <?php // reusing .media-embed to pick up the styles for now ?>
</del><span class="cx"> <div class="media-embed">
</span><span class="cx"> <div class="embed-media-settings">
</span><del>- <div class="thumbnail">
- <img src="{{ data.model.url }}" draggable="false" />
- </div>
- <# if ( data.attachment && window.imageEdit ) { #>
- <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
- <# } #>
</del><ins>+ <div class="column-settings">
+ <?php
+ /** This filter is documented in wp-admin/includes/media.php */
+ if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
+ <label class="setting caption">
+ <span><?php _e('Caption'); ?></span>
+ <textarea data-setting="caption">{{ data.model.caption }}</textarea>
+ </label>
+ <?php endif; ?>
</ins><span class="cx">
</span><del>- <div class="setting url">
- <?php // might want to make the url editable if it isn't an attachment ?>
- <input type="text" disabled="disabled" value="{{ data.model.url }}" />
- </div>
-
- <?php
- /** This filter is documented in wp-admin/includes/media.php */
- if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
- <label class="setting caption">
- <span><?php _e('Caption'); ?></span>
- <textarea data-setting="caption">{{ data.model.caption }}</textarea>
</del><ins>+ <label class="setting alt-text">
+ <span><?php _e('Alternative Text'); ?></span>
+ <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
</ins><span class="cx"> </label>
</span><del>- <?php endif; ?>
</del><span class="cx">
</span><del>- <label class="setting alt-text">
- <span><?php _e('Alt Text'); ?></span>
- <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
- </label>
</del><ins>+ <div class="setting advanced">
+ <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
+ <div class="hidden">
+ <label class="setting title-text">
+ <span><?php _e('Title Attribute'); ?></span>
+ <input type="text" data-setting="title" value="{{ data.model.title }}" />
+ </label>
+ </div>
+ </div>
</ins><span class="cx">
</span><del>- <div class="setting align">
- <span><?php _e('Align'); ?></span>
- <div class="button-group button-large" data-setting="align">
- <button class="button" value="left">
- <?php esc_attr_e('Left'); ?>
- </button>
- <button class="button" value="center">
- <?php esc_attr_e('Center'); ?>
- </button>
- <button class="button" value="right">
- <?php esc_attr_e('Right'); ?>
- </button>
- <button class="button active" value="none">
- <?php esc_attr_e('None'); ?>
- </button>
</del><ins>+ <div class="setting align">
+ <span><?php _e('Align'); ?></span>
+ <div class="button-group button-large" data-setting="align">
+ <button class="button" value="left">
+ <?php esc_attr_e('Left'); ?>
+ </button>
+ <button class="button" value="center">
+ <?php esc_attr_e('Center'); ?>
+ </button>
+ <button class="button" value="right">
+ <?php esc_attr_e('Right'); ?>
+ </button>
+ <button class="button active" value="none">
+ <?php esc_attr_e('None'); ?>
+ </button>
+ </div>
</ins><span class="cx"> </div>
</span><del>- </div>
- <div class="setting link-to">
- <span><?php _e('Link To'); ?></span>
- <div class="button-group button-large" data-setting="link">
</del><ins>+
</ins><span class="cx"> <# if ( data.attachment ) { #>
</span><del>- <button class="button" value="file">
- <?php esc_attr_e('Media File'); ?>
- </button>
- <button class="button" value="post">
- <?php esc_attr_e('Attachment Page'); ?>
- </button>
- <# } else { #>
- <button class="button" value="file">
- <?php esc_attr_e('Image URL'); ?>
- </button>
</del><ins>+ <div class="setting size">
+ <span><?php _e('Size'); ?></span>
+ <div class="button-group button-large" data-setting="size">
+ <?php
+ /** This filter is documented in wp-admin/includes/media.php */
+ $sizes = apply_filters( 'image_size_names_choose', array(
+ 'thumbnail' => __('Thumbnail'),
+ 'medium' => __('Medium'),
+ 'large' => __('Large'),
+ 'full' => __('Full Size'),
+ ) );
+
+ foreach ( $sizes as $value => $name ) : ?>
+ <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
+ if ( size ) { #>
+ <button class="button" value="<?php echo esc_attr( $value ); ?>">
+ <?php echo esc_html( $name ); ?>
+ </button>
+ <# } #>
+ <?php endforeach; ?>
+ </div>
+ </div>
</ins><span class="cx"> <# } #>
</span><del>- <button class="button" value="custom">
- <?php esc_attr_e('Custom URL'); ?>
- </button>
- <button class="button active" value="none">
- <?php esc_attr_e('None'); ?>
- </button>
</del><ins>+
+ <div class="setting link-to">
+ <span><?php _e('Link To'); ?></span>
+ <div class="button-group button-large" data-setting="link">
+ <# if ( data.attachment ) { #>
+ <button class="button" value="file">
+ <?php esc_attr_e('Media File'); ?>
+ </button>
+ <button class="button" value="post">
+ <?php esc_attr_e('Attachment Page'); ?>
+ </button>
+ <# } else { #>
+ <button class="button" value="file">
+ <?php esc_attr_e('Image URL'); ?>
+ </button>
+ <# } #>
+ <button class="button" value="custom">
+ <?php esc_attr_e('Custom URL'); ?>
+ </button>
+ <button class="button active" value="none">
+ <?php esc_attr_e('None'); ?>
+ </button>
+ </div>
+ <input type="text" class="link-to-custom" data-setting="linkUrl" />
</ins><span class="cx"> </div>
</span><del>- <input type="text" class="link-to-custom" data-setting="linkUrl" />
- </div>
</del><span class="cx">
</span><del>- <# if ( data.attachment ) { #>
- <div class="setting size">
- <span><?php _e('Size'); ?></span>
- <div class="button-group button-large" data-setting="size">
- <?php
- /** This filter is documented in wp-admin/includes/media.php */
- $sizes = apply_filters( 'image_size_names_choose', array(
- 'thumbnail' => __('Thumbnail'),
- 'medium' => __('Medium'),
- 'large' => __('Large'),
- 'full' => __('Full Size'),
- ) );
</del><span class="cx">
</span><del>- foreach ( $sizes as $value => $name ) : ?>
- <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
- if ( size ) { #>
- <button class="button" value="<?php echo esc_attr( $value ); ?>">
- <?php echo esc_html( $name ); ?>
- </button>
- <# } #>
- <?php endforeach; ?>
</del><ins>+ <div class="setting link-settings">
+ <div class="setting link-target">
+ <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>
</ins><span class="cx"> </div>
</span><ins>+ <div class="advanced">
+ <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
+ <div class="hidden">
+ <label class="setting link-rel">
+ <span><?php _e('Link Rel'); ?></span>
+ <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
+ </label>
+ <label class="setting link-class-name">
+ <span><?php _e('CSS Class'); ?></span>
+ <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+ </label>
+ </div>
+ </div>
</ins><span class="cx"> </div>
</span><del>- <# } #>
</del><ins>+
+ </div>
+ <div class="column-image">
+ <div class="image">
+ <img src="{{ data.model.url }}" draggable="false" />
+ </div>
+ <# if ( data.attachment && window.imageEdit ) { #>
+ <div class="actions">
+ <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
+ <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
+ </div>
+ <# } #>
+ </div>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </script>
</span></span></pre>
</div>
</div>
</body>
</html>