From d4f99c2142291a3c511c3755154fb8606a10b680 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Wed, 2 Apr 2014 01:53:56 +0000
Subject: [PATCH] =?UTF-8?q?Edit=20Image=20modal:=20-=20Move=20all=20advanc?=
 =?UTF-8?q?ed=20options=20under=20a=20single=20=E2=80=9CShow=20advanced=20?=
 =?UTF-8?q?options=E2=80=9D=20toggle=20that=20mirrors=20the=20behavior=20a?=
 =?UTF-8?q?nd=20look-and-feel=20of=20the=20wplink=20modal.=20-=20Switch=20?=
 =?UTF-8?q?to=20using=20<select>=20for=20the=20Size=20and=20Link=20To.=20-?=
 =?UTF-8?q?=20Bring=20back=20the=20field=20for=20CSS=20Class=20for=20the?=
 =?UTF-8?q?=20image,=20but=20don=E2=80=99t=20incorporate=20the=20internall?=
 =?UTF-8?q?y=20managed=20WordPress=20classes=20(size-,=20wp-image-,=20etc?=
 =?UTF-8?q?=E2=80=A6).=20-=20On=20larger=20screen=20sizes,=20float=20label?=
 =?UTF-8?q?s=20to=20the=20left.=20When=20the=20width=20drops=20below=20900?=
 =?UTF-8?q?px,=20stack=20the=20label=20above=20the=20fields.=20-=20Keep=20?=
 =?UTF-8?q?image=20at=20top=20on=20screen=20sizes=20where=20the=20two=20co?=
 =?UTF-8?q?lumns=20are=20stacked=20into=20a=20single=20column.=20-=20Don't?=
 =?UTF-8?q?=20replace=20the=20nodes=20in=20the=20editor=20DOM=20so=20we=20?=
 =?UTF-8?q?don't=20stomp=20on=20any=20custom=20attributes=20that=20the=20u?=
 =?UTF-8?q?ser=20may=20have=20added=20via=20the=20Text=20editor=20or=20som?=
 =?UTF-8?q?e=20other=20mechanism.=20Props=20gcorne,=20see=20#27366?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: https://develop.svn.wordpress.org/trunk@27898 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/media-views.css           | 117 ++++++++--
 src/wp-includes/js/media-views.js             |  25 ++-
 .../js/tinymce/plugins/wpeditimage/plugin.js  | 212 +++++++++---------
 src/wp-includes/media-template.php            | 146 ++++++------
 4 files changed, 296 insertions(+), 204 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index cccf307309..7ee5d1e31e 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -270,7 +270,8 @@
 	width: 100%;
 }
 
