wp/wp-includes/media-template.php
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
   150 
   150 
   151 /**
   151 /**
   152  * Prints the templates used in the media manager.
   152  * Prints the templates used in the media manager.
   153  *
   153  *
   154  * @since 3.5.0
   154  * @since 3.5.0
   155  *
       
   156  * @global bool $is_IE
       
   157  */
   155  */
   158 function wp_print_media_templates() {
   156 function wp_print_media_templates() {
   159 	global $is_IE;
       
   160 	$class = 'media-modal wp-core-ui';
   157 	$class = 'media-modal wp-core-ui';
   161 	if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) {
       
   162 		$class .= ' ie7';
       
   163 	}
       
   164 
   158 
   165 	$alt_text_description = sprintf(
   159 	$alt_text_description = sprintf(
   166 		/* translators: 1: link to tutorial, 2: additional link attributes, 3: accessibility text */
   160 		/* translators: 1: Link to tutorial, 2: Additional link attributes, 3: Accessibility text. */
   167 		__( '<a href="%1$s" %2$s>Describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
   161 		__( '<a href="%1$s" %2$s>Describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
   168 		esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
   162 		esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
   169 		'target="_blank" rel="noopener noreferrer"',
   163 		'target="_blank" rel="noopener noreferrer"',
   170 		sprintf(
   164 		sprintf(
   171 			'<span class="screen-reader-text"> %s</span>',
   165 			'<span class="screen-reader-text"> %s</span>',
   172 			/* translators: accessibility text */
   166 			/* translators: Accessibility text. */
   173 			__( '(opens in a new tab)' )
   167 			__( '(opens in a new tab)' )
   174 		)
   168 		)
   175 	);
   169 	);
   176 	?>
   170 	?>
   177 	<!--[if lte IE 8]>
   171 
   178 	<style>
   172 	<?php // Template for the media frame: used both in the media grid and in the media modal. ?>
   179 		.attachment:focus {
       
   180 			outline: #1e8cbe solid;
       
   181 		}
       
   182 		.selected.attachment {
       
   183 			outline: #1e8cbe solid;
       
   184 		}
       
   185 	</style>
       
   186 	<![endif]-->
       
   187 	<script type="text/html" id="tmpl-media-frame">
   173 	<script type="text/html" id="tmpl-media-frame">
   188 		<div class="media-frame-title" id="media-frame-title"></div>
   174 		<div class="media-frame-title" id="media-frame-title"></div>
       
   175 		<h2 class="media-frame-menu-heading"><?php _ex( 'Actions', 'media modal menu actions' ); ?></h2>
       
   176 		<button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
       
   177 			<?php _ex( 'Menu', 'media modal menu' ); ?>
       
   178 			<span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
       
   179 		</button>
   189 		<div class="media-frame-menu"></div>
   180 		<div class="media-frame-menu"></div>
   190 		<div class="media-frame-router"></div>
   181 		<div class="media-frame-tab-panel">
   191 		<div class="media-frame-content"></div>
   182 			<div class="media-frame-router"></div>
       
   183 			<div class="media-frame-content"></div>
       
   184 		</div>
       
   185 		<h2 class="media-frame-actions-heading screen-reader-text">
       
   186 		<?php
       
   187 			/* translators: Accessibility text. */
       
   188 			_e( 'Selected media actions' );
       
   189 		?>
       
   190 		</h2>
   192 		<div class="media-frame-toolbar"></div>
   191 		<div class="media-frame-toolbar"></div>
   193 		<div class="media-frame-uploader"></div>
   192 		<div class="media-frame-uploader"></div>
   194 	</script>
   193 	</script>
   195 
   194 
       
   195 	<?php // Template for the media modal. ?>
   196 	<script type="text/html" id="tmpl-media-modal">
   196 	<script type="text/html" id="tmpl-media-modal">
   197 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
   197 		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
   198 			<# if ( data.hasCloseButton ) { #>
   198 			<# if ( data.hasCloseButton ) { #>
   199 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   199 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   200 			<# } #>
   200 			<# } #>
   201 			<div class="media-modal-content" role="document"></div>
   201 			<div class="media-modal-content" role="document"></div>
   202 		</div>
   202 		</div>
   203 		<div class="media-modal-backdrop"></div>
   203 		<div class="media-modal-backdrop"></div>
   204 	</script>
   204 	</script>
   205 
   205 
       
   206 	<?php // Template for the window uploader, used for example in the media grid. ?>
   206 	<script type="text/html" id="tmpl-uploader-window">
   207 	<script type="text/html" id="tmpl-uploader-window">
   207 		<div class="uploader-window-content">
   208 		<div class="uploader-window-content">
   208 			<h1><?php _e( 'Drop files to upload' ); ?></h1>
   209 			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
   209 		</div>
   210 		</div>
   210 	</script>
   211 	</script>
   211 
   212 
       
   213 	<?php // Template for the editor uploader. ?>
   212 	<script type="text/html" id="tmpl-uploader-editor">
   214 	<script type="text/html" id="tmpl-uploader-editor">
   213 		<div class="uploader-editor-content">
   215 		<div class="uploader-editor-content">
   214 			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
   216 			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
   215 		</div>
   217 		</div>
   216 	</script>
   218 	</script>
   217 
   219 
       
   220 	<?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
   218 	<script type="text/html" id="tmpl-uploader-inline">
   221 	<script type="text/html" id="tmpl-uploader-inline">
   219 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
   222 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
   220 		<# if ( data.canClose ) { #>
   223 		<# if ( data.canClose ) { #>
   221 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
   224 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
   222 		<# } #>
   225 		<# } #>
   223 		<div class="uploader-inline-content {{ messageClass }}">
   226 		<div class="uploader-inline-content {{ messageClass }}">
   224 		<# if ( data.message ) { #>
   227 		<# if ( data.message ) { #>
   225 			<h2 class="upload-message">{{ data.message }}</h2>
   228 			<h2 class="upload-message">{{ data.message }}</h2>
   226 		<# } #>
   229 		<# } #>
   227 		<?php if ( ! _device_can_upload() ) : ?>
   230 		<?php if ( ! _device_can_upload() ) : ?>
   228 			<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>
   231 			<div class="upload-ui">
       
   232 				<h2 class="upload-instructions"><?php _e( 'Your browser cannot upload files' ); ?></h2>
       
   233 				<p>
       
   234 				<?php
       
   235 					printf(
       
   236 						/* translators: %s: https://apps.wordpress.org/ */
       
   237 						__( '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.' ),
       
   238 						'https://apps.wordpress.org/'
       
   239 					);
       
   240 				?>
       
   241 				</p>
       
   242 			</div>
   229 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   243 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   230 			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
   244 			<div class="upload-ui">
   231 			<?php
   245 				<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
   232 			/** This action is documented in wp-admin/includes/media.php */
   246 				<?php
   233 			do_action( 'upload_ui_over_quota' );
   247 				/** This action is documented in wp-admin/includes/media.php */
   234 			?>
   248 				do_action( 'upload_ui_over_quota' );
   235 
   249 				?>
       
   250 			</div>
   236 		<?php else : ?>
   251 		<?php else : ?>
   237 			<div class="upload-ui">
   252 			<div class="upload-ui">
   238 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
   253 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
   239 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   254 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
   240 				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
   255 				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
   241 			</div>
   256 			</div>
   242 
   257 
   243 			<div class="upload-inline-status"></div>
   258 			<div class="upload-inline-status"></div>
   244 
   259 
   245 			<div class="post-upload-ui">
   260 			<div class="post-upload-ui">
   246 				<?php
   261 				<?php
   247 				/** This action is documented in wp-admin/includes/media.php */
   262 				/** This action is documented in wp-admin/includes/media.php */
   248 				do_action( 'pre-upload-ui' );
   263 				do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
   249 				/** This action is documented in wp-admin/includes/media.php */
   264 				/** This action is documented in wp-admin/includes/media.php */
   250 				do_action( 'pre-plupload-upload-ui' );
   265 				do_action( 'pre-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
   251 
   266 
   252 				if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
   267 				if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
   253 					/** This action is documented in wp-admin/includes/media.php */
   268 					/** This action is documented in wp-admin/includes/media.php */
   254 					do_action( 'post-plupload-upload-ui' );
   269 					do_action( 'post-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
   255 					add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
   270 					add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
   256 				} else {
   271 				} else {
   257 					/** This action is documented in wp-admin/includes/media.php */
   272 					/** This action is documented in wp-admin/includes/media.php */
   258 					do_action( 'post-plupload-upload-ui' );
   273 					do_action( 'post-plupload-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
   259 				}
   274 				}
   260 
   275 
   261 				$max_upload_size = wp_max_upload_size();
   276 				$max_upload_size = wp_max_upload_size();
   262 				if ( ! $max_upload_size ) {
   277 				if ( ! $max_upload_size ) {
   263 					$max_upload_size = 0;
   278 					$max_upload_size = 0;
   264 				}
   279 				}
   265 				?>
   280 				?>
   266 
   281 
   267 				<p class="max-upload-size">
   282 				<p class="max-upload-size">
   268 				<?php
   283 				<?php
   269 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
   284 					printf(
       
   285 						/* translators: %s: Maximum allowed file size. */
       
   286 						__( 'Maximum upload file size: %s.' ),
       
   287 						esc_html( size_format( $max_upload_size ) )
       
   288 					);
   270 				?>
   289 				?>
   271 				</p>
   290 				</p>
   272 
   291 
   273 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   292 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
   274 					<p class="suggested-dimensions">
   293 					<p class="suggested-dimensions">
   275 						<?php
   294 						<?php
   276 							/* translators: 1: suggested width number, 2: suggested height number. */
   295 							/* translators: 1: Suggested width number, 2: Suggested height number. */
   277 							printf( __( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}', '{{data.suggestedHeight}}' );
   296 							printf( __( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}', '{{data.suggestedHeight}}' );
   278 						?>
   297 						?>
   279 					</p>
   298 					</p>
   280 				<# } #>
   299 				<# } #>
   281 
   300 
   282 				<?php
   301 				<?php
   283 				/** This action is documented in wp-admin/includes/media.php */
   302 				/** This action is documented in wp-admin/includes/media.php */
   284 				do_action( 'post-upload-ui' );
   303 				do_action( 'post-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
   285 				?>
   304 				?>
   286 			</div>
   305 			</div>
   287 		<?php endif; ?>
   306 		<?php endif; ?>
   288 		</div>
   307 		</div>
   289 	</script>
   308 	</script>
   290 
   309 
       
   310 	<?php // Template for the view switchers, used for example in the Media Grid. ?>
   291 	<script type="text/html" id="tmpl-media-library-view-switcher">
   311 	<script type="text/html" id="tmpl-media-library-view-switcher">
   292 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
   312 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
   293 			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
   313 			<span class="screen-reader-text"><?php _e( 'List view' ); ?></span>
   294 		</a>
   314 		</a>
   295 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-grid current">
   315 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-grid current" aria-current="page">
   296 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
   316 			<span class="screen-reader-text"><?php _e( 'Grid view' ); ?></span>
   297 		</a>
   317 		</a>
   298 	</script>
   318 	</script>
   299 
   319 
       
   320 	<?php // Template for the uploading status UI. ?>
   300 	<script type="text/html" id="tmpl-uploader-status">
   321 	<script type="text/html" id="tmpl-uploader-status">
   301 		<h2><?php _e( 'Uploading' ); ?></h2>
   322 		<h2><?php _e( 'Uploading' ); ?></h2>
   302 		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
   323 		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
   303 
   324 
   304 		<div class="media-progress-bar"><div></div></div>
   325 		<div class="media-progress-bar"><div></div></div>
   310 			<span class="upload-filename"></span>
   331 			<span class="upload-filename"></span>
   311 		</div>
   332 		</div>
   312 		<div class="upload-errors"></div>
   333 		<div class="upload-errors"></div>
   313 	</script>
   334 	</script>
   314 
   335 
       
   336 	<?php // Template for the uploading status errors. ?>
   315 	<script type="text/html" id="tmpl-uploader-status-error">
   337 	<script type="text/html" id="tmpl-uploader-status-error">
   316 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   338 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   317 		<span class="upload-error-message">{{ data.message }}</span>
   339 		<span class="upload-error-message">{{ data.message }}</span>
   318 	</script>
   340 	</script>
   319 
   341 
       
   342 	<?php // Template for the Attachment Details layout in the media browser. ?>
   320 	<script type="text/html" id="tmpl-edit-attachment-frame">
   343 	<script type="text/html" id="tmpl-edit-attachment-frame">
   321 		<div class="edit-media-header">
   344 		<div class="edit-media-header">
   322 			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
   345 			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
   323 			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
   346 			<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
   324 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   347 			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
   325 		</div>
   348 		</div>
   326 		<div class="media-frame-title"></div>
   349 		<div class="media-frame-title"></div>
   327 		<div class="media-frame-content"></div>
   350 		<div class="media-frame-content"></div>
   328 	</script>
   351 	</script>
   329 
   352 
       
   353 	<?php // Template for the Attachment Details two columns layout. ?>
   330 	<script type="text/html" id="tmpl-attachment-details-two-column">
   354 	<script type="text/html" id="tmpl-attachment-details-two-column">
   331 		<div class="attachment-media-view {{ data.orientation }}">
   355 		<div class="attachment-media-view {{ data.orientation }}">
       
   356 			<h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
   332 			<div class="thumbnail thumbnail-{{ data.type }}">
   357 			<div class="thumbnail thumbnail-{{ data.type }}">
   333 				<# if ( data.uploading ) { #>
   358 				<# if ( data.uploading ) { #>
   334 					<div class="media-progress-bar"><div></div></div>
   359 					<div class="media-progress-bar"><div></div></div>
   335 				<# } else if ( data.sizes && data.sizes.large ) { #>
   360 				<# } else if ( data.sizes && data.sizes.large ) { #>
   336 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
   361 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
   366 
   391 
   367 				<div class="attachment-actions">
   392 				<div class="attachment-actions">
   368 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
   393 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
   369 					<button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
   394 					<button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
   370 					<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
   395 					<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
   371 					<?php _e( 'Document Preview' ); ?>
   396 					<p><?php _e( 'Document Preview' ); ?></p>
   372 					<# } #>
   397 					<# } #>
   373 				</div>
   398 				</div>
   374 			</div>
   399 			</div>
   375 		</div>
   400 		</div>
   376 		<div class="attachment-info">
   401 		<div class="attachment-info">
   377 			<span class="settings-save-status">
   402 			<span class="settings-save-status" role="status">
   378 				<span class="spinner"></span>
   403 				<span class="spinner"></span>
   379 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   404 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   380 			</span>
   405 			</span>
   381 			<div class="details">
   406 			<div class="details">
       
   407 				<h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
   382 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
   408 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
   383 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
   409 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
   384 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   410 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
   385 
   411 
   386 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
   412 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
   387 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   413 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   388 					<# if ( data.width && data.height ) { #>
   414 					<# if ( data.width && data.height ) { #>
   389 						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
   415 						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
   390 							<?php
   416 							<?php
   391 							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
   417 							/* translators: 1: A number of pixels wide, 2: A number of pixels tall. */
   392 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
   418 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
   393 							?>
   419 							?>
   394 						</div>
   420 						</div>
       
   421 					<# } #>
       
   422 
       
   423 					<# if ( data.originalImageURL && data.originalImageName ) { #>
       
   424 						<?php _e( 'Original image:' ); ?>
       
   425 						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
   395 					<# } #>
   426 					<# } #>
   396 				<# } #>
   427 				<# } #>
   397 
   428 
   398 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   429 				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
   399 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
   430 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
   419 			</div>
   450 			</div>
   420 
   451 
   421 			<div class="settings">
   452 			<div class="settings">
   422 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   453 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   423 				<# if ( 'image' === data.type ) { #>
   454 				<# if ( 'image' === data.type ) { #>
   424 					<label class="setting" data-setting="alt">
   455 					<span class="setting has-description" data-setting="alt">
   425 						<span class="name"><?php _e( 'Alternative Text' ); ?></span>
   456 						<label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
   426 						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   457 						<input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   427 					</label>
   458 					</span>
   428 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   459 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   429 				<# } #>
   460 				<# } #>
   430 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   461 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   431 				<label class="setting" data-setting="title">
   462 				<span class="setting" data-setting="title">
   432 					<span class="name"><?php _e( 'Title' ); ?></span>
   463 					<label for="attachment-details-two-column-title" class="name"><?php _e( 'Title' ); ?></label>
   433 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   464 					<input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
   434 				</label>
   465 				</span>
   435 				<?php endif; ?>
   466 				<?php endif; ?>
   436 				<# if ( 'audio' === data.type ) { #>
   467 				<# if ( 'audio' === data.type ) { #>
   437 				<?php
   468 				<?php
   438 				foreach ( array(
   469 				foreach ( array(
   439 					'artist' => __( 'Artist' ),
   470 					'artist' => __( 'Artist' ),
   440 					'album'  => __( 'Album' ),
   471 					'album'  => __( 'Album' ),
   441 				) as $key => $label ) :
   472 				) as $key => $label ) :
   442 					?>
   473 					?>
   443 				<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   474 				<span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   444 					<span class="name"><?php echo $label; ?></span>
   475 					<label for="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
   445 					<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   476 					<input type="text" id="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   446 				</label>
   477 				</span>
   447 				<?php endforeach; ?>
   478 				<?php endforeach; ?>
   448 				<# } #>
   479 				<# } #>
   449 				<label class="setting" data-setting="caption">
   480 				<span class="setting" data-setting="caption">
   450 					<span class="name"><?php _e( 'Caption' ); ?></span>
   481 					<label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label>
   451 					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   482 					<textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   452 				</label>
   483 				</span>
   453 				<label class="setting" data-setting="description">
   484 				<span class="setting" data-setting="description">
   454 					<span class="name"><?php _e( 'Description' ); ?></span>
   485 					<label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label>
   455 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   486 					<textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
   456 				</label>
   487 				</span>
   457 				<div class="setting">
   488 				<span class="setting">
   458 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
   489 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
   459 					<span class="value">{{ data.authorName }}</span>
   490 					<span class="value">{{ data.authorName }}</span>
   460 				</div>
   491 				</span>
   461 				<# if ( data.uploadedToTitle ) { #>
   492 				<# if ( data.uploadedToTitle ) { #>
   462 					<div class="setting">
   493 					<span class="setting">
   463 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
   494 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
   464 						<# if ( data.uploadedToLink ) { #>
   495 						<# if ( data.uploadedToLink ) { #>
   465 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
   496 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
   466 						<# } else { #>
   497 						<# } else { #>
   467 							<span class="value">{{ data.uploadedToTitle }}</span>
   498 							<span class="value">{{ data.uploadedToTitle }}</span>
   468 						<# } #>
   499 						<# } #>
   469 					</div>
   500 					</span>
   470 				<# } #>
   501 				<# } #>
   471 				<label class="setting" data-setting="url">
   502 				<span class="setting" data-setting="url">
   472 					<span class="name"><?php _e( 'Copy Link' ); ?></span>
   503 					<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
   473 					<input type="text" value="{{ data.url }}" readonly />
   504 					<input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
   474 				</label>
   505 					<span class="copy-to-clipboard-container">
       
   506 						<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link"><?php _e( 'Copy URL' ); ?></button>
       
   507 						<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
       
   508 					</span>
       
   509 				</span>
   475 				<div class="attachment-compat"></div>
   510 				<div class="attachment-compat"></div>
   476 			</div>
   511 			</div>
   477 
   512 
   478 			<div class="actions">
   513 			<div class="actions">
   479 				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
   514 				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
   486 							<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   521 							<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   487 						<# } else { #>
   522 						<# } else { #>
   488 							<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   523 							<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   489 						<# } #>
   524 						<# } #>
   490 					<?php else : ?>
   525 					<?php else : ?>
   491 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   526 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete permanently' ); ?></button>
   492 					<?php endif; ?>
   527 					<?php endif; ?>
   493 				<# } #>
   528 				<# } #>
   494 			</div>
   529 			</div>
   495 
   530 		</div>
   496 		</div>
   531 	</script>
   497 	</script>
   532 
   498 
   533 	<?php // Template for the Attachment "thumbnails" in the Media Grid. ?>
   499 	<script type="text/html" id="tmpl-attachment">
   534 	<script type="text/html" id="tmpl-attachment">
   500 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
   535 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
   501 			<div class="thumbnail">
   536 			<div class="thumbnail">
   502 				<# if ( data.uploading ) { #>
   537 				<# if ( data.uploading ) { #>
   503 					<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
   538 					<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
   530 		<#
   565 		<#
   531 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   566 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   532 		if ( data.describe ) {
   567 		if ( data.describe ) {
   533 			if ( 'image' === data.type ) { #>
   568 			if ( 'image' === data.type ) { #>
   534 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   569 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   535 					placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
   570 					aria-label="<?php esc_attr_e( 'Caption' ); ?>"
       
   571 					placeholder="<?php esc_attr_e( 'Caption&hellip;' ); ?>" {{ maybeReadOnly }} />
   536 			<# } else { #>
   572 			<# } else { #>
   537 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   573 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   538 					<# if ( 'video' === data.type ) { #>
   574 					<# if ( 'video' === data.type ) { #>
   539 						placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
   575 						aria-label="<?php esc_attr_e( 'Video title' ); ?>"
       
   576 						placeholder="<?php esc_attr_e( 'Video title&hellip;' ); ?>"
   540 					<# } else if ( 'audio' === data.type ) { #>
   577 					<# } else if ( 'audio' === data.type ) { #>
   541 						placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
   578 						aria-label="<?php esc_attr_e( 'Audio title' ); ?>"
       
   579 						placeholder="<?php esc_attr_e( 'Audio title&hellip;' ); ?>"
   542 					<# } else { #>
   580 					<# } else { #>
   543 						placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
   581 						aria-label="<?php esc_attr_e( 'Media title' ); ?>"
       
   582 						placeholder="<?php esc_attr_e( 'Media title&hellip;' ); ?>"
   544 					<# } #> {{ maybeReadOnly }} />
   583 					<# } #> {{ maybeReadOnly }} />
   545 			<# }
   584 			<# }
   546 		} #>
   585 		} #>
   547 	</script>
   586 	</script>
   548 
   587 
       
   588 	<?php // Template for the Attachment details, used for example in the sidebar. ?>
   549 	<script type="text/html" id="tmpl-attachment-details">
   589 	<script type="text/html" id="tmpl-attachment-details">
   550 		<h2>
   590 		<h2>
   551 			<?php _e( 'Attachment Details' ); ?>
   591 			<?php _e( 'Attachment Details' ); ?>
   552 			<span class="settings-save-status">
   592 			<span class="settings-save-status" role="status">
   553 				<span class="spinner"></span>
   593 				<span class="spinner"></span>
   554 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   594 				<span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
   555 			</span>
   595 			</span>
   556 		</h2>
   596 		</h2>
   557 		<div class="attachment-info">
   597 		<div class="attachment-info">
   571 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
   611 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
   572 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   612 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   573 					<# if ( data.width && data.height ) { #>
   613 					<# if ( data.width && data.height ) { #>
   574 						<div class="dimensions">
   614 						<div class="dimensions">
   575 							<?php
   615 							<?php
   576 							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
   616 							/* translators: 1: A number of pixels wide, 2: A number of pixels tall. */
   577 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
   617 							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
   578 							?>
   618 							?>
   579 						</div>
   619 						</div>
       
   620 					<# } #>
       
   621 
       
   622 					<# if ( data.originalImageURL && data.originalImageName ) { #>
       
   623 						<?php _e( 'Original image:' ); ?>
       
   624 						<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
   580 					<# } #>
   625 					<# } #>
   581 
   626 
   582 					<# if ( data.can.save && data.sizes ) { #>
   627 					<# if ( data.can.save && data.sizes ) { #>
   583 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   628 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   584 					<# } #>
   629 					<# } #>
   597 						<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   642 						<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
   598 					<# } else { #>
   643 					<# } else { #>
   599 						<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   644 						<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
   600 					<# } #>
   645 					<# } #>
   601 					<?php else : ?>
   646 					<?php else : ?>
   602 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
   647 						<button type="button" class="button-link delete-attachment"><?php _e( 'Delete permanently' ); ?></button>
   603 					<?php endif; ?>
   648 					<?php endif; ?>
   604 				<# } #>
   649 				<# } #>
   605 
   650 
   606 				<div class="compat-meta">
   651 				<div class="compat-meta">
   607 					<# if ( data.compat && data.compat.meta ) { #>
   652 					<# if ( data.compat && data.compat.meta ) { #>
   608 						{{{ data.compat.meta }}}
   653 						{{{ data.compat.meta }}}
   609 					<# } #>
   654 					<# } #>
   610 				</div>
   655 				</div>
   611 			</div>
   656 			</div>
   612 		</div>
   657 		</div>
   613 
       
   614 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   658 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   615 		<# if ( 'image' === data.type ) { #>
   659 		<# if ( 'image' === data.type ) { #>
   616 			<label class="setting" data-setting="alt">
   660 			<span class="setting has-description" data-setting="alt">
   617 				<span class="name"><?php _e( 'Alt Text' ); ?></span>
   661 				<label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
   618 				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   662 				<input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
   619 			</label>
   663 			</span>
   620 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   664 			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   621 		<# } #>
   665 		<# } #>
   622 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   666 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
   623 		<label class="setting" data-setting="title">
   667 		<span class="setting" data-setting="title">
   624 			<span class="name"><?php _e( 'Title' ); ?></span>
   668 			<label for="attachment-details-title" class="name"><?php _e( 'Title' ); ?></label>
   625 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   669 			<input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} />
   626 		</label>
   670 		</span>
   627 		<?php endif; ?>
   671 		<?php endif; ?>
   628 		<# if ( 'audio' === data.type ) { #>
   672 		<# if ( 'audio' === data.type ) { #>
   629 		<?php
   673 		<?php
   630 		foreach ( array(
   674 		foreach ( array(
   631 			'artist' => __( 'Artist' ),
   675 			'artist' => __( 'Artist' ),
   632 			'album'  => __( 'Album' ),
   676 			'album'  => __( 'Album' ),
   633 		) as $key => $label ) :
   677 		) as $key => $label ) :
   634 			?>
   678 			?>
   635 		<label class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   679 		<span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
   636 			<span class="name"><?php echo $label; ?></span>
   680 			<label for="attachment-details-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
   637 			<input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   681 			<input type="text" id="attachment-details-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
   638 		</label>
   682 		</span>
   639 		<?php endforeach; ?>
   683 		<?php endforeach; ?>
   640 		<# } #>
   684 		<# } #>
   641 		<label class="setting" data-setting="caption">
   685 		<span class="setting" data-setting="caption">
   642 			<span class="name"><?php _e( 'Caption' ); ?></span>
   686 			<label for="attachment-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
   643 			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   687 			<textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   644 		</label>
   688 		</span>
   645 		<label class="setting" data-setting="description">
   689 		<span class="setting" data-setting="description">
   646 			<span class="name"><?php _e( 'Description' ); ?></span>
   690 			<label for="attachment-details-description" class="name"><?php _e( 'Description' ); ?></label>
   647 			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   691 			<textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
   648 		</label>
   692 		</span>
   649 		<label class="setting" data-setting="url">
   693 		<span class="setting" data-setting="url">
   650 			<span class="name"><?php _e( 'Copy Link' ); ?></span>
   694 			<label for="attachment-details-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
   651 			<input type="text" value="{{ data.url }}" readonly />
   695 			<input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
   652 		</label>
   696 			<div class="copy-to-clipboard-container">
   653 	</script>
   697 				<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link"><?php _e( 'Copy URL' ); ?></button>
   654 
   698 				<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
       
   699 			</div>
       
   700 		</span>
       
   701 	</script>
       
   702 
       
   703 	<?php // Template for the Selection status bar. ?>
   655 	<script type="text/html" id="tmpl-media-selection">
   704 	<script type="text/html" id="tmpl-media-selection">
   656 		<div class="selection-info">
   705 		<div class="selection-info">
   657 			<span class="count"></span>
   706 			<span class="count"></span>
   658 			<# if ( data.editable ) { #>
   707 			<# if ( data.editable ) { #>
   659 				<button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
   708 				<button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
   663 			<# } #>
   712 			<# } #>
   664 		</div>
   713 		</div>
   665 		<div class="selection-view"></div>
   714 		<div class="selection-view"></div>
   666 	</script>
   715 	</script>
   667 
   716 
       
   717 	<?php // Template for the Attachment display settings, used for example in the sidebar. ?>
   668 	<script type="text/html" id="tmpl-attachment-display-settings">
   718 	<script type="text/html" id="tmpl-attachment-display-settings">
   669 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
   719 		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
   670 
   720 
   671 		<# if ( 'image' === data.type ) { #>
   721 		<# if ( 'image' === data.type ) { #>
   672 			<label class="setting align">
   722 			<span class="setting align">
   673 				<span><?php _e( 'Alignment' ); ?></span>
   723 				<label for="attachment-display-settings-alignment" class="name"><?php _e( 'Alignment' ); ?></label>
   674 				<select class="alignment"
   724 				<select id="attachment-display-settings-alignment" class="alignment"
   675 					data-setting="align"
   725 					data-setting="align"
   676 					<# if ( data.userSettings ) { #>
   726 					<# if ( data.userSettings ) { #>
   677 						data-user-setting="align"
   727 						data-user-setting="align"
   678 					<# } #>>
   728 					<# } #>>
   679 
   729 
   688 					</option>
   738 					</option>
   689 					<option value="none" selected>
   739 					<option value="none" selected>
   690 						<?php esc_html_e( 'None' ); ?>
   740 						<?php esc_html_e( 'None' ); ?>
   691 					</option>
   741 					</option>
   692 				</select>
   742 				</select>
       
   743 			</span>
       
   744 		<# } #>
       
   745 
       
   746 		<span class="setting">
       
   747 			<label for="attachment-display-settings-link-to" class="name">
       
   748 				<# if ( data.model.canEmbed ) { #>
       
   749 					<?php _e( 'Embed or Link' ); ?>
       
   750 				<# } else { #>
       
   751 					<?php _e( 'Link To' ); ?>
       
   752 				<# } #>
   693 			</label>
   753 			</label>
   694 		<# } #>
   754 			<select id="attachment-display-settings-link-to" class="link-to"
   695 
   755 				data-setting="link"
   696 		<div class="setting">
   756 				<# if ( data.userSettings && ! data.model.canEmbed ) { #>
   697 			<label>
   757 					data-user-setting="urlbutton"
       
   758 				<# } #>>
       
   759 
       
   760 			<# if ( data.model.canEmbed ) { #>
       
   761 				<option value="embed" selected>
       
   762 					<?php esc_html_e( 'Embed Media Player' ); ?>
       
   763 				</option>
       
   764 				<option value="file">
       
   765 			<# } else { #>
       
   766 				<option value="none" selected>
       
   767 					<?php esc_html_e( 'None' ); ?>
       
   768 				</option>
       
   769 				<option value="file">
       
   770 			<# } #>
   698 				<# if ( data.model.canEmbed ) { #>
   771 				<# if ( data.model.canEmbed ) { #>
   699 					<span><?php _e( 'Embed or Link' ); ?></span>
   772 					<?php esc_html_e( 'Link to Media File' ); ?>
   700 				<# } else { #>
   773 				<# } else { #>
   701 					<span><?php _e( 'Link To' ); ?></span>
   774 					<?php esc_html_e( 'Media File' ); ?>
   702 				<# } #>
   775 				<# } #>
   703 
   776 				</option>
   704 				<select class="link-to"
   777 				<option value="post">
   705 					data-setting="link"
       
   706 					<# if ( data.userSettings && ! data.model.canEmbed ) { #>
       
   707 						data-user-setting="urlbutton"
       
   708 					<# } #>>
       
   709 
       
   710 				<# if ( data.model.canEmbed ) { #>
   778 				<# if ( data.model.canEmbed ) { #>
   711 					<option value="embed" selected>
   779 					<?php esc_html_e( 'Link to Attachment Page' ); ?>
   712 						<?php esc_html_e( 'Embed Media Player' ); ?>
       
   713 					</option>
       
   714 					<option value="file">
       
   715 				<# } else { #>
   780 				<# } else { #>
   716 					<option value="none" selected>
   781 					<?php esc_html_e( 'Attachment Page' ); ?>
   717 						<?php esc_html_e( 'None' ); ?>
   782 				<# } #>
   718 					</option>
   783 				</option>
   719 					<option value="file">
   784 			<# if ( 'image' === data.type ) { #>
   720 				<# } #>
   785 				<option value="custom">
   721 					<# if ( data.model.canEmbed ) { #>
   786 					<?php esc_html_e( 'Custom URL' ); ?>
   722 						<?php esc_html_e( 'Link to Media File' ); ?>
   787 				</option>
   723 					<# } else { #>
   788 			<# } #>
   724 						<?php esc_html_e( 'Media File' ); ?>
   789 			</select>
   725 					<# } #>
   790 		</span>
   726 					</option>
   791 		<span class="setting">
   727 					<option value="post">
   792 			<label for="attachment-display-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
   728 					<# if ( data.model.canEmbed ) { #>
   793 			<input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
   729 						<?php esc_html_e( 'Link to Attachment Page' ); ?>
   794 		</span>
   730 					<# } else { #>
       
   731 						<?php esc_html_e( 'Attachment Page' ); ?>
       
   732 					<# } #>
       
   733 					</option>
       
   734 				<# if ( 'image' === data.type ) { #>
       
   735 					<option value="custom">
       
   736 						<?php esc_html_e( 'Custom URL' ); ?>
       
   737 					</option>
       
   738 				<# } #>
       
   739 				</select>
       
   740 			</label>
       
   741 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
       
   742 		</div>
       
   743 
   795 
   744 		<# if ( 'undefined' !== typeof data.sizes ) { #>
   796 		<# if ( 'undefined' !== typeof data.sizes ) { #>
   745 			<label class="setting">
   797 			<span class="setting">
   746 				<span><?php _e( 'Size' ); ?></span>
   798 				<label for="attachment-display-settings-size" class="name"><?php _e( 'Size' ); ?></label>
   747 				<select class="size" name="size"
   799 				<select id="attachment-display-settings-size" class="size" name="size"
   748 					data-setting="size"
   800 					data-setting="size"
   749 					<# if ( data.userSettings ) { #>
   801 					<# if ( data.userSettings ) { #>
   750 						data-user-setting="imgsize"
   802 						data-user-setting="imgsize"
   751 					<# } #>>
   803 					<# } #>>
   752 					<?php
   804 					<?php
   770 								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
   822 								<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
   771 							</option>
   823 							</option>
   772 						<# } #>
   824 						<# } #>
   773 					<?php endforeach; ?>
   825 					<?php endforeach; ?>
   774 				</select>
   826 				</select>
   775 			</label>
   827 			</span>
   776 		<# } #>
   828 		<# } #>
   777 	</script>
   829 	</script>
   778 
   830 
       
   831 	<?php // Template for the Gallery settings, used for example in the sidebar. ?>
   779 	<script type="text/html" id="tmpl-gallery-settings">
   832 	<script type="text/html" id="tmpl-gallery-settings">
   780 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
   833 		<h2><?php _e( 'Gallery Settings' ); ?></h2>
   781 
   834 
   782 		<label class="setting">
   835 		<span class="setting">
   783 			<span><?php _e( 'Link To' ); ?></span>
   836 			<label for="gallery-settings-link-to" class="name"><?php _e( 'Link To' ); ?></label>
   784 			<select class="link-to"
   837 			<select id="gallery-settings-link-to" class="link-to"
   785 				data-setting="link"
   838 				data-setting="link"
   786 				<# if ( data.userSettings ) { #>
   839 				<# if ( data.userSettings ) { #>
   787 					data-user-setting="urlbutton"
   840 					data-user-setting="urlbutton"
   788 				<# } #>>
   841 				<# } #>>
   789 
   842 
   790 				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
   843 				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' === wp.media.galleryDefaults.link ) {
   791 					#>selected="selected"<# }
   844 					#>selected="selected"<# }
   792 				#>>
   845 				#>>
   793 					<?php esc_html_e( 'Attachment Page' ); ?>
   846 					<?php esc_html_e( 'Attachment Page' ); ?>
   794 				</option>
   847 				</option>
   795 				<option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   848 				<option value="file" <# if ( 'file' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   796 					<?php esc_html_e( 'Media File' ); ?>
   849 					<?php esc_html_e( 'Media File' ); ?>
   797 				</option>
   850 				</option>
   798 				<option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   851 				<option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   799 					<?php esc_html_e( 'None' ); ?>
   852 					<?php esc_html_e( 'None' ); ?>
   800 				</option>
   853 				</option>
   801 			</select>
   854 			</select>
   802 		</label>
   855 		</span>
   803 
   856 
   804 		<label class="setting">
   857 		<span class="setting">
   805 			<span><?php _e( 'Columns' ); ?></span>
   858 			<label for="gallery-settings-columns" class="name select-label-inline"><?php _e( 'Columns' ); ?></label>
   806 			<select class="columns" name="columns"
   859 			<select id="gallery-settings-columns" class="columns" name="columns"
   807 				data-setting="columns">
   860 				data-setting="columns">
   808 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   861 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   809 					<option value="<?php echo esc_attr( $i ); ?>" <#
   862 					<option value="<?php echo esc_attr( $i ); ?>" <#
   810 						if ( <?php echo $i; ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
   863 						if ( <?php echo $i; ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
   811 					#>>
   864 					#>>
   812 						<?php echo esc_html( $i ); ?>
   865 						<?php echo esc_html( $i ); ?>
   813 					</option>
   866 					</option>
   814 				<?php endfor; ?>
   867 				<?php endfor; ?>
   815 			</select>
   868 			</select>
   816 		</label>
   869 		</span>
   817 
   870 
   818 		<label class="setting">
   871 		<span class="setting">
   819 			<span><?php _e( 'Random Order' ); ?></span>
   872 			<input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" />
   820 			<input type="checkbox" data-setting="_orderbyRandom" />
   873 			<label for="gallery-settings-random-order" class="checkbox-label-inline"><?php _e( 'Random Order' ); ?></label>
   821 		</label>
   874 		</span>
   822 
   875 
   823 		<label class="setting size">
   876 		<span class="setting size">
   824 			<span><?php _e( 'Size' ); ?></span>
   877 			<label for="gallery-settings-size" class="name"><?php _e( 'Size' ); ?></label>
   825 			<select class="size" name="size"
   878 			<select id="gallery-settings-size" class="size" name="size"
   826 				data-setting="size"
   879 				data-setting="size"
   827 				<# if ( data.userSettings ) { #>
   880 				<# if ( data.userSettings ) { #>
   828 					data-user-setting="imgsize"
   881 					data-user-setting="imgsize"
   829 				<# } #>
   882 				<# } #>
   830 				>
   883 				>
   845 					<option value="<?php echo esc_attr( $size ); ?>">
   898 					<option value="<?php echo esc_attr( $size ); ?>">
   846 						<?php echo esc_html( $label ); ?>
   899 						<?php echo esc_html( $label ); ?>
   847 					</option>
   900 					</option>
   848 				<?php endforeach; ?>
   901 				<?php endforeach; ?>
   849 			</select>
   902 			</select>
   850 		</label>
   903 		</span>
   851 	</script>
   904 	</script>
   852 
   905 
       
   906 	<?php // Template for the Playlists settings, used for example in the sidebar. ?>
   853 	<script type="text/html" id="tmpl-playlist-settings">
   907 	<script type="text/html" id="tmpl-playlist-settings">
   854 		<h2><?php _e( 'Playlist Settings' ); ?></h2>
   908 		<h2><?php _e( 'Playlist Settings' ); ?></h2>
   855 
   909 
   856 		<# var emptyModel = _.isEmpty( data.model ),
   910 		<# var emptyModel = _.isEmpty( data.model ),
   857 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
   911 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
   858 
   912 
   859 		<label class="setting">
   913 		<span class="setting">
   860 			<input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
   914 			<input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
   861 				checked="checked"
   915 				checked="checked"
   862 			<# } #> />
   916 			<# } #> />
   863 			<# if ( isVideo ) { #>
   917 			<label for="playlist-settings-show-list" class="checkbox-label-inline">
   864 			<span><?php _e( 'Show Video List' ); ?></span>
   918 				<# if ( isVideo ) { #>
   865 			<# } else { #>
   919 				<?php _e( 'Show Video List' ); ?>
   866 			<span><?php _e( 'Show Tracklist' ); ?></span>
   920 				<# } else { #>
   867 			<# } #>
   921 				<?php _e( 'Show Tracklist' ); ?>
   868 		</label>
   922 				<# } #>
       
   923 			</label>
       
   924 		</span>
   869 
   925 
   870 		<# if ( ! isVideo ) { #>
   926 		<# if ( ! isVideo ) { #>
   871 		<label class="setting">
   927 		<span class="setting">
   872 			<input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
   928 			<input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
   873 				checked="checked"
   929 				checked="checked"
   874 			<# } #> />
   930 			<# } #> />
   875 			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
   931 			<label for="playlist-settings-show-artist" class="checkbox-label-inline">
   876 		</label>
   932 				<?php _e( 'Show Artist Name in Tracklist' ); ?>
       
   933 			</label>
       
   934 		</span>
   877 		<# } #>
   935 		<# } #>
   878 
   936 
   879 		<label class="setting">
   937 		<span class="setting">
   880 			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
   938 			<input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
   881 				checked="checked"
   939 				checked="checked"
   882 			<# } #> />
   940 			<# } #> />
   883 			<span><?php _e( 'Show Images' ); ?></span>
   941 			<label for="playlist-settings-show-images" class="checkbox-label-inline">
   884 		</label>
   942 				<?php _e( 'Show Images' ); ?>
   885 	</script>
   943 			</label>
   886 
   944 		</span>
       
   945 	</script>
       
   946 
       
   947 	<?php // Template for the "Insert from URL" layout. ?>
   887 	<script type="text/html" id="tmpl-embed-link-settings">
   948 	<script type="text/html" id="tmpl-embed-link-settings">
   888 		<label class="setting link-text">
   949 		<span class="setting link-text">
   889 			<span><?php _e( 'Link Text' ); ?></span>
   950 			<label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label>
   890 			<input type="text" class="alignment" data-setting="linkText" />
   951 			<input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
   891 		</label>
   952 		</span>
   892 		<div class="embed-container" style="display: none;">
   953 		<div class="embed-container" style="display: none;">
   893 			<div class="embed-preview"></div>
   954 			<div class="embed-preview"></div>
   894 		</div>
   955 		</div>
   895 	</script>
   956 	</script>
   896 
   957 
       
   958 	<?php // Template for the "Insert from URL" image preview and details. ?>
   897 	<script type="text/html" id="tmpl-embed-image-settings">
   959 	<script type="text/html" id="tmpl-embed-image-settings">
   898 		<div class="thumbnail">
   960 		<div class="wp-clearfix">
   899 			<img src="{{ data.model.url }}" draggable="false" alt="" />
   961 			<div class="thumbnail">
   900 		</div>
   962 				<img src="{{ data.model.url }}" draggable="false" alt="" />
   901 
   963 			</div>
   902 		<label class="setting alt-text has-description">
   964 		</div>
   903 			<span><?php _e( 'Alternative Text' ); ?></span>
   965 
   904 			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
   966 		<span class="setting alt-text has-description">
   905 		</label>
   967 			<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
       
   968 			<input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
       
   969 		</span>
   906 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   970 		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   907 
   971 
   908 		<?php
   972 		<?php
   909 		/** This filter is documented in wp-admin/includes/media.php */
   973 		/** This filter is documented in wp-admin/includes/media.php */
   910 		if ( ! apply_filters( 'disable_captions', '' ) ) :
   974 		if ( ! apply_filters( 'disable_captions', '' ) ) :
   911 			?>
   975 			?>
   912 			<label class="setting caption">
   976 			<span class="setting caption">
   913 				<span><?php _e( 'Caption' ); ?></span>
   977 				<label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label>
   914 				<textarea data-setting="caption" />
   978 				<textarea id="embed-image-settings-caption" data-setting="caption" />
   915 			</label>
   979 			</span>
   916 		<?php endif; ?>
   980 		<?php endif; ?>
   917 
   981 
   918 		<div class="setting align">
   982 		<fieldset class="setting-group">
   919 			<span><?php _e( 'Align' ); ?></span>
   983 			<legend class="name"><?php _e( 'Align' ); ?></legend>
   920 			<div class="button-group button-large" data-setting="align">
   984 			<span class="setting align">
   921 				<button class="button" value="left">
   985 				<span class="button-group button-large" data-setting="align">
   922 					<?php esc_html_e( 'Left' ); ?>
   986 					<button class="button" value="left">
   923 				</button>
   987 						<?php esc_html_e( 'Left' ); ?>
   924 				<button class="button" value="center">
   988 					</button>
   925 					<?php esc_html_e( 'Center' ); ?>
   989 					<button class="button" value="center">
   926 				</button>
   990 						<?php esc_html_e( 'Center' ); ?>
   927 				<button class="button" value="right">
   991 					</button>
   928 					<?php esc_html_e( 'Right' ); ?>
   992 					<button class="button" value="right">
   929 				</button>
   993 						<?php esc_html_e( 'Right' ); ?>
   930 				<button class="button active" value="none">
   994 					</button>
   931 					<?php esc_html_e( 'None' ); ?>
   995 					<button class="button active" value="none">
   932 				</button>
   996 						<?php esc_html_e( 'None' ); ?>
   933 			</div>
   997 					</button>
   934 		</div>
   998 				</span>
   935 
   999 			</span>
   936 		<div class="setting link-to">
  1000 		</fieldset>
   937 			<span><?php _e( 'Link To' ); ?></span>
  1001 
   938 			<div class="button-group button-large" data-setting="link">
  1002 		<fieldset class="setting-group">
   939 				<button class="button" value="file">
  1003 			<legend class="name"><?php _e( 'Link To' ); ?></legend>
   940 					<?php esc_html_e( 'Image URL' ); ?>
  1004 			<span class="setting link-to">
   941 				</button>
  1005 				<span class="button-group button-large" data-setting="link">
   942 				<button class="button" value="custom">
  1006 					<button class="button" value="file">
   943 					<?php esc_html_e( 'Custom URL' ); ?>
  1007 						<?php esc_html_e( 'Image URL' ); ?>
   944 				</button>
  1008 					</button>
   945 				<button class="button active" value="none">
  1009 					<button class="button" value="custom">
   946 					<?php esc_html_e( 'None' ); ?>
  1010 						<?php esc_html_e( 'Custom URL' ); ?>
   947 				</button>
  1011 					</button>
   948 			</div>
  1012 					<button class="button active" value="none">
   949 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
  1013 						<?php esc_html_e( 'None' ); ?>
   950 		</div>
  1014 					</button>
   951 	</script>
  1015 				</span>
   952 
  1016 			</span>
       
  1017 			<span class="setting">
       
  1018 				<label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
       
  1019 				<input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
       
  1020 			</span>
       
  1021 		</fieldset>
       
  1022 	</script>
       
  1023 
       
  1024 	<?php // Template for the Image details, used for example in the editor. ?>
   953 	<script type="text/html" id="tmpl-image-details">
  1025 	<script type="text/html" id="tmpl-image-details">
   954 		<div class="media-embed">
  1026 		<div class="media-embed">
   955 			<div class="embed-media-settings">
  1027 			<div class="embed-media-settings">
   956 				<div class="column-image">
       
   957 					<div class="image">
       
   958 						<img src="{{ data.model.url }}" draggable="false" alt="" />
       
   959 
       
   960 						<# if ( data.attachment && window.imageEdit ) { #>
       
   961 							<div class="actions">
       
   962 								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
       
   963 								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
       
   964 							</div>
       
   965 						<# } #>
       
   966 					</div>
       
   967 				</div>
       
   968 				<div class="column-settings">
  1028 				<div class="column-settings">
   969 					<label class="setting alt-text has-description">
  1029 					<span class="setting alt-text has-description">
   970 						<span><?php _e( 'Alternative Text' ); ?></span>
  1030 						<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
   971 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
  1031 						<input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
   972 					</label>
  1032 					</span>
   973 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
  1033 					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
   974 
  1034 
   975 					<?php
  1035 					<?php
   976 					/** This filter is documented in wp-admin/includes/media.php */
  1036 					/** This filter is documented in wp-admin/includes/media.php */
   977 					if ( ! apply_filters( 'disable_captions', '' ) ) :
  1037 					if ( ! apply_filters( 'disable_captions', '' ) ) :
   978 						?>
  1038 						?>
   979 						<label class="setting caption">
  1039 						<span class="setting caption">
   980 							<span><?php _e( 'Caption' ); ?></span>
  1040 							<label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
   981 							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
  1041 							<textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
   982 						</label>
  1042 						</span>
   983 					<?php endif; ?>
  1043 					<?php endif; ?>
   984 
  1044 
   985 					<h2><?php _e( 'Display Settings' ); ?></h2>
  1045 					<h2><?php _e( 'Display Settings' ); ?></h2>
   986 					<div class="setting align">
  1046 					<fieldset class="setting-group">
   987 						<span><?php _e( 'Align' ); ?></span>
  1047 						<legend class="legend-inline"><?php _e( 'Align' ); ?></legend>
   988 						<div class="button-group button-large" data-setting="align">
  1048 						<span class="setting align">
   989 							<button class="button" value="left">
  1049 							<span class="button-group button-large" data-setting="align">
   990 								<?php esc_html_e( 'Left' ); ?>
  1050 								<button class="button" value="left">
   991 							</button>
  1051 									<?php esc_html_e( 'Left' ); ?>
   992 							<button class="button" value="center">
  1052 								</button>
   993 								<?php esc_html_e( 'Center' ); ?>
  1053 								<button class="button" value="center">
   994 							</button>
  1054 									<?php esc_html_e( 'Center' ); ?>
   995 							<button class="button" value="right">
  1055 								</button>
   996 								<?php esc_html_e( 'Right' ); ?>
  1056 								<button class="button" value="right">
   997 							</button>
  1057 									<?php esc_html_e( 'Right' ); ?>
   998 							<button class="button active" value="none">
  1058 								</button>
   999 								<?php esc_html_e( 'None' ); ?>
  1059 								<button class="button active" value="none">
  1000 							</button>
  1060 									<?php esc_html_e( 'None' ); ?>
  1001 						</div>
  1061 								</button>
  1002 					</div>
  1062 							</span>
       
  1063 						</span>
       
  1064 					</fieldset>
  1003 
  1065 
  1004 					<# if ( data.attachment ) { #>
  1066 					<# if ( data.attachment ) { #>
  1005 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
  1067 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
  1006 							<label class="setting size">
  1068 							<span class="setting size">
  1007 								<span><?php _e( 'Size' ); ?></span>
  1069 								<label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
  1008 								<select class="size" name="size"
  1070 								<select id="image-details-size" class="size" name="size"
  1009 									data-setting="size"
  1071 									data-setting="size"
  1010 									<# if ( data.userSettings ) { #>
  1072 									<# if ( data.userSettings ) { #>
  1011 										data-user-setting="imgsize"
  1073 										data-user-setting="imgsize"
  1012 									<# } #>>
  1074 									<# } #>>
  1013 									<?php
  1075 									<?php
  1034 									<?php endforeach; ?>
  1096 									<?php endforeach; ?>
  1035 									<option value="<?php echo esc_attr( 'custom' ); ?>">
  1097 									<option value="<?php echo esc_attr( 'custom' ); ?>">
  1036 										<?php _e( 'Custom Size' ); ?>
  1098 										<?php _e( 'Custom Size' ); ?>
  1037 									</option>
  1099 									</option>
  1038 								</select>
  1100 								</select>
  1039 							</label>
  1101 							</span>
  1040 						<# } #>
  1102 						<# } #>
  1041 							<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
  1103 							<div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
  1042 								<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>
  1104 								<span class="custom-size-setting">
       
  1105 									<label for="image-details-size-width"><?php _e( 'Width' ); ?></label>
       
  1106 									<input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
       
  1107 								</span>
       
  1108 								<span class="sep" aria-hidden="true">&times;</span>
       
  1109 								<span class="custom-size-setting">
       
  1110 									<label for="image-details-size-height"><?php _e( 'Height' ); ?></label>
       
  1111 									<input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
       
  1112 								</span>
       
  1113 								<p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p>
  1043 							</div>
  1114 							</div>
  1044 					<# } #>
  1115 					<# } #>
  1045 
  1116 
  1046 					<div class="setting link-to">
  1117 					<span class="setting link-to">
  1047 						<span><?php _e( 'Link To' ); ?></span>
  1118 						<label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label>
  1048 						<select data-setting="link">
  1119 						<select id="image-details-link-to" data-setting="link">
  1049 						<# if ( data.attachment ) { #>
  1120 						<# if ( data.attachment ) { #>
  1050 							<option value="file">
  1121 							<option value="file">
  1051 								<?php esc_html_e( 'Media File' ); ?>
  1122 								<?php esc_html_e( 'Media File' ); ?>
  1052 							</option>
  1123 							</option>
  1053 							<option value="post">
  1124 							<option value="post">
  1063 							</option>
  1134 							</option>
  1064 							<option value="none">
  1135 							<option value="none">
  1065 								<?php esc_html_e( 'None' ); ?>
  1136 								<?php esc_html_e( 'None' ); ?>
  1066 							</option>
  1137 							</option>
  1067 						</select>
  1138 						</select>
  1068 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
  1139 					</span>
  1069 					</div>
  1140 					<span class="setting">
       
  1141 						<label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
       
  1142 						<input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
       
  1143 					</span>
       
  1144 
  1070 					<div class="advanced-section">
  1145 					<div class="advanced-section">
  1071 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
  1146 						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
  1072 						<div class="advanced-settings hidden">
  1147 						<div class="advanced-settings hidden">
  1073 							<div class="advanced-image">
  1148 							<div class="advanced-image">
  1074 								<label class="setting title-text">
  1149 								<span class="setting title-text">
  1075 									<span><?php _e( 'Image Title Attribute' ); ?></span>
  1150 									<label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label>
  1076 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
  1151 									<input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
  1077 								</label>
  1152 								</span>
  1078 								<label class="setting extra-classes">
  1153 								<span class="setting extra-classes">
  1079 									<span><?php _e( 'Image CSS Class' ); ?></span>
  1154 									<label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label>
  1080 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1155 									<input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1081 								</label>
  1156 								</span>
  1082 							</div>
  1157 							</div>
  1083 							<div class="advanced-link">
  1158 							<div class="advanced-link">
  1084 								<div class="setting link-target">
  1159 								<span class="setting link-target">
  1085 									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
  1160 									<input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
  1086 								</div>
  1161 									<label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label>
  1087 								<label class="setting link-rel">
  1162 								</span>
  1088 									<span><?php _e( 'Link Rel' ); ?></span>
  1163 								<span class="setting link-rel">
  1089 									<input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1164 									<label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label>
  1090 								</label>
  1165 									<input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1091 								<label class="setting link-class-name">
  1166 								</span>
  1092 									<span><?php _e( 'Link CSS Class' ); ?></span>
  1167 								<span class="setting link-class-name">
  1093 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1168 									<label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label>
  1094 								</label>
  1169 									<input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
       
  1170 								</span>
  1095 							</div>
  1171 							</div>
  1096 						</div>
  1172 						</div>
  1097 					</div>
  1173 					</div>
  1098 				</div>
  1174 				</div>
  1099 			</div>
  1175 				<div class="column-image">
  1100 		</div>
  1176 					<div class="image">
  1101 	</script>
  1177 						<img src="{{ data.model.url }}" draggable="false" alt="" />
  1102 
  1178 						<# if ( data.attachment && window.imageEdit ) { #>
       
  1179 							<div class="actions">
       
  1180 								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
       
  1181 								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
       
  1182 							</div>
       
  1183 						<# } #>
       
  1184 					</div>
       
  1185 				</div>
       
  1186 			</div>
       
  1187 		</div>
       
  1188 	</script>
       
  1189 
       
  1190 	<?php // Template for the Image Editor layout. ?>
  1103 	<script type="text/html" id="tmpl-image-editor">
  1191 	<script type="text/html" id="tmpl-image-editor">
  1104 		<div id="media-head-{{ data.id }}"></div>
  1192 		<div id="media-head-{{ data.id }}"></div>
  1105 		<div id="image-editor-{{ data.id }}"></div>
  1193 		<div id="image-editor-{{ data.id }}"></div>
  1106 	</script>
  1194 	</script>
  1107 
  1195 
       
  1196 	<?php // Template for an embedded Audio details. ?>
  1108 	<script type="text/html" id="tmpl-audio-details">
  1197 	<script type="text/html" id="tmpl-audio-details">
  1109 		<# var ext, html5types = {
  1198 		<# var ext, html5types = {
  1110 			mp3: wp.media.view.settings.embedMimes.mp3,
  1199 			mp3: wp.media.view.settings.embedMimes.mp3,
  1111 			ogg: wp.media.view.settings.embedMimes.ogg
  1200 			ogg: wp.media.view.settings.embedMimes.ogg
  1112 		}; #>
  1201 		}; #>
  1120 					ext = data.model.src.split('.').pop();
  1209 					ext = data.model.src.split('.').pop();
  1121 					if ( html5types[ ext ] ) {
  1210 					if ( html5types[ ext ] ) {
  1122 						delete html5types[ ext ];
  1211 						delete html5types[ ext ];
  1123 					}
  1212 					}
  1124 				#>
  1213 				#>
  1125 				<div class="setting">
  1214 				<span class="setting">
  1126 					<label for="audio-source"><?php _e( 'URL' ); ?></label>
  1215 					<label for="audio-details-source" class="name"><?php _e( 'URL' ); ?></label>
  1127 					<input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1216 					<input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1128 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1217 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1129 				</div>
  1218 				</span>
  1130 				<# } #>
  1219 				<# } #>
  1131 				<?php
  1220 				<?php
  1132 
  1221 
  1133 				foreach ( $audio_types as $type ) :
  1222 				foreach ( $audio_types as $type ) :
  1134 					?>
  1223 					?>
  1135 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
  1224 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
  1136 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
  1225 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
  1137 						delete html5types.<?php echo $type; ?>;
  1226 						delete html5types.<?php echo $type; ?>;
  1138 					}
  1227 					}
  1139 				#>
  1228 				#>
  1140 				<div class="setting">
  1229 				<span class="setting">
  1141 					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
  1230 					<label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
  1142 					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1231 					<input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1143 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1232 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1144 				</div>
  1233 				</span>
  1145 				<# } #>
  1234 				<# } #>
  1146 				<?php endforeach ?>
  1235 				<?php endforeach ?>
  1147 
  1236 
  1148 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1237 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1149 				<div class="setting">
  1238 				<fieldset class="setting-group">
  1150 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
  1239 					<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
  1151 					<div class="button-large">
  1240 					<span class="setting">
  1152 					<# _.each( html5types, function (mime, type) { #>
  1241 						<span class="button-large">
  1153 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1242 						<# _.each( html5types, function (mime, type) { #>
  1154 					<# } ) #>
  1243 							<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1155 					</div>
  1244 						<# } ) #>
  1156 				</div>
  1245 						</span>
  1157 				<# } #>
  1246 					</span>
  1158 
  1247 				</fieldset>
  1159 				<div class="setting preload">
  1248 				<# } #>
  1160 					<span><?php _e( 'Preload' ); ?></span>
  1249 
  1161 					<div class="button-group button-large" data-setting="preload">
  1250 				<fieldset class="setting-group">
  1162 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1251 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1163 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1252 					<span class="setting preload">
  1164 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1253 						<span class="button-group button-large" data-setting="preload">
  1165 					</div>
  1254 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1166 				</div>
  1255 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1167 
  1256 							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1168 				<label class="setting checkbox-setting autoplay">
  1257 						</span>
  1169 					<input type="checkbox" data-setting="autoplay" />
  1258 					</span>
  1170 					<span><?php _e( 'Autoplay' ); ?></span>
  1259 				</fieldset>
  1171 				</label>
  1260 
  1172 
  1261 				<span class="setting-group">
  1173 				<label class="setting checkbox-setting">
  1262 					<span class="setting checkbox-setting autoplay">
  1174 					<input type="checkbox" data-setting="loop" />
  1263 						<input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
  1175 					<span><?php _e( 'Loop' ); ?></span>
  1264 						<label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
  1176 				</label>
  1265 					</span>
  1177 			</div>
  1266 
  1178 		</div>
  1267 					<span class="setting checkbox-setting">
  1179 	</script>
  1268 						<input type="checkbox" id="audio-details-loop" data-setting="loop" />
  1180 
  1269 						<label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
       
  1270 					</span>
       
  1271 				</span>
       
  1272 			</div>
       
  1273 		</div>
       
  1274 	</script>
       
  1275 
       
  1276 	<?php // Template for an embedded Video details. ?>
  1181 	<script type="text/html" id="tmpl-video-details">
  1277 	<script type="text/html" id="tmpl-video-details">
  1182 		<# var ext, html5types = {
  1278 		<# var ext, html5types = {
  1183 			mp4: wp.media.view.settings.embedMimes.mp4,
  1279 			mp4: wp.media.view.settings.embedMimes.mp4,
  1184 			ogv: wp.media.view.settings.embedMimes.ogv,
  1280 			ogv: wp.media.view.settings.embedMimes.ogv,
  1185 			webm: wp.media.view.settings.embedMimes.webm
  1281 			webm: wp.media.view.settings.embedMimes.webm
  1204 					ext = data.model.src.split('.').pop();
  1300 					ext = data.model.src.split('.').pop();
  1205 					if ( html5types[ ext ] ) {
  1301 					if ( html5types[ ext ] ) {
  1206 						delete html5types[ ext ];
  1302 						delete html5types[ ext ];
  1207 					}
  1303 					}
  1208 				#>
  1304 				#>
  1209 				<div class="setting">
  1305 				<span class="setting">
  1210 					<label for="video-source"><?php _e( 'URL' ); ?></label>
  1306 					<label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label>
  1211 					<input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1307 					<input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
  1212 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1308 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1213 				</div>
  1309 				</span>
  1214 				<# } #>
  1310 				<# } #>
  1215 				<?php
  1311 				<?php
  1216 				foreach ( $video_types as $type ) :
  1312 				foreach ( $video_types as $type ) :
  1217 					?>
  1313 					?>
  1218 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
  1314 				<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
  1219 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
  1315 					if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
  1220 						delete html5types.<?php echo $type; ?>;
  1316 						delete html5types.<?php echo $type; ?>;
  1221 					}
  1317 					}
  1222 				#>
  1318 				#>
  1223 				<div class="setting">
  1319 				<span class="setting">
  1224 					<label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
  1320 					<label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
  1225 					<input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1321 					<input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
  1226 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1322 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1227 				</div>
  1323 				</span>
  1228 				<# } #>
  1324 				<# } #>
  1229 				<?php endforeach ?>
  1325 				<?php endforeach ?>
  1230 				</div>
  1326 				</div>
  1231 
  1327 
  1232 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1328 				<# if ( ! _.isEmpty( html5types ) ) { #>
  1233 				<div class="setting">
  1329 				<fieldset class="setting-group">
  1234 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
  1330 					<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
  1235 					<div class="button-large">
  1331 					<span class="setting">
  1236 					<# _.each( html5types, function (mime, type) { #>
  1332 						<span class="button-large">
  1237 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1333 						<# _.each( html5types, function (mime, type) { #>
  1238 					<# } ) #>
  1334 							<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1239 					</div>
  1335 						<# } ) #>
  1240 				</div>
  1336 						</span>
       
  1337 					</span>
       
  1338 				</fieldset>
  1241 				<# } #>
  1339 				<# } #>
  1242 
  1340 
  1243 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1341 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1244 				<div class="setting">
  1342 				<span class="setting">
  1245 					<label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
  1343 					<label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label>
  1246 					<input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
  1344 					<input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
  1247 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1345 					<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1248 				</div>
  1346 				</span>
  1249 				<# } #>
  1347 				<# } #>
  1250 				<div class="setting preload">
  1348 
  1251 					<span><?php _e( 'Preload' ); ?></span>
  1349 				<fieldset class="setting-group">
  1252 					<div class="button-group button-large" data-setting="preload">
  1350 					<legend class="name"><?php _e( 'Preload' ); ?></legend>
  1253 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1351 					<span class="setting preload">
  1254 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1352 						<span class="button-group button-large" data-setting="preload">
  1255 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1353 							<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1256 					</div>
  1354 							<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1257 				</div>
  1355 							<button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1258 
  1356 						</span>
  1259 				<label class="setting checkbox-setting autoplay">
  1357 					</span>
  1260 					<input type="checkbox" data-setting="autoplay" />
  1358 				</fieldset>
  1261 					<span><?php _e( 'Autoplay' ); ?></span>
  1359 
  1262 				</label>
  1360 				<span class="setting-group">
  1263 
  1361 					<span class="setting checkbox-setting autoplay">
  1264 				<label class="setting checkbox-setting">
  1362 						<input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
  1265 					<input type="checkbox" data-setting="loop" />
  1363 						<label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
  1266 					<span><?php _e( 'Loop' ); ?></span>
  1364 					</span>
  1267 				</label>
  1365 
  1268 
  1366 					<span class="setting checkbox-setting">
  1269 				<div class="setting" data-setting="content">
  1367 						<input type="checkbox" id="video-details-loop" data-setting="loop" />
       
  1368 						<label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
       
  1369 					</span>
       
  1370 				</span>
       
  1371 
       
  1372 				<span class="setting" data-setting="content">
  1270 					<#
  1373 					<#
  1271 					var content = '';
  1374 					var content = '';
  1272 					if ( ! _.isEmpty( data.model.content ) ) {
  1375 					if ( ! _.isEmpty( data.model.content ) ) {
  1273 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1376 						var tracks = jQuery( data.model.content ).filter( 'track' );
  1274 						_.each( tracks.toArray(), function (track) {
  1377 						_.each( tracks.toArray(), function( track, index ) {
  1275 							content += track.outerHTML; #>
  1378 							content += track.outerHTML; #>
  1276 						<label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
  1379 						<label for="video-details-track-{{ index }}" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
  1277 						<input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
  1380 						<input class="content-track" type="text" id="video-details-track-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" />
  1278 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
  1381 						<span class="description" id="video-details-track-desc-{{ index }}">
       
  1382 						<?php
       
  1383 							printf(
       
  1384 								/* translators: 1: "srclang" HTML attribute, 2: "label" HTML attribute, 3: "kind" HTML attribute. */
       
  1385 								__( 'The %1$s, %2$s, and %3$s values can be edited to set the video track language and kind.' ),
       
  1386 								'srclang',
       
  1387 								'label',
       
  1388 								'kind'
       
  1389 							);
       
  1390 						?>
       
  1391 						</span>
       
  1392 						<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br/>
  1279 						<# } ); #>
  1393 						<# } ); #>
  1280 					<# } else { #>
  1394 					<# } else { #>
  1281 					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
  1395 					<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
  1282 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1396 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1283 					<# } #>
  1397 					<# } #>
  1284 					<textarea class="hidden content-setting">{{ content }}</textarea>
  1398 					<textarea class="hidden content-setting">{{ content }}</textarea>
  1285 				</div>
  1399 				</span>
  1286 			</div>
  1400 			</div>
  1287 		</div>
  1401 		</div>
  1288 	</script>
  1402 	</script>
  1289 
  1403 
       
  1404 	<?php // Template for a Gallery within the editor. ?>
  1290 	<script type="text/html" id="tmpl-editor-gallery">
  1405 	<script type="text/html" id="tmpl-editor-gallery">
  1291 		<# if ( data.attachments.length ) { #>
  1406 		<# if ( data.attachments.length ) { #>
  1292 			<div class="gallery gallery-columns-{{ data.columns }}">
  1407 			<div class="gallery gallery-columns-{{ data.columns }}">
  1293 				<# _.each( data.attachments, function( attachment, index ) { #>
  1408 				<# _.each( data.attachments, function( attachment, index ) { #>
  1294 					<dl class="gallery-item">
  1409 					<dl class="gallery-item">
  1315 				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
  1430 				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
  1316 			</div>
  1431 			</div>
  1317 		<# } #>
  1432 		<# } #>
  1318 	</script>
  1433 	</script>
  1319 
  1434 
       
  1435 	<?php // Template for the Crop area layout, used for example in the Customizer. ?>
  1320 	<script type="text/html" id="tmpl-crop-content">
  1436 	<script type="text/html" id="tmpl-crop-content">
  1321 		<img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
  1437 		<img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
  1322 		<div class="upload-errors"></div>
  1438 		<div class="upload-errors"></div>
  1323 	</script>
  1439 	</script>
  1324 
  1440 
       
  1441 	<?php // Template for the Site Icon preview, used for example in the Customizer. ?>
  1325 	<script type="text/html" id="tmpl-site-icon-preview">
  1442 	<script type="text/html" id="tmpl-site-icon-preview">
  1326 		<h2><?php _e( 'Preview' ); ?></h2>
  1443 		<h2><?php _e( 'Preview' ); ?></h2>
  1327 		<strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
  1444 		<strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
  1328 		<div class="favicon-preview">
  1445 		<div class="favicon-preview">
  1329 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
  1446 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
  1330 
  1447 
  1331 			<div class="favicon">
  1448 			<div class="favicon">
  1332 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
  1449 				<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
  1333 			</div>
  1450 			</div>
  1334 			<span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
  1451 			<span class="browser-title" aria-hidden="true"><# print( '<?php bloginfo( 'name' ); ?>' ) #></span>
  1335 		</div>
  1452 		</div>
  1336 
  1453 
  1337 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
  1454 		<strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
  1338 		<div class="app-icon-preview">
  1455 		<div class="app-icon-preview">
  1339 			<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
  1456 			<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>