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