wp/wp-includes/media-template.php
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 9 177826044cd9
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
    48  * @since 3.9.0
    48  * @since 3.9.0
    49  */
    49  */
    50 function wp_underscore_video_template() {
    50 function wp_underscore_video_template() {
    51 	$video_types = wp_get_video_extensions();
    51 	$video_types = wp_get_video_extensions();
    52 ?>
    52 ?>
    53 <#  var w_rule = h_rule = '', classes = [],
    53 <#  var w_rule = '', classes = [],
    54 		w, h, settings = wp.media.view.settings,
    54 		w, h, settings = wp.media.view.settings,
    55 		isYouTube = isVimeo = false;
    55 		isYouTube = isVimeo = false;
    56 
    56 
    57 	if ( ! _.isEmpty( data.model.src ) ) {
    57 	if ( ! _.isEmpty( data.model.src ) ) {
    58 		isYouTube = data.model.src.match(/youtube|youtu\.be/);
    58 		isYouTube = data.model.src.match(/youtube|youtu\.be/);
    67 
    67 
    68 	if ( w !== data.model.width ) {
    68 	if ( w !== data.model.width ) {
    69 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
    69 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
    70 	} else {
    70 	} else {
    71 		h = data.model.height;
    71 		h = data.model.height;
    72 	}
    72  	}
    73 
    73 
    74 	if ( w ) {
    74 	if ( w ) {
    75 		w_rule = 'width: ' + w + 'px; ';
    75 		w_rule = 'width: ' + w + 'px; ';
    76 	}
    76 	}
    77 	if ( h ) {
       
    78 		h_rule = 'height: ' + h + 'px;';
       
    79 	}
       
    80 
    77 
    81 	if ( isYouTube ) {
    78 	if ( isYouTube ) {
    82 		classes.push( 'youtube-video' );
    79 		classes.push( 'youtube-video' );
    83 	}
    80 	}
    84 
    81 
    85 	if ( isVimeo ) {
    82 	if ( isVimeo ) {
    86 		classes.push( 'vimeo-video' );
    83 		classes.push( 'vimeo-video' );
    87 	}
    84 	}
    88 
    85 
    89 #>
    86 #>
    90 <div style="{{ w_rule }}{{ h_rule }}" class="wp-video">
    87 <div style="{{ w_rule }}" class="wp-video">
    91 <video controls
    88 <video controls
    92 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
    89 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
    93 	<# if ( w ) { #>width="{{ w }}"<# } #>
    90 	<# if ( w ) { #>width="{{ w }}"<# } #>
    94 	<# if ( h ) { #>height="{{ h }}"<# } #>
    91 	<# if ( h ) { #>height="{{ h }}"<# } #>
    95 	<?php
    92 	<?php
   134 
   131 
   135 /**
   132 /**
   136  * Prints the templates used in the media manager.
   133  * Prints the templates used in the media manager.
   137  *
   134  *
   138  * @since 3.5.0
   135  * @since 3.5.0
       
   136  *
       
   137  * @global bool $is_IE
   139  */
   138  */
   140 function wp_print_media_templates() {
   139 function wp_print_media_templates() {
   141 	global $is_IE;
   140 	global $is_IE;
   142 	$class = 'media-modal wp-core-ui';
   141 	$class = 'media-modal wp-core-ui';
   143 	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
   142 	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
   161 		<div class="media-frame-toolbar"></div>
   160 		<div class="media-frame-toolbar"></div>
   162 		<div class="media-frame-uploader"></div>
   161 		<div class="media-frame-uploader"></div>
   163 	</script>
   162 	</script>
   164 
   163 
   165 	<script type="text/html" id="tmpl-media-modal">
   164 	<script type="text/html" id="tmpl-media-modal">
   166 		<div class="<?php echo $class; ?>">
   165 		<div tabindex="0" class="<?php echo $class; ?>">
   167 			<a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
   166 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
   168 			<div class="media-modal-content"></div>
   167 			<div class="media-modal-content"></div>
   169 		</div>
   168 		</div>
   170 		<div class="media-modal-backdrop"></div>
   169 		<div class="media-modal-backdrop"></div>
   171 	</script>
   170 	</script>
   172 
   171 
   173 	<script type="text/html" id="tmpl-uploader-window">
   172 	<script type="text/html" id="tmpl-uploader-window">
   174 		<div class="uploader-window-content">
   173 		<div class="uploader-window-content">
   175 			<h3><?php _e( 'Drop files to upload' ); ?></h3>
   174 			<h1><?php _e( 'Drop files to upload' ); ?></h1>
   176 		</div>
   175 		</div>
   177 	</script>
   176 	</script>
   178 
   177 
   179 	<script type="text/html" id="tmpl-uploader-editor">
   178 	<script type="text/html" id="tmpl-uploader-editor">
   180 		<div class="uploader-editor-content">
   179 		<div class="uploader-editor-content">
   187 		<# if ( data.canClose ) { #>
   186 		<# if ( data.canClose ) { #>
   188 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
   187 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
   189 		<# } #>
   188 		<# } #>
   190 		<div class="uploader-inline-content {{ messageClass }}">
   189 		<div class="uploader-inline-content {{ messageClass }}">
   191 		<# if ( data.message ) { #>
   190 		<# if ( data.message ) { #>
   192 			<h3 class="upload-message">{{ data.message }}</h3>
   191 			<h2 class="upload-message">{{ data.message }}</h2>
   193 		<# } #>
   192 		<# } #>
   194 		<?php if ( ! _device_can_upload() ) : ?>
   193 		<?php if ( ! _device_can_upload() ) : ?>
   195 			<h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ); ?></h3>
   194 			<h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
   196 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   195 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   197 			<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
   196 			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
   198 			<?php
   197 			<?php
   199 			/** This action is documented in wp-admin/includes/media.php */
   198 			/** This action is documented in wp-admin/includes/media.php */
   200 			do_action( 'upload_ui_over_quota' ); ?>
   199 			do_action( 'upload_ui_over_quota' ); ?>
   201 
   200 
   202 		<?php else : ?>
   201 		<?php else : ?>
   203 			<div class="upload-ui">
   202 			<div class="upload-ui">
   204 				<h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
   203 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
   205 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   204 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   206 				<a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
   205 				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
   207 			</div>
   206 			</div>
   208 
   207 
   209 			<div class="upload-inline-status"></div>
   208 			<div class="upload-inline-status"></div>
   210 
   209 
   211 			<div class="post-upload-ui">
   210 			<div class="post-upload-ui">
   234 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
   233 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
   235 				?></p>
   234 				?></p>
   236 
   235 
   237 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   236 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   238 					<p class="suggested-dimensions">
   237 					<p class="suggested-dimensions">
   239 						<?php _e( 'Suggested image dimensions:' ); ?> {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
   238 						<?php
       
   239 							/* translators: 1: suggested width number, 2: suggested height number. */
       
   240 							printf( __( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}', '{{data.suggestedHeight}}' );
       
   241 						?>
   240 					</p>
   242 					</p>
   241 				<# } #>
   243 				<# } #>
   242 
   244 
   243 				<?php
   245 				<?php
   244 				/** This action is documented in wp-admin/includes/media.php */
   246 				/** This action is documented in wp-admin/includes/media.php */
   256 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
   258 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
   257 		</a>
   259 		</a>
   258 	</script>
   260 	</script>
   259 
   261 
   260 	<script type="text/html" id="tmpl-uploader-status">
   262 	<script type="text/html" id="tmpl-uploader-status">
   261 		<h3><?php _e( 'Uploading' ); ?></h3>
   263 		<h2><?php _e( 'Uploading' ); ?></h2>
   262 		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
   264 		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
   263 
   265 
   264 		<div class="media-progress-bar"><div></div></div>
   266 		<div class="media-progress-bar"><div></div></div>
   265 		<div class="upload-details">
   267 		<div class="upload-details">
   266 			<span class="upload-count">
   268 			<span class="upload-count">
   267 				<span class="upload-index"></span> / <span class="upload-total"></span>
   269 				<span class="upload-index"></span> / <span class="upload-total"></span>
   271 		</div>
   273 		</div>
   272 		<div class="upload-errors"></div>
   274 		<div class="upload-errors"></div>
   273 	</script>
   275 	</script>
   274 
   276 
   275 	<script type="text/html" id="tmpl-uploader-status-error">
   277 	<script type="text/html" id="tmpl-uploader-status-error">
   276 		<span class="upload-error-label"><?php _e('Error'); ?></span>
       
   277 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   278 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   278 		<span class="upload-error-message">{{ data.message }}</span>
   279 		<span class="upload-error-message">{{ data.message }}</span>
   279 	</script>
   280 	</script>
   280 
   281 
   281 	<script type="text/html" id="tmpl-edit-attachment-frame">
   282 	<script type="text/html" id="tmpl-edit-attachment-frame">
   290 	<script type="text/html" id="tmpl-attachment-details-two-column">
   291 	<script type="text/html" id="tmpl-attachment-details-two-column">
   291 		<div class="attachment-media-view {{ data.orientation }}">
   292 		<div class="attachment-media-view {{ data.orientation }}">
   292 			<div class="thumbnail thumbnail-{{ data.type }}">
   293 			<div class="thumbnail thumbnail-{{ data.type }}">
   293 				<# if ( data.uploading ) { #>
   294 				<# if ( data.uploading ) { #>
   294 					<div class="media-progress-bar"><div></div></div>
   295 					<div class="media-progress-bar"><div></div></div>
   295 				<# } else if ( 'image' === data.type && data.sizes && data.sizes.large ) { #>
   296 				<# } else if ( data.sizes && data.sizes.large ) { #>
   296 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" />
   297 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
   297 				<# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>
   298 				<# } else if ( data.sizes && data.sizes.full ) { #>
   298 					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
   299 					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
   299 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
   300 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
   300 					<img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
   301 					<img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
   301 				<# } #>
   302 				<# } #>
   302 
   303 
   303 				<# if ( 'audio' === data.type ) { #>
   304 				<# if ( 'audio' === data.type ) { #>
   304 				<div class="wp-media-wrapper">
   305 				<div class="wp-media-wrapper">
   305 					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
   306 					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
   306 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
   307 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
   307 					</audio>
   308 					</audio>
   308 				</div>
   309 				</div>
   309 				<# } else if ( 'video' === data.type ) {
   310 				<# } else if ( 'video' === data.type ) {
   310 					var w_rule = h_rule = '';
   311 					var w_rule = '';
   311 					if ( data.width ) {
   312 					if ( data.width ) {
   312 						w_rule = 'width: ' + data.width + 'px;';
   313 						w_rule = 'width: ' + data.width + 'px;';
   313 					} else if ( wp.media.view.settings.contentWidth ) {
   314 					} else if ( wp.media.view.settings.contentWidth ) {
   314 						w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
   315 						w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
   315 					}
   316 					}
   316 					if ( data.height ) {
       
   317 						h_rule = 'height: ' + data.height + 'px;';
       
   318 					}
       
   319 				#>
   317 				#>
   320 				<div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
   318 				<div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
   321 					<video controls="controls" class="wp-video-shortcode" preload="metadata"
   319 					<video controls="controls" class="wp-video-shortcode" preload="metadata"
   322 						<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
   320 						<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
   323 						<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
   321 						<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
   324 						<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
   322 						<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
   325 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
   323 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
   327 				</div>
   325 				</div>
   328 				<# } #>
   326 				<# } #>
   329 
   327 
   330 				<div class="attachment-actions">
   328 				<div class="attachment-actions">
   331 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
   329 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
   332 						<a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
   330 					<button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
       
   331 					<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
       
   332 					<?php _e( 'Document Preview' ); ?>
   333 					<# } #>
   333 					<# } #>
   334 				</div>
   334 				</div>
   335 			</div>
   335 			</div>
   336 		</div>
   336 		</div>
   337 		<div class="attachment-info">
   337 		<div class="attachment-info">
   375 				<label class="setting" data-setting="url">
   375 				<label class="setting" data-setting="url">
   376 					<span class="name"><?php _e('URL'); ?></span>
   376 					<span class="name"><?php _e('URL'); ?></span>
   377 					<input type="text" value="{{ data.url }}" readonly />
   377 					<input type="text" value="{{ data.url }}" readonly />
   378 				</label>
   378 				</label>
   379 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   379 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
       
   380 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   380 				<label class="setting" data-setting="title">
   381 				<label class="setting" data-setting="title">
   381 					<span class="name"><?php _e('Title'); ?></span>
   382 					<span class="name"><?php _e('Title'); ?></span>
   382 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   383 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   383 				</label>
   384 				</label>
       
   385 				<?php endif; ?>
   384 				<# if ( 'audio' === data.type ) { #>
   386 				<# if ( 'audio' === data.type ) { #>
   385 				<?php foreach ( array(
   387 				<?php foreach ( array(
   386 					'artist' => __( 'Artist' ),
   388 					'artist' => __( 'Artist' ),
   387 					'album' => __( 'Album' ),
   389 					'album' => __( 'Album' ),
   388 				) as $key => $label ) : ?>
   390 				) as $key => $label ) : ?>
   429 					<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
   431 					<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
   430 				<# } #>
   432 				<# } #>
   431 				<# if ( ! data.uploading && data.can.remove ) { #> |
   433 				<# if ( ! data.uploading && data.can.remove ) { #> |
   432 					<?php if ( MEDIA_TRASH ): ?>
   434 					<?php if ( MEDIA_TRASH ): ?>
   433 						<# if ( 'trash' === data.status ) { #>
   435 						<# if ( 'trash' === data.status ) { #>
   434 							<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
   436 							<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
   435 						<# } else { #>
   437 						<# } else { #>
   436 							<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
   438 							<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
   437 						<# } #>
   439 						<# } #>
   438 					<?php else: ?>
   440 					<?php else: ?>
   439 						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
   441 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   440 					<?php endif; ?>
   442 					<?php endif; ?>
   441 				<# } #>
   443 				<# } #>
   442 			</div>
   444 			</div>
   443 
   445 
   444 		</div>
   446 		</div>
   454 						<img src="{{ data.size.url }}" draggable="false" alt="" />
   456 						<img src="{{ data.size.url }}" draggable="false" alt="" />
   455 					</div>
   457 					</div>
   456 				<# } else { #>
   458 				<# } else { #>
   457 					<div class="centered">
   459 					<div class="centered">
   458 						<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
   460 						<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
   459 							<img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
   461 							<img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
       
   462 						<# } else if ( data.sizes && data.sizes.medium ) { #>
       
   463 							<img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
   460 						<# } else { #>
   464 						<# } else { #>
   461 							<img src="{{ data.icon }}" class="icon" draggable="false" />
   465 							<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
   462 						<# } #>
   466 						<# } #>
   463 					</div>
   467 					</div>
   464 					<div class="filename">
   468 					<div class="filename">
   465 						<div>{{ data.filename }}</div>
   469 						<div>{{ data.filename }}</div>
   466 					</div>
   470 					</div>
   467 				<# } #>
   471 				<# } #>
   468 			</div>
   472 			</div>
   469 			<# if ( data.buttons.close ) { #>
   473 			<# if ( data.buttons.close ) { #>
   470 				<a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
   474 				<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
   471 			<# } #>
   475 			<# } #>
   472 		</div>
   476 		</div>
   473 		<# if ( data.buttons.check ) { #>
   477 		<# if ( data.buttons.check ) { #>
   474 			<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
   478 			<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
   475 		<# } #>
   479 		<# } #>
   476 		<#
   480 		<#
   477 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   481 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   478 		if ( data.describe ) {
   482 		if ( data.describe ) {
   479 			if ( 'image' === data.type ) { #>
   483 			if ( 'image' === data.type ) { #>
   491 			<# }
   495 			<# }
   492 		} #>
   496 		} #>
   493 	</script>
   497 	</script>
   494 
   498 
   495 	<script type="text/html" id="tmpl-attachment-details">
   499 	<script type="text/html" id="tmpl-attachment-details">
   496 		<h3>
   500 		<h2>
   497 			<?php _e('Attachment Details'); ?>
   501 			<?php _e( 'Attachment Details' ); ?>
   498 
       
   499 			<span class="settings-save-status">
   502 			<span class="settings-save-status">
   500 				<span class="spinner"></span>
   503 				<span class="spinner"></span>
   501 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   504 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   502 			</span>
   505 			</span>
   503 		</h3>
   506 		</h2>
   504 		<div class="attachment-info">
   507 		<div class="attachment-info">
   505 			<div class="thumbnail thumbnail-{{ data.type }}">
   508 			<div class="thumbnail thumbnail-{{ data.type }}">
   506 				<# if ( data.uploading ) { #>
   509 				<# if ( data.uploading ) { #>
   507 					<div class="media-progress-bar"><div></div></div>
   510 					<div class="media-progress-bar"><div></div></div>
   508 				<# } else if ( 'image' === data.type && data.sizes ) { #>
   511 				<# } else if ( 'image' === data.type && data.sizes ) { #>
   509 					<img src="{{ data.size.url }}" draggable="false" />
   512 					<img src="{{ data.size.url }}" draggable="false" alt="" />
   510 				<# } else { #>
   513 				<# } else { #>
   511 					<img src="{{ data.icon }}" class="icon" draggable="false" />
   514 					<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
   512 				<# } #>
   515 				<# } #>
   513 			</div>
   516 			</div>
   514 			<div class="details">
   517 			<div class="details">
   515 				<div class="filename">{{ data.filename }}</div>
   518 				<div class="filename">{{ data.filename }}</div>
   516 				<div class="uploaded">{{ data.dateFormatted }}</div>
   519 				<div class="uploaded">{{ data.dateFormatted }}</div>
   521 						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
   524 						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
   522 					<# } #>
   525 					<# } #>
   523 
   526 
   524 					<# if ( data.can.save && data.sizes ) { #>
   527 					<# if ( data.can.save && data.sizes ) { #>
   525 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   528 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   526 						<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
       
   527 					<# } #>
   529 					<# } #>
   528 				<# } #>
   530 				<# } #>
   529 
   531 
   530 				<# if ( data.fileLength ) { #>
   532 				<# if ( data.fileLength ) { #>
   531 					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
   533 					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
   532 				<# } #>
   534 				<# } #>
   533 
   535 
   534 				<# if ( ! data.uploading && data.can.remove ) { #>
   536 				<# if ( ! data.uploading && data.can.remove ) { #>
   535 					<?php if ( MEDIA_TRASH ): ?>
   537 					<?php if ( MEDIA_TRASH ): ?>
   536 					<# if ( 'trash' === data.status ) { #>
   538 					<# if ( 'trash' === data.status ) { #>
   537 						<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
   539 						<button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
   538 					<# } else { #>
   540 					<# } else { #>
   539 						<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
   541 						<button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
   540 					<# } #>
   542 					<# } #>
   541 					<?php else: ?>
   543 					<?php else: ?>
   542 						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
   544 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   543 					<?php endif; ?>
   545 					<?php endif; ?>
   544 				<# } #>
   546 				<# } #>
   545 
   547 
   546 				<div class="compat-meta">
   548 				<div class="compat-meta">
   547 					<# if ( data.compat && data.compat.meta ) { #>
   549 					<# if ( data.compat && data.compat.meta ) { #>
   554 		<label class="setting" data-setting="url">
   556 		<label class="setting" data-setting="url">
   555 			<span class="name"><?php _e('URL'); ?></span>
   557 			<span class="name"><?php _e('URL'); ?></span>
   556 			<input type="text" value="{{ data.url }}" readonly />
   558 			<input type="text" value="{{ data.url }}" readonly />
   557 		</label>
   559 		</label>
   558 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   560 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
       
   561 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   559 		<label class="setting" data-setting="title">
   562 		<label class="setting" data-setting="title">
   560 			<span class="name"><?php _e('Title'); ?></span>
   563 			<span class="name"><?php _e('Title'); ?></span>
   561 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   564 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   562 		</label>
   565 		</label>
       
   566 		<?php endif; ?>
   563 		<# if ( 'audio' === data.type ) { #>
   567 		<# if ( 'audio' === data.type ) { #>
   564 		<?php foreach ( array(
   568 		<?php foreach ( array(
   565 			'artist' => __( 'Artist' ),
   569 			'artist' => __( 'Artist' ),
   566 			'album' => __( 'Album' ),
   570 			'album' => __( 'Album' ),
   567 		) as $key => $label ) : ?>
   571 		) as $key => $label ) : ?>
   589 
   593 
   590 	<script type="text/html" id="tmpl-media-selection">
   594 	<script type="text/html" id="tmpl-media-selection">
   591 		<div class="selection-info">
   595 		<div class="selection-info">
   592 			<span class="count"></span>
   596 			<span class="count"></span>
   593 			<# if ( data.editable ) { #>
   597 			<# if ( data.editable ) { #>
   594 				<a class="edit-selection" href="#"><?php _e( 'Edit Selection' ); ?></a>
   598 				<button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
   595 			<# } #>
   599 			<# } #>
   596 			<# if ( data.clearable ) { #>
   600 			<# if ( data.clearable ) { #>
   597 				<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
   601 				<button type="button" class="button-link clear-selection"><?php _e( 'Clear' ); ?></button>
   598 			<# } #>
   602 			<# } #>
   599 		</div>
   603 		</div>
   600 		<div class="selection-view"></div>
   604 		<div class="selection-view"></div>
   601 	</script>
   605 	</script>
   602 
   606 
   603 	<script type="text/html" id="tmpl-attachment-display-settings">
   607 	<script type="text/html" id="tmpl-attachment-display-settings">
   604 		<h3><?php _e('Attachment Display Settings'); ?></h3>
   608 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
   605 
   609 
   606 		<# if ( 'image' === data.type ) { #>
   610 		<# if ( 'image' === data.type ) { #>
   607 			<label class="setting">
   611 			<label class="setting align">
   608 				<span><?php _e('Alignment'); ?></span>
   612 				<span><?php _e('Alignment'); ?></span>
   609 				<select class="alignment"
   613 				<select class="alignment"
   610 					data-setting="align"
   614 					data-setting="align"
   611 					<# if ( data.userSettings ) { #>
   615 					<# if ( data.userSettings ) { #>
   612 						data-user-setting="align"
   616 						data-user-setting="align"
   613 					<# } #>>
   617 					<# } #>>
   614 
   618 
   615 					<option value="left">
   619 					<option value="left">
   616 						<?php esc_attr_e('Left'); ?>
   620 						<?php esc_html_e( 'Left' ); ?>
   617 					</option>
   621 					</option>
   618 					<option value="center">
   622 					<option value="center">
   619 						<?php esc_attr_e('Center'); ?>
   623 						<?php esc_html_e( 'Center' ); ?>
   620 					</option>
   624 					</option>
   621 					<option value="right">
   625 					<option value="right">
   622 						<?php esc_attr_e('Right'); ?>
   626 						<?php esc_html_e( 'Right' ); ?>
   623 					</option>
   627 					</option>
   624 					<option value="none" selected>
   628 					<option value="none" selected>
   625 						<?php esc_attr_e('None'); ?>
   629 						<?php esc_html_e( 'None' ); ?>
   626 					</option>
   630 					</option>
   627 				</select>
   631 				</select>
   628 			</label>
   632 			</label>
   629 		<# } #>
   633 		<# } #>
   630 
   634 
   642 						data-user-setting="urlbutton"
   646 						data-user-setting="urlbutton"
   643 					<# } #>>
   647 					<# } #>>
   644 
   648 
   645 				<# if ( data.model.canEmbed ) { #>
   649 				<# if ( data.model.canEmbed ) { #>
   646 					<option value="embed" selected>
   650 					<option value="embed" selected>
   647 						<?php esc_attr_e('Embed Media Player'); ?>
   651 						<?php esc_html_e( 'Embed Media Player' ); ?>
   648 					</option>
   652 					</option>
   649 					<option value="file">
   653 					<option value="file">
   650 				<# } else { #>
   654 				<# } else { #>
   651 					<option value="file" selected>
   655 					<option value="none" selected>
       
   656 						<?php esc_html_e( 'None' ); ?>
       
   657 					</option>
       
   658 					<option value="file">
   652 				<# } #>
   659 				<# } #>
   653 					<# if ( data.model.canEmbed ) { #>
   660 					<# if ( data.model.canEmbed ) { #>
   654 						<?php esc_attr_e('Link to Media File'); ?>
   661 						<?php esc_html_e( 'Link to Media File' ); ?>
   655 					<# } else { #>
   662 					<# } else { #>
   656 						<?php esc_attr_e('Media File'); ?>
   663 						<?php esc_html_e( 'Media File' ); ?>
   657 					<# } #>
   664 					<# } #>
   658 					</option>
   665 					</option>
   659 					<option value="post">
   666 					<option value="post">
   660 					<# if ( data.model.canEmbed ) { #>
   667 					<# if ( data.model.canEmbed ) { #>
   661 						<?php esc_attr_e('Link to Attachment Page'); ?>
   668 						<?php esc_html_e( 'Link to Attachment Page' ); ?>
   662 					<# } else { #>
   669 					<# } else { #>
   663 						<?php esc_attr_e('Attachment Page'); ?>
   670 						<?php esc_html_e( 'Attachment Page' ); ?>
   664 					<# } #>
   671 					<# } #>
   665 					</option>
   672 					</option>
   666 				<# if ( 'image' === data.type ) { #>
   673 				<# if ( 'image' === data.type ) { #>
   667 					<option value="custom">
   674 					<option value="custom">
   668 						<?php esc_attr_e('Custom URL'); ?>
   675 						<?php esc_html_e( 'Custom URL' ); ?>
   669 					</option>
       
   670 					<option value="none">
       
   671 						<?php esc_attr_e('None'); ?>
       
   672 					</option>
   676 					</option>
   673 				<# } #>
   677 				<# } #>
   674 				</select>
   678 				</select>
   675 			</label>
   679 			</label>
   676 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   680 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   706 			</label>
   710 			</label>
   707 		<# } #>
   711 		<# } #>
   708 	</script>
   712 	</script>
   709 
   713 
   710 	<script type="text/html" id="tmpl-gallery-settings">
   714 	<script type="text/html" id="tmpl-gallery-settings">
   711 		<h3><?php _e('Gallery Settings'); ?></h3>
   715 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
   712 
   716 
   713 		<label class="setting">
   717 		<label class="setting">
   714 			<span><?php _e('Link To'); ?></span>
   718 			<span><?php _e('Link To'); ?></span>
   715 			<select class="link-to"
   719 			<select class="link-to"
   716 				data-setting="link"
   720 				data-setting="link"
   719 				<# } #>>
   723 				<# } #>>
   720 
   724 
   721 				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
   725 				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
   722 					#>selected="selected"<# }
   726 					#>selected="selected"<# }
   723 				#>>
   727 				#>>
   724 					<?php esc_attr_e('Attachment Page'); ?>
   728 					<?php esc_html_e( 'Attachment Page' ); ?>
   725 				</option>
   729 				</option>
   726 				<option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   730 				<option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   727 					<?php esc_attr_e('Media File'); ?>
   731 					<?php esc_html_e( 'Media File' ); ?>
   728 				</option>
   732 				</option>
   729 				<option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   733 				<option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   730 					<?php esc_attr_e('None'); ?>
   734 					<?php esc_html_e( 'None' ); ?>
   731 				</option>
   735 				</option>
   732 			</select>
   736 			</select>
   733 		</label>
   737 		</label>
   734 
   738 
   735 		<label class="setting">
   739 		<label class="setting">
   758 				<# if ( data.userSettings ) { #>
   762 				<# if ( data.userSettings ) { #>
   759 					data-user-setting="imgsize"
   763 					data-user-setting="imgsize"
   760 				<# } #>
   764 				<# } #>
   761 				>
   765 				>
   762 				<?php
   766 				<?php
   763 				// This filter is documented in wp-admin/includes/media.php
   767 				/** This filter is documented in wp-admin/includes/media.php */
   764 				$size_names = apply_filters( 'image_size_names_choose', array(
   768 				$size_names = apply_filters( 'image_size_names_choose', array(
   765 					'thumbnail' => __( 'Thumbnail' ),
   769 					'thumbnail' => __( 'Thumbnail' ),
   766 					'medium'    => __( 'Medium' ),
   770 					'medium'    => __( 'Medium' ),
   767 					'large'     => __( 'Large' ),
   771 					'large'     => __( 'Large' ),
   768 					'full'      => __( 'Full Size' ),
   772 					'full'      => __( 'Full Size' ),
   776 			</select>
   780 			</select>
   777 		</label>
   781 		</label>
   778 	</script>
   782 	</script>
   779 
   783 
   780 	<script type="text/html" id="tmpl-playlist-settings">
   784 	<script type="text/html" id="tmpl-playlist-settings">
   781 		<h3><?php _e( 'Playlist Settings' ); ?></h3>
   785 		<h2><?php _e( 'Playlist Settings' ); ?></h2>
   782 
   786 
   783 		<# var emptyModel = _.isEmpty( data.model ),
   787 		<# var emptyModel = _.isEmpty( data.model ),
   784 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
   788 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
   785 
   789 
   786 		<label class="setting">
   790 		<label class="setting">
   821 		</div>
   825 		</div>
   822 	</script>
   826 	</script>
   823 
   827 
   824 	<script type="text/html" id="tmpl-embed-image-settings">
   828 	<script type="text/html" id="tmpl-embed-image-settings">
   825 		<div class="thumbnail">
   829 		<div class="thumbnail">
   826 			<img src="{{ data.model.url }}" draggable="false" />
   830 			<img src="{{ data.model.url }}" draggable="false" alt="" />
   827 		</div>
   831 		</div>
   828 
   832 
   829 		<?php
   833 		<?php
   830 		/** This filter is documented in wp-admin/includes/media.php */
   834 		/** This filter is documented in wp-admin/includes/media.php */
   831 		if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   835 		if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   842 
   846 
   843 		<div class="setting align">
   847 		<div class="setting align">
   844 			<span><?php _e('Align'); ?></span>
   848 			<span><?php _e('Align'); ?></span>
   845 			<div class="button-group button-large" data-setting="align">
   849 			<div class="button-group button-large" data-setting="align">
   846 				<button class="button" value="left">
   850 				<button class="button" value="left">
   847 					<?php esc_attr_e('Left'); ?>
   851 					<?php esc_html_e( 'Left' ); ?>
   848 				</button>
   852 				</button>
   849 				<button class="button" value="center">
   853 				<button class="button" value="center">
   850 					<?php esc_attr_e('Center'); ?>
   854 					<?php esc_html_e( 'Center' ); ?>
   851 				</button>
   855 				</button>
   852 				<button class="button" value="right">
   856 				<button class="button" value="right">
   853 					<?php esc_attr_e('Right'); ?>
   857 					<?php esc_html_e( 'Right' ); ?>
   854 				</button>
   858 				</button>
   855 				<button class="button active" value="none">
   859 				<button class="button active" value="none">
   856 					<?php esc_attr_e('None'); ?>
   860 					<?php esc_html_e( 'None' ); ?>
   857 				</button>
   861 				</button>
   858 			</div>
   862 			</div>
   859 		</div>
   863 		</div>
   860 
   864 
   861 		<div class="setting link-to">
   865 		<div class="setting link-to">
   862 			<span><?php _e('Link To'); ?></span>
   866 			<span><?php _e('Link To'); ?></span>
   863 			<div class="button-group button-large" data-setting="link">
   867 			<div class="button-group button-large" data-setting="link">
   864 				<button class="button" value="file">
   868 				<button class="button" value="file">
   865 					<?php esc_attr_e('Image URL'); ?>
   869 					<?php esc_html_e( 'Image URL' ); ?>
   866 				</button>
   870 				</button>
   867 				<button class="button" value="custom">
   871 				<button class="button" value="custom">
   868 					<?php esc_attr_e('Custom URL'); ?>
   872 					<?php esc_html_e( 'Custom URL' ); ?>
   869 				</button>
   873 				</button>
   870 				<button class="button active" value="none">
   874 				<button class="button active" value="none">
   871 					<?php esc_attr_e('None'); ?>
   875 					<?php esc_html_e( 'None' ); ?>
   872 				</button>
   876 				</button>
   873 			</div>
   877 			</div>
   874 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   878 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   875 		</div>
   879 		</div>
   876 	</script>
   880 	</script>
   878 	<script type="text/html" id="tmpl-image-details">
   882 	<script type="text/html" id="tmpl-image-details">
   879 		<div class="media-embed">
   883 		<div class="media-embed">
   880 			<div class="embed-media-settings">
   884 			<div class="embed-media-settings">
   881 				<div class="column-image">
   885 				<div class="column-image">
   882 					<div class="image">
   886 					<div class="image">
   883 						<img src="{{ data.model.url }}" draggable="false" />
   887 						<img src="{{ data.model.url }}" draggable="false" alt="" />
   884 
   888 
   885 						<# if ( data.attachment && window.imageEdit ) { #>
   889 						<# if ( data.attachment && window.imageEdit ) { #>
   886 							<div class="actions">
   890 							<div class="actions">
   887 								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
   891 								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
   888 								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
   892 								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
   903 					<label class="setting alt-text">
   907 					<label class="setting alt-text">
   904 						<span><?php _e('Alternative Text'); ?></span>
   908 						<span><?php _e('Alternative Text'); ?></span>
   905 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
   909 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
   906 					</label>
   910 					</label>
   907 
   911 
   908 					<h3><?php _e( 'Display Settings' ); ?></h3>
   912 					<h2><?php _e( 'Display Settings' ); ?></h2>
   909 					<div class="setting align">
   913 					<div class="setting align">
   910 						<span><?php _e('Align'); ?></span>
   914 						<span><?php _e('Align'); ?></span>
   911 						<div class="button-group button-large" data-setting="align">
   915 						<div class="button-group button-large" data-setting="align">
   912 							<button class="button" value="left">
   916 							<button class="button" value="left">
   913 								<?php esc_attr_e('Left'); ?>
   917 								<?php esc_html_e( 'Left' ); ?>
   914 							</button>
   918 							</button>
   915 							<button class="button" value="center">
   919 							<button class="button" value="center">
   916 								<?php esc_attr_e('Center'); ?>
   920 								<?php esc_html_e( 'Center' ); ?>
   917 							</button>
   921 							</button>
   918 							<button class="button" value="right">
   922 							<button class="button" value="right">
   919 								<?php esc_attr_e('Right'); ?>
   923 								<?php esc_html_e( 'Right' ); ?>
   920 							</button>
   924 							</button>
   921 							<button class="button active" value="none">
   925 							<button class="button active" value="none">
   922 								<?php esc_attr_e('None'); ?>
   926 								<?php esc_html_e( 'None' ); ?>
   923 							</button>
   927 							</button>
   924 						</div>
   928 						</div>
   925 					</div>
   929 					</div>
   926 
   930 
   927 					<# if ( data.attachment ) { #>
   931 					<# if ( data.attachment ) { #>
   965 					<div class="setting link-to">
   969 					<div class="setting link-to">
   966 						<span><?php _e('Link To'); ?></span>
   970 						<span><?php _e('Link To'); ?></span>
   967 						<select data-setting="link">
   971 						<select data-setting="link">
   968 						<# if ( data.attachment ) { #>
   972 						<# if ( data.attachment ) { #>
   969 							<option value="file">
   973 							<option value="file">
   970 								<?php esc_attr_e('Media File'); ?>
   974 								<?php esc_html_e( 'Media File' ); ?>
   971 							</option>
   975 							</option>
   972 							<option value="post">
   976 							<option value="post">
   973 								<?php esc_attr_e('Attachment Page'); ?>
   977 								<?php esc_html_e( 'Attachment Page' ); ?>
   974 							</option>
   978 							</option>
   975 						<# } else { #>
   979 						<# } else { #>
   976 							<option value="file">
   980 							<option value="file">
   977 								<?php esc_attr_e('Image URL'); ?>
   981 								<?php esc_html_e( 'Image URL' ); ?>
   978 							</option>
   982 							</option>
   979 						<# } #>
   983 						<# } #>
   980 							<option value="custom">
   984 							<option value="custom">
   981 								<?php esc_attr_e('Custom URL'); ?>
   985 								<?php esc_html_e( 'Custom URL' ); ?>
   982 							</option>
   986 							</option>
   983 							<option value="none">
   987 							<option value="none">
   984 								<?php esc_attr_e('None'); ?>
   988 								<?php esc_html_e( 'None' ); ?>
   985 							</option>
   989 							</option>
   986 						</select>
   990 						</select>
   987 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
   991 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
   988 					</div>
   992 					</div>
   989 					<div class="advanced-section">
   993 					<div class="advanced-section">
   990 						<h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
   994 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
   991 						<div class="advanced-settings hidden">
   995 						<div class="advanced-settings hidden">
   992 							<div class="advanced-image">
   996 							<div class="advanced-image">
   993 								<label class="setting title-text">
   997 								<label class="setting title-text">
   994 									<span><?php _e('Image Title Attribute'); ?></span>
   998 									<span><?php _e('Image Title Attribute'); ?></span>
   995 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
   999 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
   999 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1003 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1000 								</label>
  1004 								</label>
  1001 							</div>
  1005 							</div>
  1002 							<div class="advanced-link">
  1006 							<div class="advanced-link">
  1003 								<div class="setting link-target">
  1007 								<div class="setting link-target">
  1004 									<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>
  1008 									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
  1005 								</div>
  1009 								</div>
  1006 								<label class="setting link-rel">
  1010 								<label class="setting link-rel">
  1007 									<span><?php _e('Link Rel'); ?></span>
  1011 									<span><?php _e('Link Rel'); ?></span>
  1008 									<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
  1012 									<input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1009 								</label>
  1013 								</label>
  1010 								<label class="setting link-class-name">
  1014 								<label class="setting link-class-name">
  1011 									<span><?php _e('Link CSS Class'); ?></span>
  1015 									<span><?php _e('Link CSS Class'); ?></span>
  1012 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1016 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1013 								</label>
  1017 								</label>
  1042 					}
  1046 					}
  1043 				#>
  1047 				#>
  1044 				<label class="setting">
  1048 				<label class="setting">
  1045 					<span>SRC</span>
  1049 					<span>SRC</span>
  1046 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1050 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1047 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
  1051 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1048 				</label>
  1052 				</label>
  1049 				<# } #>
  1053 				<# } #>
  1050 				<?php
  1054 				<?php
  1051 
  1055 
  1052 				foreach ( $audio_types as $type ):
  1056 				foreach ( $audio_types as $type ):
  1056 					}
  1060 					}
  1057 				#>
  1061 				#>
  1058 				<label class="setting">
  1062 				<label class="setting">
  1059 					<span><?php echo strtoupper( $type ) ?></span>
  1063 					<span><?php echo strtoupper( $type ) ?></span>
  1060 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1064 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1061 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
  1065 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1062 				</label>
  1066 				</label>
  1063 				<# } #>
  1067 				<# } #>
  1064 				<?php endforeach ?>
  1068 				<?php endforeach ?>
  1065 
  1069 
  1066 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1070 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1081 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1085 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1082 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1086 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1083 					</div>
  1087 					</div>
  1084 				</div>
  1088 				</div>
  1085 
  1089 
  1086 				<label class="setting checkbox-setting">
  1090 				<label class="setting checkbox-setting autoplay">
  1087 					<input type="checkbox" data-setting="autoplay" />
  1091 					<input type="checkbox" data-setting="autoplay" />
  1088 					<span><?php _e( 'Autoplay' ); ?></span>
  1092 					<span><?php _e( 'Autoplay' ); ?></span>
  1089 				</label>
  1093 				</label>
  1090 
  1094 
  1091 				<label class="setting checkbox-setting">
  1095 				<label class="setting checkbox-setting">
  1125 					}
  1129 					}
  1126 				#>
  1130 				#>
  1127 				<label class="setting">
  1131 				<label class="setting">
  1128 					<span>SRC</span>
  1132 					<span>SRC</span>
  1129 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1133 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1130 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
  1134 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1131 				</label>
  1135 				</label>
  1132 				<# } #>
  1136 				<# } #>
  1133 				<?php foreach ( $video_types as $type ):
  1137 				<?php foreach ( $video_types as $type ):
  1134 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1138 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1135 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1139 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1137 					}
  1141 					}
  1138 				#>
  1142 				#>
  1139 				<label class="setting">
  1143 				<label class="setting">
  1140 					<span><?php echo strtoupper( $type ) ?></span>
  1144 					<span><?php echo strtoupper( $type ) ?></span>
  1141 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1145 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1142 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
  1146 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1143 				</label>
  1147 				</label>
  1144 				<# } #>
  1148 				<# } #>
  1145 				<?php endforeach ?>
  1149 				<?php endforeach ?>
  1146 				</div>
  1150 				</div>
  1147 
  1151 
  1158 
  1162 
  1159 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1163 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1160 				<label class="setting">
  1164 				<label class="setting">
  1161 					<span><?php _e( 'Poster Image' ); ?></span>
  1165 					<span><?php _e( 'Poster Image' ); ?></span>
  1162 					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
  1166 					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
  1163 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
  1167 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1164 				</label>
  1168 				</label>
  1165 				<# } #>
  1169 				<# } #>
  1166 				<div class="setting preload">
  1170 				<div class="setting preload">
  1167 					<span><?php _e( 'Preload' ); ?></span>
  1171 					<span><?php _e( 'Preload' ); ?></span>
  1168 					<div class="button-group button-large" data-setting="preload">
  1172 					<div class="button-group button-large" data-setting="preload">
  1170 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1174 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1171 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1175 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1172 					</div>
  1176 					</div>
  1173 				</div>
  1177 				</div>
  1174 
  1178 
  1175 				<label class="setting checkbox-setting">
  1179 				<label class="setting checkbox-setting autoplay">
  1176 					<input type="checkbox" data-setting="autoplay" />
  1180 					<input type="checkbox" data-setting="autoplay" />
  1177 					<span><?php _e( 'Autoplay' ); ?></span>
  1181 					<span><?php _e( 'Autoplay' ); ?></span>
  1178 				</label>
  1182 				</label>
  1179 
  1183 
  1180 				<label class="setting checkbox-setting">
  1184 				<label class="setting checkbox-setting">
  1190 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1194 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1191 						_.each( tracks.toArray(), function (track) {
  1195 						_.each( tracks.toArray(), function (track) {
  1192 							content += track.outerHTML; #>
  1196 							content += track.outerHTML; #>
  1193 						<p>
  1197 						<p>
  1194 							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
  1198 							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
  1195 							<a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
  1199 							<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
  1196 						</p>
  1200 						</p>
  1197 						<# } ); #>
  1201 						<# } ); #>
  1198 					<# } else { #>
  1202 					<# } else { #>
  1199 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1203 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1200 					<# } #>
  1204 					<# } #>
  1209 			<div class="gallery gallery-columns-{{ data.columns }}">
  1213 			<div class="gallery gallery-columns-{{ data.columns }}">
  1210 				<# _.each( data.attachments, function( attachment, index ) { #>
  1214 				<# _.each( data.attachments, function( attachment, index ) { #>
  1211 					<dl class="gallery-item">
  1215 					<dl class="gallery-item">
  1212 						<dt class="gallery-icon">
  1216 						<dt class="gallery-icon">
  1213 							<# if ( attachment.thumbnail ) { #>
  1217 							<# if ( attachment.thumbnail ) { #>
  1214 								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
  1218 								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="" />
  1215 							<# } else { #>
  1219 							<# } else { #>
  1216 								<img src="{{ attachment.url }}" />
  1220 								<img src="{{ attachment.url }}" alt="" />
  1217 							<# } #>
  1221 							<# } #>
  1218 						</dt>
  1222 						</dt>
  1219 						<# if ( attachment.caption ) { #>
  1223 						<# if ( attachment.caption ) { #>
  1220 							<dd class="wp-caption-text gallery-caption">
  1224 							<dd class="wp-caption-text gallery-caption">
  1221 								{{ attachment.caption }}
  1225 								{{{ data.verifyHTML( attachment.caption ) }}}
  1222 							</dd>
  1226 							</dd>
  1223 						<# } #>
  1227 						<# } #>
  1224 					</dl>
  1228 					</dl>
  1225 					<# if ( index % data.columns === data.columns - 1 ) { #>
  1229 					<# if ( index % data.columns === data.columns - 1 ) { #>
  1226 						<br style="clear: both;">
  1230 						<br style="clear: both;">
  1233 			</div>
  1237 			</div>
  1234 		<# } #>
  1238 		<# } #>
  1235 	</script>
  1239 	</script>
  1236 
  1240 
  1237 	<script type="text/html" id="tmpl-crop-content">
  1241 	<script type="text/html" id="tmpl-crop-content">
  1238 		<img class="crop-image" src="{{ data.url }}">
  1242 		<img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
  1239 		<div class="upload-errors"></div>
  1243 		<div class="upload-errors"></div>
       
  1244 	</script>
       
  1245 
       
  1246 	<script type="text/html" id="tmpl-site-icon-preview">
       
  1247 		<h2><?php _e( 'Preview' ); ?></h2>
       
  1248 		<strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
       
  1249 		<div class="favicon-preview">
       
  1250 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
       
  1251 
       
  1252 			<div class="favicon">
       
  1253 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
       
  1254 			</div>
       
  1255 			<span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
       
  1256 		</div>
       
  1257 
       
  1258 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
       
  1259 		<div class="app-icon-preview">
       
  1260 			<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
       
  1261 		</div>
  1240 	</script>
  1262 	</script>
  1241 
  1263 
  1242 	<?php
  1264 	<?php
  1243 
  1265 
  1244 	/**
  1266 	/**