PageRenderTime 208ms CodeModel.GetById 40ms app.highlight 135ms RepoModel.GetById 16ms app.codeStats 1ms

/wp-includes/media-template.php

https://bitbucket.org/acipriani/madeinapulia.com
PHP | 1235 lines | 1081 code | 101 blank | 53 comment | 53 complexity | 770521594b392db90017a2f710b6d98a MD5 | raw file
   1<?php
   2/**
   3 * WordPress media templates.
   4 *
   5 * @package WordPress
   6 * @subpackage Media
   7 * @since 3.5.0
   8 */
   9
  10/**
  11 * Output the markup for a audio tag to be used in an Underscore template
  12 * when data.model is passed.
  13 *
  14 * @since 3.9.0
  15 */
  16function wp_underscore_audio_template() {
  17	$audio_types = wp_get_audio_extensions();
  18?>
  19<audio style="visibility: hidden"
  20	controls
  21	class="wp-audio-shortcode"
  22	width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
  23	preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
  24	<#
  25	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
  26	?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
  27		#> <?php echo $attr ?><#
  28	}
  29	<?php endforeach ?>#>
  30>
  31	<# if ( ! _.isEmpty( data.model.src ) ) { #>
  32	<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
  33	<# } #>
  34
  35	<?php foreach ( $audio_types as $type ):
  36	?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
  37	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
  38	<# } #>
  39	<?php endforeach;
  40?></audio>
  41<?php
  42}
  43
  44/**
  45 * Output the markup for a video tag to be used in an Underscore template
  46 * when data.model is passed.
  47 *
  48 * @since 3.9.0
  49 */
  50function wp_underscore_video_template() {
  51	$video_types = wp_get_video_extensions();
  52?>
  53<#  var w_rule = h_rule = '',
  54		w, h, settings = wp.media.view.settings,
  55		isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
  56
  57	if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
  58		w = settings.contentWidth;
  59	} else {
  60		w = data.model.width;
  61	}
  62
  63	if ( w !== data.model.width ) {
  64		h = Math.ceil( ( data.model.height * w ) / data.model.width );
  65	} else {
  66		h = data.model.height;
  67	}
  68
  69	if ( w ) {
  70		w_rule = 'width: ' + w + 'px; ';
  71	}
  72	if ( h ) {
  73		h_rule = 'height: ' + h + 'px;';
  74	}
  75#>
  76<div style="{{ w_rule }}{{ h_rule }}" class="wp-video">
  77<video controls
  78	class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
  79	<# if ( w ) { #>width="{{ w }}"<# } #>
  80	<# if ( h ) { #>height="{{ h }}"<# } #>
  81	<?php
  82	$props = array( 'poster' => '', 'preload' => 'metadata' );
  83	foreach ( $props as $key => $value ):
  84		if ( empty( $value ) ) {
  85		?><#
  86		if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
  87			#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
  88		} #>
  89		<?php } else {
  90			echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
  91		}
  92	endforeach;
  93	?><#
  94	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
  95	?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
  96		#> <?php echo $attr ?><#
  97	}
  98	<?php endforeach ?>#>
  99>
 100	<# if ( ! _.isEmpty( data.model.src ) ) {
 101		if ( isYouTube ) { #>
 102		<source src="{{ data.model.src }}" type="video/youtube" />
 103		<# } else { #>
 104		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
 105		<# }
 106	} #>
 107
 108	<?php foreach ( $video_types as $type ):
 109	?><# if ( data.model.<?php echo $type ?> ) { #>
 110	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
 111	<# } #>
 112	<?php endforeach; ?>
 113	{{{ data.model.content }}}
 114</video>
 115</div>
 116<?php
 117}
 118
 119/**
 120 * Prints the templates used in the media manager.
 121 *
 122 * @since 3.5.0
 123 */
 124function wp_print_media_templates() {
 125	global $is_IE;
 126	$class = 'media-modal wp-core-ui';
 127	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
 128		$class .= ' ie7';
 129	?>
 130	<!--[if lte IE 8]>
 131	<style>
 132		.attachment:focus {
 133			outline: #1e8cbe solid;
 134		}
 135		.selected.attachment {
 136			outline: #1e8cbe solid;
 137		}
 138	</style>
 139	<![endif]-->
 140	<script type="text/html" id="tmpl-media-frame">
 141		<div class="media-frame-menu"></div>
 142		<div class="media-frame-title"></div>
 143		<div class="media-frame-router"></div>
 144		<div class="media-frame-content"></div>
 145		<div class="media-frame-toolbar"></div>
 146		<div class="media-frame-uploader"></div>
 147	</script>
 148
 149	<script type="text/html" id="tmpl-media-modal">
 150		<div class="<?php echo $class; ?>">
 151			<a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
 152			<div class="media-modal-content"></div>
 153		</div>
 154		<div class="media-modal-backdrop"></div>
 155	</script>
 156
 157	<script type="text/html" id="tmpl-uploader-window">
 158		<div class="uploader-window-content">
 159			<h3><?php _e( 'Drop files to upload' ); ?></h3>
 160		</div>
 161	</script>
 162
 163	<script type="text/html" id="tmpl-uploader-editor">
 164		<div class="uploader-editor-content">
 165			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
 166		</div>
 167	</script>
 168
 169	<script type="text/html" id="tmpl-uploader-inline">
 170		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
 171		<# if ( data.canClose ) { #>
 172		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
 173		<# } #>
 174		<div class="uploader-inline-content {{ messageClass }}">
 175		<# if ( data.message ) { #>
 176			<h3 class="upload-message">{{ data.message }}</h3>
 177		<# } #>
 178		<?php if ( ! _device_can_upload() ) : ?>
 179			<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>
 180		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
 181			<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
 182			<?php
 183			/** This action is documented in wp-admin/includes/media.php */
 184			do_action( 'upload_ui_over_quota' ); ?>
 185
 186		<?php else : ?>
 187			<div class="upload-ui">
 188				<h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
 189				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
 190				<a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
 191			</div>
 192
 193			<div class="upload-inline-status"></div>
 194
 195			<div class="post-upload-ui">
 196				<?php
 197				/** This action is documented in wp-admin/includes/media.php */
 198				do_action( 'pre-upload-ui' );
 199				/** This action is documented in wp-admin/includes/media.php */
 200				do_action( 'pre-plupload-upload-ui' );
 201
 202				if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
 203					/** This action is documented in wp-admin/includes/media.php */
 204					do_action( 'post-plupload-upload-ui' );
 205					add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
 206				} else {
 207					/** This action is documented in wp-admin/includes/media.php */
 208					do_action( 'post-plupload-upload-ui' );
 209				}
 210
 211				$max_upload_size = wp_max_upload_size();
 212				if ( ! $max_upload_size ) {
 213					$max_upload_size = 0;
 214				}
 215				?>
 216
 217				<p class="max-upload-size"><?php
 218					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
 219				?></p>
 220
 221				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
 222					<p class="suggested-dimensions">
 223						<?php _e( 'Suggested image dimensions:' ); ?> {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
 224					</p>
 225				<# } #>
 226
 227				<?php
 228				/** This action is documented in wp-admin/includes/media.php */
 229				do_action( 'post-upload-ui' ); ?>
 230			</div>
 231		<?php endif; ?>
 232		</div>
 233	</script>
 234
 235	<script type="text/html" id="tmpl-media-library-view-switcher">
 236		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
 237			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
 238		</a>
 239		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
 240			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
 241		</a>
 242	</script>
 243
 244	<script type="text/html" id="tmpl-uploader-status">
 245		<h3><?php _e( 'Uploading' ); ?></h3>
 246		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
 247
 248		<div class="media-progress-bar"><div></div></div>
 249		<div class="upload-details">
 250			<span class="upload-count">
 251				<span class="upload-index"></span> / <span class="upload-total"></span>
 252			</span>
 253			<span class="upload-detail-separator">&ndash;</span>
 254			<span class="upload-filename"></span>
 255		</div>
 256		<div class="upload-errors"></div>
 257	</script>
 258
 259	<script type="text/html" id="tmpl-uploader-status-error">
 260		<span class="upload-error-label"><?php _e('Error'); ?></span>
 261		<span class="upload-error-filename">{{{ data.filename }}}</span>
 262		<span class="upload-error-message">{{ data.message }}</span>
 263	</script>
 264
 265	<script type="text/html" id="tmpl-edit-attachment-frame">
 266		<div class="edit-media-header">
 267			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
 268			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
 269		</div>
 270		<div class="media-frame-title"></div>
 271		<div class="media-frame-content"></div>
 272	</script>
 273
 274	<script type="text/html" id="tmpl-attachment-details-two-column">
 275		<div class="attachment-media-view {{ data.orientation }}">
 276			<div class="thumbnail thumbnail-{{ data.type }}">
 277				<# if ( data.uploading ) { #>
 278					<div class="media-progress-bar"><div></div></div>
 279				<# } else if ( 'image' === data.type && data.sizes && data.sizes.large ) { #>
 280					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" />
 281				<# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>
 282					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
 283				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
 284					<img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
 285				<# } #>
 286
 287				<# if ( 'audio' === data.type ) { #>
 288				<div class="wp-media-wrapper">
 289					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
 290						<source type="{{ data.mime }}" src="{{ data.url }}"/>
 291					</audio>
 292				</div>
 293				<# } else if ( 'video' === data.type ) {
 294					var w_rule = h_rule = '';
 295					if ( data.width ) {
 296						w_rule = 'width: ' + data.width + 'px;';
 297					} else if ( wp.media.view.settings.contentWidth ) {
 298						w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
 299					}
 300					if ( data.height ) {
 301						h_rule = 'height: ' + data.height + 'px;';
 302					}
 303				#>
 304				<div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
 305					<video controls="controls" class="wp-video-shortcode" preload="metadata"
 306						<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
 307						<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
 308						<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
 309						<source type="{{ data.mime }}" src="{{ data.url }}"/>
 310					</video>
 311				</div>
 312				<# } #>
 313
 314				<div class="attachment-actions">
 315					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
 316						<a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
 317					<# } #>
 318				</div>
 319			</div>
 320		</div>
 321		<div class="attachment-info">
 322			<span class="settings-save-status">
 323				<span class="spinner"></span>
 324				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
 325			</span>
 326			<div class="details">
 327				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
 328				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
 329				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
 330
 331				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
 332				<# if ( 'image' === data.type && ! data.uploading ) { #>
 333					<# if ( data.width && data.height ) { #>
 334						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
 335					<# } #>
 336				<# } #>
 337
 338				<# if ( data.fileLength ) { #>
 339					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
 340				<# } #>
 341
 342				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
 343					<div class="bitrate">
 344						<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
 345						<# if ( data.meta.bitrate_mode ) { #>
 346						{{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
 347						<# } #>
 348					</div>
 349				<# } #>
 350
 351				<div class="compat-meta">
 352					<# if ( data.compat && data.compat.meta ) { #>
 353						{{{ data.compat.meta }}}
 354					<# } #>
 355				</div>
 356			</div>
 357
 358			<div class="settings">
 359				<label class="setting" data-setting="url">
 360					<span class="name"><?php _e('URL'); ?></span>
 361					<input type="text" value="{{ data.url }}" readonly />
 362				</label>
 363				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 364				<label class="setting" data-setting="title">
 365					<span class="name"><?php _e('Title'); ?></span>
 366					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
 367				</label>
 368				<# if ( 'audio' === data.type ) { #>
 369				<?php foreach ( array(
 370					'artist' => __( 'Artist' ),
 371					'album' => __( 'Album' ),
 372				) as $key => $label ) : ?>
 373				<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
 374					<span class="name"><?php echo $label ?></span>
 375					<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
 376				</label>
 377				<?php endforeach; ?>
 378				<# } #>
 379				<label class="setting" data-setting="caption">
 380					<span class="name"><?php _e( 'Caption' ); ?></span>
 381					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
 382				</label>
 383				<# if ( 'image' === data.type ) { #>
 384					<label class="setting" data-setting="alt">
 385						<span class="name"><?php _e( 'Alt Text' ); ?></span>
 386						<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
 387					</label>
 388				<# } #>
 389				<label class="setting" data-setting="description">
 390					<span class="name"><?php _e('Description'); ?></span>
 391					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 392				</label>
 393				<label class="setting">
 394					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
 395					<span class="value">{{ data.authorName }}</span>
 396				</label>
 397				<# if ( data.uploadedToTitle ) { #>
 398					<label class="setting">
 399						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
 400						<# if ( data.uploadedToLink ) { #>
 401							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
 402						<# } else { #>
 403							<span class="value">{{ data.uploadedToTitle }}</span>
 404						<# } #>
 405					</label>
 406				<# } #>
 407				<div class="attachment-compat"></div>
 408			</div>
 409
 410			<div class="actions">
 411				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
 412				<# if ( data.can.save ) { #> |
 413					<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
 414				<# } #>
 415				<# if ( ! data.uploading && data.can.remove ) { #> |
 416					<?php if ( MEDIA_TRASH ): ?>
 417						<# if ( 'trash' === data.status ) { #>
 418							<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
 419						<# } else { #>
 420							<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
 421						<# } #>
 422					<?php else: ?>
 423						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
 424					<?php endif; ?>
 425				<# } #>
 426			</div>
 427
 428		</div>
 429	</script>
 430
 431	<script type="text/html" id="tmpl-attachment">
 432		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
 433			<div class="thumbnail">
 434				<# if ( data.uploading ) { #>
 435					<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
 436				<# } else if ( 'image' === data.type && data.sizes ) { #>
 437					<div class="centered">
 438						<img src="{{ data.size.url }}" draggable="false" alt="" />
 439					</div>
 440				<# } else { #>
 441					<div class="centered">
 442						<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
 443							<img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
 444						<# } else { #>
 445							<img src="{{ data.icon }}" class="icon" draggable="false" />
 446						<# } #>
 447					</div>
 448					<div class="filename">
 449						<div>{{ data.filename }}</div>
 450					</div>
 451				<# } #>
 452			</div>
 453			<# if ( data.buttons.close ) { #>
 454				<a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
 455			<# } #>
 456		</div>
 457		<# if ( data.buttons.check ) { #>
 458			<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
 459		<# } #>
 460		<#
 461		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
 462		if ( data.describe ) {
 463			if ( 'image' === data.type ) { #>
 464				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
 465					placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
 466			<# } else { #>
 467				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
 468					<# if ( 'video' === data.type ) { #>
 469						placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
 470					<# } else if ( 'audio' === data.type ) { #>
 471						placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
 472					<# } else { #>
 473						placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
 474					<# } #> {{ maybeReadOnly }} />
 475			<# }
 476		} #>
 477	</script>
 478
 479	<script type="text/html" id="tmpl-attachment-details">
 480		<h3>
 481			<?php _e('Attachment Details'); ?>
 482
 483			<span class="settings-save-status">
 484				<span class="spinner"></span>
 485				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
 486			</span>
 487		</h3>
 488		<div class="attachment-info">
 489			<div class="thumbnail thumbnail-{{ data.type }}">
 490				<# if ( data.uploading ) { #>
 491					<div class="media-progress-bar"><div></div></div>
 492				<# } else if ( 'image' === data.type && data.sizes ) { #>
 493					<img src="{{ data.size.url }}" draggable="false" />
 494				<# } else { #>
 495					<img src="{{ data.icon }}" class="icon" draggable="false" />
 496				<# } #>
 497			</div>
 498			<div class="details">
 499				<div class="filename">{{ data.filename }}</div>
 500				<div class="uploaded">{{ data.dateFormatted }}</div>
 501
 502				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
 503				<# if ( 'image' === data.type && ! data.uploading ) { #>
 504					<# if ( data.width && data.height ) { #>
 505						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
 506					<# } #>
 507
 508					<# if ( data.can.save && data.sizes ) { #>
 509						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
 510						<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
 511					<# } #>
 512				<# } #>
 513
 514				<# if ( data.fileLength ) { #>
 515					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
 516				<# } #>
 517
 518				<# if ( ! data.uploading && data.can.remove ) { #>
 519					<?php if ( MEDIA_TRASH ): ?>
 520					<# if ( 'trash' === data.status ) { #>
 521						<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
 522					<# } else { #>
 523						<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
 524					<# } #>
 525					<?php else: ?>
 526						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
 527					<?php endif; ?>
 528				<# } #>
 529
 530				<div class="compat-meta">
 531					<# if ( data.compat && data.compat.meta ) { #>
 532						{{{ data.compat.meta }}}
 533					<# } #>
 534				</div>
 535			</div>
 536		</div>
 537
 538		<label class="setting" data-setting="url">
 539			<span class="name"><?php _e('URL'); ?></span>
 540			<input type="text" value="{{ data.url }}" readonly />
 541		</label>
 542		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 543		<label class="setting" data-setting="title">
 544			<span class="name"><?php _e('Title'); ?></span>
 545			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
 546		</label>
 547		<# if ( 'audio' === data.type ) { #>
 548		<?php foreach ( array(
 549			'artist' => __( 'Artist' ),
 550			'album' => __( 'Album' ),
 551		) as $key => $label ) : ?>
 552		<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
 553			<span class="name"><?php echo $label ?></span>
 554			<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
 555		</label>
 556		<?php endforeach; ?>
 557		<# } #>
 558		<label class="setting" data-setting="caption">
 559			<span class="name"><?php _e('Caption'); ?></span>
 560			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
 561		</label>
 562		<# if ( 'image' === data.type ) { #>
 563			<label class="setting" data-setting="alt">
 564				<span class="name"><?php _e('Alt Text'); ?></span>
 565				<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
 566			</label>
 567		<# } #>
 568		<label class="setting" data-setting="description">
 569			<span class="name"><?php _e('Description'); ?></span>
 570			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 571		</label>
 572	</script>
 573
 574	<script type="text/html" id="tmpl-media-selection">
 575		<div class="selection-info">
 576			<span class="count"></span>
 577			<# if ( data.editable ) { #>
 578				<a class="edit-selection" href="#"><?php _e( 'Edit Selection' ); ?></a>
 579			<# } #>
 580			<# if ( data.clearable ) { #>
 581				<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
 582			<# } #>
 583		</div>
 584		<div class="selection-view"></div>
 585	</script>
 586
 587	<script type="text/html" id="tmpl-attachment-display-settings">
 588		<h3><?php _e('Attachment Display Settings'); ?></h3>
 589
 590		<# if ( 'image' === data.type ) { #>
 591			<label class="setting">
 592				<span><?php _e('Alignment'); ?></span>
 593				<select class="alignment"
 594					data-setting="align"
 595					<# if ( data.userSettings ) { #>
 596						data-user-setting="align"
 597					<# } #>>
 598
 599					<option value="left">
 600						<?php esc_attr_e('Left'); ?>
 601					</option>
 602					<option value="center">
 603						<?php esc_attr_e('Center'); ?>
 604					</option>
 605					<option value="right">
 606						<?php esc_attr_e('Right'); ?>
 607					</option>
 608					<option value="none" selected>
 609						<?php esc_attr_e('None'); ?>
 610					</option>
 611				</select>
 612			</label>
 613		<# } #>
 614
 615		<div class="setting">
 616			<label>
 617				<# if ( data.model.canEmbed ) { #>
 618					<span><?php _e('Embed or Link'); ?></span>
 619				<# } else { #>
 620					<span><?php _e('Link To'); ?></span>
 621				<# } #>
 622
 623				<select class="link-to"
 624					data-setting="link"
 625					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
 626						data-user-setting="urlbutton"
 627					<# } #>>
 628
 629				<# if ( data.model.canEmbed ) { #>
 630					<option value="embed" selected>
 631						<?php esc_attr_e('Embed Media Player'); ?>
 632					</option>
 633					<option value="file">
 634				<# } else { #>
 635					<option value="file" selected>
 636				<# } #>
 637					<# if ( data.model.canEmbed ) { #>
 638						<?php esc_attr_e('Link to Media File'); ?>
 639					<# } else { #>
 640						<?php esc_attr_e('Media File'); ?>
 641					<# } #>
 642					</option>
 643					<option value="post">
 644					<# if ( data.model.canEmbed ) { #>
 645						<?php esc_attr_e('Link to Attachment Page'); ?>
 646					<# } else { #>
 647						<?php esc_attr_e('Attachment Page'); ?>
 648					<# } #>
 649					</option>
 650				<# if ( 'image' === data.type ) { #>
 651					<option value="custom">
 652						<?php esc_attr_e('Custom URL'); ?>
 653					</option>
 654					<option value="none">
 655						<?php esc_attr_e('None'); ?>
 656					</option>
 657				<# } #>
 658				</select>
 659			</label>
 660			<input type="text" class="link-to-custom" data-setting="linkUrl" />
 661		</div>
 662
 663		<# if ( 'undefined' !== typeof data.sizes ) { #>
 664			<label class="setting">
 665				<span><?php _e('Size'); ?></span>
 666				<select class="size" name="size"
 667					data-setting="size"
 668					<# if ( data.userSettings ) { #>
 669						data-user-setting="imgsize"
 670					<# } #>>
 671					<?php
 672					/** This filter is documented in wp-admin/includes/media.php */
 673					$sizes = apply_filters( 'image_size_names_choose', array(
 674						'thumbnail' => __('Thumbnail'),
 675						'medium'    => __('Medium'),
 676						'large'     => __('Large'),
 677						'full'      => __('Full Size'),
 678					) );
 679
 680					foreach ( $sizes as $value => $name ) : ?>
 681						<#
 682						var size = data.sizes['<?php echo esc_js( $value ); ?>'];
 683						if ( size ) { #>
 684							<option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
 685								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
 686							</option>
 687						<# } #>
 688					<?php endforeach; ?>
 689				</select>
 690			</label>
 691		<# } #>
 692	</script>
 693
 694	<script type="text/html" id="tmpl-gallery-settings">
 695		<h3><?php _e('Gallery Settings'); ?></h3>
 696
 697		<label class="setting">
 698			<span><?php _e('Link To'); ?></span>
 699			<select class="link-to"
 700				data-setting="link"
 701				<# if ( data.userSettings ) { #>
 702					data-user-setting="urlbutton"
 703				<# } #>>
 704
 705				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
 706					#>selected="selected"<# }
 707				#>>
 708					<?php esc_attr_e('Attachment Page'); ?>
 709				</option>
 710				<option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
 711					<?php esc_attr_e('Media File'); ?>
 712				</option>
 713				<option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
 714					<?php esc_attr_e('None'); ?>
 715				</option>
 716			</select>
 717		</label>
 718
 719		<label class="setting">
 720			<span><?php _e('Columns'); ?></span>
 721			<select class="columns" name="columns"
 722				data-setting="columns">
 723				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
 724					<option value="<?php echo esc_attr( $i ); ?>" <#
 725						if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
 726					#>>
 727						<?php echo esc_html( $i ); ?>
 728					</option>
 729				<?php endfor; ?>
 730			</select>
 731		</label>
 732
 733		<label class="setting">
 734			<span><?php _e( 'Random Order' ); ?></span>
 735			<input type="checkbox" data-setting="_orderbyRandom" />
 736		</label>
 737
 738		<label class="setting size">
 739			<span><?php _e( 'Size' ); ?></span>
 740			<select class="size" name="size"
 741				data-setting="size"
 742				<# if ( data.userSettings ) { #>
 743					data-user-setting="imgsize"
 744				<# } #>
 745				>
 746				<?php
 747				// This filter is documented in wp-admin/includes/media.php
 748				$size_names = apply_filters( 'image_size_names_choose', array(
 749					'thumbnail' => __( 'Thumbnail' ),
 750					'medium'    => __( 'Medium' ),
 751					'large'     => __( 'Large' ),
 752					'full'      => __( 'Full Size' ),
 753				) );
 754
 755				foreach ( $size_names as $size => $label ) : ?>
 756					<option value="<?php echo esc_attr( $size ); ?>">
 757						<?php echo esc_html( $label ); ?>
 758					</option>
 759				<?php endforeach; ?>
 760			</select>
 761		</label>
 762	</script>
 763
 764	<script type="text/html" id="tmpl-playlist-settings">
 765		<h3><?php _e( 'Playlist Settings' ); ?></h3>
 766
 767		<# var emptyModel = _.isEmpty( data.model ),
 768			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
 769
 770		<label class="setting">
 771			<input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
 772				checked="checked"
 773			<# } #> />
 774			<# if ( isVideo ) { #>
 775			<span><?php _e( 'Show Video List' ); ?></span>
 776			<# } else { #>
 777			<span><?php _e( 'Show Tracklist' ); ?></span>
 778			<# } #>
 779		</label>
 780
 781		<# if ( ! isVideo ) { #>
 782		<label class="setting">
 783			<input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
 784				checked="checked"
 785			<# } #> />
 786			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
 787		</label>
 788		<# } #>
 789
 790		<label class="setting">
 791			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
 792				checked="checked"
 793			<# } #> />
 794			<span><?php _e( 'Show Images' ); ?></span>
 795		</label>
 796	</script>
 797
 798	<script type="text/html" id="tmpl-embed-link-settings">
 799		<label class="setting title">
 800			<span><?php _e( 'Title' ); ?></span>
 801			<input type="text" class="alignment" data-setting="title" />
 802		</label>
 803		<div class="embed-container" style="display: none;">
 804			<div class="embed-preview"></div>
 805		</div>
 806	</script>
 807
 808	<script type="text/html" id="tmpl-embed-image-settings">
 809		<div class="thumbnail">
 810			<img src="{{ data.model.url }}" draggable="false" />
 811		</div>
 812
 813		<?php
 814		/** This filter is documented in wp-admin/includes/media.php */
 815		if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
 816			<label class="setting caption">
 817				<span><?php _e('Caption'); ?></span>
 818				<textarea data-setting="caption" />
 819			</label>
 820		<?php endif; ?>
 821
 822		<label class="setting alt-text">
 823			<span><?php _e('Alt Text'); ?></span>
 824			<input type="text" data-setting="alt" />
 825		</label>
 826
 827		<div class="setting align">
 828			<span><?php _e('Align'); ?></span>
 829			<div class="button-group button-large" data-setting="align">
 830				<button class="button" value="left">
 831					<?php esc_attr_e('Left'); ?>
 832				</button>
 833				<button class="button" value="center">
 834					<?php esc_attr_e('Center'); ?>
 835				</button>
 836				<button class="button" value="right">
 837					<?php esc_attr_e('Right'); ?>
 838				</button>
 839				<button class="button active" value="none">
 840					<?php esc_attr_e('None'); ?>
 841				</button>
 842			</div>
 843		</div>
 844
 845		<div class="setting link-to">
 846			<span><?php _e('Link To'); ?></span>
 847			<div class="button-group button-large" data-setting="link">
 848				<button class="button" value="file">
 849					<?php esc_attr_e('Image URL'); ?>
 850				</button>
 851				<button class="button" value="custom">
 852					<?php esc_attr_e('Custom URL'); ?>
 853				</button>
 854				<button class="button active" value="none">
 855					<?php esc_attr_e('None'); ?>
 856				</button>
 857			</div>
 858			<input type="text" class="link-to-custom" data-setting="linkUrl" />
 859		</div>
 860	</script>
 861
 862	<script type="text/html" id="tmpl-image-details">
 863		<div class="media-embed">
 864			<div class="embed-media-settings">
 865				<div class="column-image">
 866					<div class="image">
 867						<img src="{{ data.model.url }}" draggable="false" />
 868
 869						<# if ( data.attachment && window.imageEdit ) { #>
 870							<div class="actions">
 871								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
 872								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
 873							</div>
 874						<# } #>
 875					</div>
 876				</div>
 877				<div class="column-settings">
 878					<?php
 879					/** This filter is documented in wp-admin/includes/media.php */
 880					if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
 881						<label class="setting caption">
 882							<span><?php _e('Caption'); ?></span>
 883							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
 884						</label>
 885					<?php endif; ?>
 886
 887					<label class="setting alt-text">
 888						<span><?php _e('Alternative Text'); ?></span>
 889						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
 890					</label>
 891
 892					<h3><?php _e( 'Display Settings' ); ?></h3>
 893					<div class="setting align">
 894						<span><?php _e('Align'); ?></span>
 895						<div class="button-group button-large" data-setting="align">
 896							<button class="button" value="left">
 897								<?php esc_attr_e('Left'); ?>
 898							</button>
 899							<button class="button" value="center">
 900								<?php esc_attr_e('Center'); ?>
 901							</button>
 902							<button class="button" value="right">
 903								<?php esc_attr_e('Right'); ?>
 904							</button>
 905							<button class="button active" value="none">
 906								<?php esc_attr_e('None'); ?>
 907							</button>
 908						</div>
 909					</div>
 910
 911					<# if ( data.attachment ) { #>
 912						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
 913							<label class="setting size">
 914								<span><?php _e('Size'); ?></span>
 915								<select class="size" name="size"
 916									data-setting="size"
 917									<# if ( data.userSettings ) { #>
 918										data-user-setting="imgsize"
 919									<# } #>>
 920									<?php
 921									/** This filter is documented in wp-admin/includes/media.php */
 922									$sizes = apply_filters( 'image_size_names_choose', array(
 923										'thumbnail' => __('Thumbnail'),
 924										'medium'    => __('Medium'),
 925										'large'     => __('Large'),
 926										'full'      => __('Full Size'),
 927									) );
 928
 929									foreach ( $sizes as $value => $name ) : ?>
 930										<#
 931										var size = data.sizes['<?php echo esc_js( $value ); ?>'];
 932										if ( size ) { #>
 933											<option value="<?php echo esc_attr( $value ); ?>">
 934												<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
 935											</option>
 936										<# } #>
 937									<?php endforeach; ?>
 938									<option value="<?php echo esc_attr( 'custom' ); ?>">
 939										<?php _e( 'Custom Size' ); ?>
 940									</option>
 941								</select>
 942							</label>
 943						<# } #>
 944							<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
 945								<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
 946							</div>
 947					<# } #>
 948
 949					<div class="setting link-to">
 950						<span><?php _e('Link To'); ?></span>
 951						<select data-setting="link">
 952						<# if ( data.attachment ) { #>
 953							<option value="file">
 954								<?php esc_attr_e('Media File'); ?>
 955							</option>
 956							<option value="post">
 957								<?php esc_attr_e('Attachment Page'); ?>
 958							</option>
 959						<# } else { #>
 960							<option value="file">
 961								<?php esc_attr_e('Image URL'); ?>
 962							</option>
 963						<# } #>
 964							<option value="custom">
 965								<?php esc_attr_e('Custom URL'); ?>
 966							</option>
 967							<option value="none">
 968								<?php esc_attr_e('None'); ?>
 969							</option>
 970						</select>
 971						<input type="text" class="link-to-custom" data-setting="linkUrl" />
 972					</div>
 973					<div class="advanced-section">
 974						<h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
 975						<div class="advanced-settings hidden">
 976							<div class="advanced-image">
 977								<label class="setting title-text">
 978									<span><?php _e('Image Title Attribute'); ?></span>
 979									<input type="text" data-setting="title" value="{{ data.model.title }}" />
 980								</label>
 981								<label class="setting extra-classes">
 982									<span><?php _e('Image CSS Class'); ?></span>
 983									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
 984								</label>
 985							</div>
 986							<div class="advanced-link">
 987								<div class="setting link-target">
 988									<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>
 989								</div>
 990								<label class="setting link-rel">
 991									<span><?php _e('Link Rel'); ?></span>
 992									<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
 993								</label>
 994								<label class="setting link-class-name">
 995									<span><?php _e('Link CSS Class'); ?></span>
 996									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
 997								</label>
 998							</div>
 999						</div>
1000					</div>
1001				</div>
1002			</div>
1003		</div>
1004	</script>
1005
1006	<script type="text/html" id="tmpl-image-editor">
1007		<div id="media-head-{{ data.id }}"></div>
1008		<div id="image-editor-{{ data.id }}"></div>
1009	</script>
1010
1011	<script type="text/html" id="tmpl-audio-details">
1012		<# var ext, html5types = {
1013			mp3: wp.media.view.settings.embedMimes.mp3,
1014			ogg: wp.media.view.settings.embedMimes.ogg
1015		}; #>
1016
1017		<?php $audio_types = wp_get_audio_extensions(); ?>
1018		<div class="media-embed media-embed-details">
1019			<div class="embed-media-settings embed-audio-settings">
1020				<?php wp_underscore_audio_template() ?>
1021
1022				<# if ( ! _.isEmpty( data.model.src ) ) {
1023					ext = data.model.src.split('.').pop();
1024					if ( html5types[ ext ] ) {
1025						delete html5types[ ext ];
1026					}
1027				#>
1028				<label class="setting">
1029					<span>SRC</span>
1030					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
1031					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
1032				</label>
1033				<# } #>
1034				<?php
1035
1036				foreach ( $audio_types as $type ):
1037				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
1038					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
1039						delete html5types.<?php echo $type ?>;
1040					}
1041				#>
1042				<label class="setting">
1043					<span><?php echo strtoupper( $type ) ?></span>
1044					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
1045					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
1046				</label>
1047				<# } #>
1048				<?php endforeach ?>
1049
1050				<# if ( ! _.isEmpty( html5types ) ) { #>
1051				<div class="setting">
1052					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ) ?></span>
1053					<div class="button-large">
1054					<# _.each( html5types, function (mime, type) { #>
1055					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
1056					<# } ) #>
1057					</div>
1058				</div>
1059				<# } #>
1060
1061				<div class="setting preload">
1062					<span><?php _e( 'Preload' ); ?></span>
1063					<div class="button-group button-large" data-setting="preload">
1064						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
1065						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
1066						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
1067					</div>
1068				</div>
1069
1070				<label class="setting checkbox-setting">
1071					<input type="checkbox" data-setting="autoplay" />
1072					<span><?php _e( 'Autoplay' ); ?></span>
1073				</label>
1074
1075				<label class="setting checkbox-setting">
1076					<input type="checkbox" data-setting="loop" />
1077					<span><?php _e( 'Loop' ); ?></span>
1078				</label>
1079			</div>
1080		</div>
1081	</script>
1082
1083	<script type="text/html" id="tmpl-video-details">
1084		<# var ext, html5types = {
1085			mp4: wp.media.view.settings.embedMimes.mp4,
1086			ogv: wp.media.view.settings.embedMimes.ogv,
1087			webm: wp.media.view.settings.embedMimes.webm
1088		}; #>
1089
1090		<?php $video_types = wp_get_video_extensions(); ?>
1091		<div class="media-embed media-embed-details">
1092			<div class="embed-media-settings embed-video-settings">
1093				<div class="wp-video-holder">
1094				<#
1095				var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
1096					w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
1097					h = ! data.model.height ? 360 : data.model.height;
1098
1099				if ( data.model.width && w !== data.model.width ) {
1100					h = Math.ceil( ( h * w ) / data.model.width );
1101				}
1102				#>
1103
1104				<?php wp_underscore_video_template() ?>
1105
1106				<# if ( ! _.isEmpty( data.model.src ) ) {
1107					ext = data.model.src.split('.').pop();
1108					if ( html5types[ ext ] ) {
1109						delete html5types[ ext ];
1110					}
1111				#>
1112				<label class="setting">
1113					<span>SRC</span>
1114					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
1115					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
1116				</label>
1117				<# } #>
1118				<?php foreach ( $video_types as $type ):
1119				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
1120					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
1121						delete html5types.<?php echo $type ?>;
1122					}
1123				#>
1124				<label class="setting">
1125					<span><?php echo strtoupper( $type ) ?></span>
1126					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
1127					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
1128				</label>
1129				<# } #>
1130				<?php endforeach ?>
1131				</div>
1132
1133				<# if ( ! _.isEmpty( html5types ) ) { #>
1134				<div class="setting">
1135					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
1136					<div class="button-large">
1137					<# _.each( html5types, function (mime, type) { #>
1138					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
1139					<# } ) #>
1140					</div>
1141				</div>
1142				<# } #>
1143
1144				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
1145				<label class="setting">
1146					<span><?php _e( 'Poster Image' ); ?></span>
1147					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
1148					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
1149				</label>
1150				<# } #>
1151				<div class="setting preload">
1152					<span><?php _e( 'Preload' ); ?></span>
1153					<div class="button-group button-large" data-setting="preload">
1154						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
1155						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
1156						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
1157					</div>
1158				</div>
1159
1160				<label class="setting checkbox-setting">
1161					<input type="checkbox" data-setting="autoplay" />
1162					<span><?php _e( 'Autoplay' ); ?></span>
1163				</label>
1164
1165				<label class="setting checkbox-setting">
1166					<input type="checkbox" data-setting="loop" />
1167					<span><?php _e( 'Loop' ); ?></span>
1168				</label>
1169
1170				<label class="setting" data-setting="content">
1171					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
1172					<#
1173					var content = '';
1174					if ( ! _.isEmpty( data.model.content ) ) {
1175						var tracks = jQuery( data.model.content ).filter( 'track' );
1176						_.each( tracks.toArray(), function (track) {
1177							content += track.outerHTML; #>
1178						<p>
1179							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
1180							<a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
1181						</p>
1182						<# } ); #>
1183					<# } else { #>
1184					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
1185					<# } #>
1186					<textarea class="hidden content-setting">{{ content }}</textarea>
1187				</label>
1188			</div>
1189		</div>
1190	</script>
1191
1192	<script type="text/html" id="tmpl-editor-gallery">
1193		<# if ( data.attachments ) { #>
1194			<div class="gallery gallery-columns-{{ data.columns }}">
1195				<# _.each( data.attachments, function( attachment, index ) { #>
1196					<dl class="gallery-item">
1197						<dt class="gallery-icon">
1198							<# if ( attachment.thumbnail ) { #>
1199								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
1200							<# } else { #>
1201								<img src="{{ attachment.url }}" />
1202							<# } #>
1203						</dt>
1204						<# if ( attachment.caption ) { #>
1205							<dd class="wp-caption-text gallery-caption">
1206								{{ attachment.caption }}
1207							</dd>
1208						<# } #>
1209					</dl>
1210					<# if ( index % data.columns === data.columns - 1 ) { #>
1211						<br style="clear: both;">
1212					<# } #>
1213				<# } ); #>
1214			</div>
1215		<# } else { #>
1216			<div class="wpview-error">
1217				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
1218			</div>
1219		<# } #>
1220	</script>
1221
1222	<script type="text/html" id="tmpl-crop-content">
1223		<img class="crop-image" src="{{ data.url }}">
1224		<div class="upload-errors"></div>
1225	</script>
1226
1227	<?php
1228
1229	/**
1230	 * Fires when the custom Backbone media templates are printed.
1231	 *
1232	 * @since 3.5.0
1233	 */
1234	do_action( 'print_media_templates' );
1235}