-.media-sidebar h3 {
+.media-sidebar h3,
+.image-details h3 {
 	position: relative;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -1603,23 +1604,34 @@
 .image-details .embed-media-settings {
 	top: 0;
 	overflow: visible;
+	padding: 0;
 }
 
 .image-details .column-settings {
-	width: 44%;
-	float: left;
-	margin-right: 20px;
+	background: #f3f3f3;
+	border-right: 1px solid #ddd;
+	min-height: 100%;
+	width: 52%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.image-details .column-settings h3 {
+	margin: 20px;
+	padding-top: 20px;
+	border-top: 1px solid #ddd;
 }
 
 .image-details .column-image {
-	width: 53%;
-	float: left;
+	width: 48%;
+	position: absolute;
+	left: 52%;
+	top: 0;
 }
 
-.image-details .column-image:after {
-    content: '';
-	display: table;
-    clear: both;
+.image-details .image {
+	margin: 20px;
 }
 
 .image-details .image img {
@@ -1627,6 +1639,29 @@
 	max-height: 500px;
 }
 
+.image-details .advanced-toggle {
+	font-style: italic;
+	color: #666;
+	text-decoration: none;
+	margin: 20px;
+	display: block;
+}
+
+.image-details .advanced-toggle::after {
+	font: normal 20px/1 'dashicons';
+	speak: none;
+	vertical-align: top;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	content: '\f140';
+	display: inline-block;
+	margin-top: -2px;
+}
+
+.image-details .advanced-visible .advanced-toggle::after {
+	content: '\f142';
+	margin-top: 0;
+}
 
 .media-embed .thumbnail {
 	max-width: 100%;
@@ -1661,14 +1696,19 @@
 	clear: both;
 }
 
-.image-details .setting {
+.image-details .embed-media-settings .setting {
 	float: none;
+	width: auto;
 }
 
 .image-details .actions {
 	margin: 10px 0;
 }
 
+.image-details .hidden {
+	display: none;
+}
+
 .media-embed .setting input[type="text"],
 .media-embed .setting textarea {
 	display: block;
@@ -1677,9 +1717,20 @@
 	margin: 1px 0;
 }
 
-.image-details .setting input[type="text"],
-.image-details .setting textarea {
+.image-details .embed-media-settings .setting input[type="text"],
+.image-details .embed-media-settings .setting textarea {
 	max-width: inherit;
+	width: 70%;
+}
+
+.image-details .embed-media-settings .setting input.link-to-custom,
+.image-details .embed-media-settings .link-target {
+	margin-left: 27%;
+	width: 70%;
+}
+
+.image-details .embed-media-settings .link-target {
+	margin-top: 24px;
 }
 
 .media-embed .setting input.hidden {
@@ -1694,6 +1745,14 @@
 	color: #666;
 }
 
+.image-details .embed-media-settings .setting span {
+	float: left;
+	width: 25%;
+	text-align: right;
+	margin: 8px 1% 0 1%;
+	line-height: 1.1;
+}
+
 .media-embed .setting .button-group {
 	margin: 2px 0;
 }
@@ -1709,10 +1768,6 @@
 	margin-top: 10px;
 }
 
-.advanced .hidden {
-	display: none;
-}
-
 /* Drag & drop on the editor upload */
 #wp-fullscreen-body .uploader-editor,
 .wp-editor-wrap .uploader-editor {
@@ -1930,6 +1985,28 @@
 		right: 30px;
 	}
 
+	.image-details .embed-media-settings .setting {
+		margin: 20px;
+	}
+
+	.image-details .embed-media-settings .setting span {
+		float: none;
+		text-align: left;
+		width: 100%;
+		margin-bottom: 4px;
+	}
+
+	.image-details .embed-media-settings .setting input.link-to-custom,
+	.image-details .embed-media-settings .setting input[type="text"],
+	.image-details .embed-media-settings .setting textarea {
+		width: 100%;
+		margin-left: 0;
+	}
+
+	.image-details .link-target {
+		width: 100%;
+	}
+
 	.media-selection {
 		min-width: 120px;
 	}
@@ -2137,10 +2214,14 @@
 
 	.image-details .column-settings,
 	.image-details .column-image {
-		float: none;
+		position: relative;
+		padding: 10px 0 20px 0;
+		left: 0;
 		width: 100%;
+		min-height: inherit;
 	}
 
+
 	/* Gallery */
 	.media-frame.hide-router .media-frame-content {
 		top: 73px;
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 80db8d2684..fef88de2ce 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -6059,15 +6059,13 @@
 		events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
 			'click .edit-attachment': 'editAttachment',
 			'click .replace-attachment': 'replaceAttachment',
-			'click .show-advanced': 'showAdvanced'
+			'click .advanced-toggle': 'toggleAdvanced'
 		} ),
 		initialize: function() {
 			// used in AttachmentDisplay.prototype.updateLinkTo
 			this.options.attachment = this.model.attachment;
-			if ( this.model.attachment ) {
-				this.listenTo( this.model, 'change:url', this.updateUrl );
-				this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
-			}
+			this.listenTo( this.model, 'change:url', this.updateUrl );
+			this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
 			media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
 		},
 
@@ -6113,8 +6111,8 @@
 		},
 
 		updateUrl: function() {
-			this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
-			this.$( '.url' ).val( this.model.get('url' ) );
+			this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
+			this.$( '.url' ).val( this.model.get( 'url' ) );
 		},
 
 		toggleLinkSettings: function() {
@@ -6125,11 +6123,16 @@
 			}
 		},
 
-		showAdvanced: function( event ) {
+		toggleAdvanced: function( event ) {
+			var $advanced = $( event.target ).closest( '.advanced' );
 			event.preventDefault();
-			$( event.target ).closest('.advanced')
-				.find( '.hidden' ).removeClass( 'hidden' );
-			$( event.target ).remove();
+			if ( $advanced.hasClass('advanced-visible') ) {
+				$advanced.removeClass('advanced-visible');
+				$advanced.find('div').addClass('hidden');
+			} else {
+				$advanced.addClass('advanced-visible');
+				$advanced.find('div').removeClass('hidden');
+			}
 		},
 
 		editAttachment: function( event ) {
diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 9f76d4c34c..a5af171c15 100644
--- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
+++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
@@ -114,7 +114,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	}
 
 	function extractImageData( imageNode ) {
-		var classes, metadata, captionBlock, caption, link,
+		var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
 			dom = editor.dom;
 
 		// default attributes
@@ -127,38 +127,44 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 			caption: '',
 			alt: '',
 			align: 'none',
+			extraClasses: '',
 			link: false,
 			linkUrl: '',
 			linkClassName: '',
 			linkTargetBlank: false,
 			linkRel: '',
-			title: '',
-			className: ''
+			title: ''
 		};
 
 		metadata.url = dom.getAttrib( imageNode, 'src' );
 		metadata.alt = dom.getAttrib( imageNode, 'alt' );
 		metadata.title = dom.getAttrib( imageNode, 'title' );
-		metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
-		metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
-		metadata.className = imageNode.className;
 
-		classes = metadata.className.split( ' ' );
+		width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
+		height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
+
+		metadata.width = parseInt( width, 10 );
+		metadata.height = parseInt( height, 10 );
+
+		classes = tinymce.explode( imageNode.className, ' ' );
+		extraClasses = [];
+
 		tinymce.each( classes, function( name ) {
 
 			if ( /^wp-image/.test( name ) ) {
 				metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
-			}
-
-			if ( /^align/.test( name ) ) {
+			} else if ( /^align/.test( name ) ) {
 				metadata.align = name.replace( 'align', '' );
+			} else if ( /^size/.test( name ) ) {
+				metadata.size = name.replace( 'size-', '' );
+			} else {
+				extraClasses.push( name );
 			}
 
-			if ( /^size/.test( name ) ) {
-				metadata.size = name.replace( 'size-', '' );
-			}
 		} );
 
+		metadata.extraClasses = extraClasses.join( ' ' );
+
 		// Extract caption
 		captionBlock = dom.getParents( imageNode, '.wp-caption' );
 
@@ -194,68 +200,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	}
 
 	function updateImage( imageNode, imageData ) {
-		var className, width, node, html, captionNode, nodeToReplace, uid, editedImg, id;
+		var classes, className, width, node, html, parent, wrap,
+			captionNode, dd, dl, id, attrs, linkAttrs,
+			dom = editor.dom;
 
-		if ( imageData.caption ) {
+		classes = tinymce.explode( imageData.extraClasses, ' ' );
 
-			html = createImageAndLink( imageData, 'html' );
-
-			width = parseInt( imageData.width, 10 );
-
-			if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
-				width += 10;
-			}
-
-			className = 'align' + imageData.align;
-			id = imageData.attachment_id ? 'id="attachment_'+ imageData.attachment_id +'" ' : '';
-
-			// should create a new function for generating the caption markup
-			html =  '<dl ' + id + 'class="wp-caption '+ className +'" style="width: '+ width +'px">' +
-				'<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
-
-			node = editor.dom.create( 'div', { 'class': 'mceTemp' }, html );
-		} else {
-			node = createImageAndLink( imageData, 'node' );
+		if ( ! classes ) {
+			classes = [];
 		}
 
-		nodeToReplace = imageNode;
-
-		captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
-
-		if ( captionNode ) {
-			nodeToReplace = captionNode;
-		} else {
-			if ( imageNode.parentNode.nodeName === 'A' ) {
-				nodeToReplace = imageNode.parentNode;
-			}
-		}
-
-		uid = editor.dom.uniqueId( 'wp_' );
-		editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
-		editor.dom.replace( node, nodeToReplace );
-
-		// find the updated node
-		node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
-
-		editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
-
-		editor.nodeChanged();
-
-		editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
-
-		if ( editedImg ) {
-			editor.selection.select( editedImg );
-			// refresh toolbar
-			addToolbar( editedImg );
-		}
-	}
-
-	function createImageAndLink( imageData, mode ) {
-		var classes = [],
-			attrs, linkAttrs;
-
-		mode = mode ? mode : 'node';
-
 		if ( ! imageData.caption ) {
 			classes.push( 'align' + imageData.align );
 		}
@@ -269,45 +223,97 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 		attrs = {
 			src: imageData.url,
-			width: imageData.width,
-			height: imageData.height,
+			width: imageData.width || null,
+			height: imageData.height || null,
 			alt: imageData.alt,
-			title: imageData.title || null
+			title: imageData.title || null,
+			'class': classes.join( ' ' ) || null
 		};
 
-		if ( classes.length ) {
-			attrs['class'] = classes.join( ' ' );
+		dom.setAttribs( imageNode, attrs );
+
+		linkAttrs = {
+			href: imageData.linkUrl,
+			rel: imageData.linkRel || null,
+			target: imageData.linkTargetBlank ? '_blank': null,
+			'class': imageData.linkClassName || null
+		};
+
+		if ( imageNode.parentNode.nodeName === 'A' ) {
+			if ( imageData.linkUrl ) {
+				dom.setAttribs( imageNode.parentNode, linkAttrs );
+			} else {
+				dom.remove( imageNode.parentNode, true );
+			}
+		} else if ( imageData.linkUrl ) {
+			html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
+			dom.outerHTML( imageNode, html );
 		}
 
-		if ( imageData.linkUrl ) {
+		captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
 
-			linkAttrs = {
-				href: imageData.linkUrl
-			};
-
-			if ( imageData.linkRel ) {
-				linkAttrs.rel = imageData.linkRel;
-			}
-
-			if ( imageData.linkTargetBlank ) {
-				linkAttrs.target = '_blank';
-			}
-
-			if ( imageData.linkClassName ) {
-				linkAttrs['class'] = imageData.linkClassName;
-			}
-
-			if ( mode === 'node' ) {
-				return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
-			} else if ( mode === 'html' ) {
-				return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
-			}
-
-		} else if ( mode === 'node' ) {
-			return editor.dom.create( 'img', attrs );
-		} else if ( mode === 'html' ) {
-			return editor.dom.createHTML( 'img', attrs );
+		if ( imageNode.parentNode.nodeName === 'A' ) {
+			node = imageNode.parentNode;
+		} else {
+			node = imageNode;
 		}
+
+		if ( imageData.caption ) {
+			width = parseInt( imageData.width, 10 );
+			id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
+			className = 'wp-caption align' + imageData.align;
+
+			if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+				width += 10;
+			}
+
+			if ( captionNode ) {
+				dl = dom.select( 'dl.wp-caption', captionNode );
+
+				if ( dl.length ) {
+					dom.setAttribs( dl, {
+						id: id,
+						'class': className,
+						style: 'width: ' + width + 'px'
+					} );
+				}
+
+				dd = dom.select( '.wp-caption-dd', captionNode );
+
+				if ( dd.length ) {
+					dom.setHTML( dd[0], imageData.caption );
+				}
+
+			} else {
+				id = id ? 'id="'+ id +'" ' : '';
+
+				// should create a new function for generating the caption markup
+				html =  '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
+					'<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
+
+				if ( parent = dom.getParent( node, 'p' ) ) {
+					wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
+					dom.insertAfter( wrap, parent );
+					dom.remove( node );
+
+					if ( dom.isEmpty( parent ) ) {
+						dom.remove( parent );
+					}
+				} else {
+					dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
+				}
+			}
+		} else if ( captionNode ) {
+			// Remove the caption wrapper and place the image in new paragraph
+			parent = dom.create( 'p' );
+			captionNode.parentNode.insertBefore( parent, captionNode );
+			parent.appendChild( node );
+			dom.remove( captionNode );
+		}
+
+		editor.nodeChanged();
+		// refresh the toolbar
+		addToolbar( imageNode );
 	}
 
 	function editImage( img ) {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 76e595cc24..1d7536880a 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -641,6 +641,18 @@ function wp_print_media_templates() {
 	<script type="text/html" id="tmpl-image-details">
 		<div class="media-embed">
 			<div class="embed-media-settings">
+				<div class="column-image">
+					<div class="image">
+						<img src="{{ data.model.url }}" draggable="false" />
+
+						<# 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>
+				</div>
 				<div class="column-settings">
 					<?php
 					/** This filter is documented in wp-admin/includes/media.php */
@@ -656,16 +668,7 @@ function wp_print_media_templates() {
 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
 					</label>
 
-					<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>
-
+					<h3><?php _e( 'Display Settings' ); ?></h3>
 					<div class="setting align">
 						<span><?php _e('Align'); ?></span>
 						<div class="button-group button-large" data-setting="align">
@@ -685,86 +688,85 @@ function wp_print_media_templates() {
 					</div>
 
 					<# 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'),
-								) );
+						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
+							<label class="setting">
+								<span><?php _e('Size'); ?></span>
+								<select class="size" name="size"
+									data-setting="size"
+									<# if ( data.userSettings ) { #>
+										data-user-setting="imgsize"
+									<# } #>>
+									<?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>
+									foreach ( $sizes as $value => $name ) : ?>
+										<#
+										var size = data.sizes['<?php echo esc_js( $value ); ?>'];
+										if ( size ) { #>
+											<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
+												<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
+											</option>
+										<# } #>
+									<?php endforeach; ?>
+								</select>
+							</label>
+						<# } #>
 					<# } #>
 
 					<div class="setting link-to">
 						<span><?php _e('Link To'); ?></span>
-						<div class="button-group button-large" data-setting="link">
+						<select data-setting="link">
 						<# if ( data.attachment ) { #>
-							<button class="button" value="file">
+							<option value="file">
 								<?php esc_attr_e('Media File'); ?>
-							</button>
-							<button class="button" value="post">
+							</option>
+							<option value="post">
 								<?php esc_attr_e('Attachment Page'); ?>
-							</button>
+							</option>
 						<# } else { #>
-							<button class="button" value="file">
+							<option value="file">
 								<?php esc_attr_e('Image URL'); ?>
-							</button>
+							</option>
 						<# } #>
-							<button class="button" value="custom">
+							<option value="custom">
 								<?php esc_attr_e('Custom URL'); ?>
-							</button>
-							<button class="button active" value="none">
+							</option>
+							<option value="none">
 								<?php esc_attr_e('None'); ?>
-							</button>
-						</div>
+							</option>
+						</select>
 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
 					</div>
-
-
-					<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>
-						</div>
-						<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 class="advanced">
+						<a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
+						<div class="hidden">
+							<label class="setting title-text">
+								<span><?php _e('Image Title Attribute'); ?></span>
+								<input type="text" data-setting="title" value="{{ data.model.title }}" />
+							</label>
+							<label class="setting extra-classes">
+								<span><?php _e('Image CSS Class'); ?></span>
+								<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+							</label>
+							<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>
 							</div>
+							<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('Link CSS Class'); ?></span>
+								<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+							</label>
 						</div>
 					</div>
-
-				</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>
 			</div>
 		</div>