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