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