| [ 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 <label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label> 548 <textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea> 549 </span> 550 <span class="setting" data-setting="description"> 551 <label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label> 552 <textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea> 553 </span> 554 <span class="setting" data-setting="url"> 555 <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label> 556 <input type="text" class="attachment-details-copy-link ltr" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly /> 557 <span class="copy-to-clipboard-container"> 558 <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> 559 <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span> 560 </span> 561 </span> 562 <div class="attachment-compat"></div> 563 </div> 564 565 <div class="actions"> 566 <# if ( data.link ) { #> 567 <?php 568 $view_media_text = ( '1' === get_option( 'wp_attachment_pages_enabled' ) ) ? __( 'View attachment page' ) : __( 'View media file' ); 569 ?> 570 <a class="view-attachment" href="{{ data.link }}"><?php echo $view_media_text; ?></a> 571 <# } #> 572 <# if ( data.can.save ) { #> 573 <# if ( data.link ) { #> 574 <span class="links-separator">|</span> 575 <# } #> 576 <a href="{{ data.editLink }}"><?php _e( 'Edit more details' ); ?></a> 577 <# } #> 578 <# if ( data.can.save && data.link ) { #> 579 <span class="links-separator">|</span> 580 <a href="{{ data.url }}" download><?php _e( 'Download file' ); ?></a> 581 <# } #> 582 <# if ( ! data.uploading && data.can.remove ) { #> 583 <# if ( data.link || data.can.save ) { #> 584 <span class="links-separator">|</span> 585 <# } #> 586 <?php if ( MEDIA_TRASH ) : ?> 587 <# if ( 'trash' === data.status ) { #> 588 <button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button> 589 <# } else { #> 590 <button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button> 591 <# } #> 592 <?php else : ?> 593 <button type="button" class="button-link delete-attachment"><?php _e( 'Delete permanently' ); ?></button> 594 <?php endif; ?> 595 <# } #> 596 </div> 597 </div> 598 </script> 599 600 <?php // Template for the Attachment "thumbnails" in the Media Grid. ?> 601 <script type="text/html" id="tmpl-attachment"> 602 <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}"> 603 <div class="thumbnail"> 604 <# if ( data.uploading ) { #> 605 <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div> 606 <# } else if ( 'image' === data.type && data.size && data.size.url ) { #> 607 <div class="centered"> 608 <img src="{{ data.size.url }}" draggable="false" alt="" /> 609 </div> 610 <# } else { #> 611 <div class="centered"> 612 <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #> 613 <img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" /> 614 <# } else if ( data.sizes ) { 615 if ( data.sizes.medium ) { #> 616 <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" /> 617 <# } else { #> 618 <img src="{{ data.sizes.full.url }}" class="thumbnail" draggable="false" alt="" /> 619 <# } #> 620 <# } else { #> 621 <img src="{{ data.icon }}" class="icon" draggable="false" alt="" /> 622 <# } #> 623 </div> 624 <div class="filename"> 625 <div>{{ data.filename }}</div> 626 </div> 627 <# } #> 628 </div> 629 <# if ( data.buttons.close ) { #> 630 <button type="button" class="button-link attachment-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"> 631 <?php 632 /* translators: Hidden accessibility text. */ 633 _e( 'Remove' ); 634 ?> 635 </span></button> 636 <# } #> 637 </div> 638 <# if ( data.buttons.check ) { #> 639 <button type="button" class="check" tabindex="-1"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"> 640 <?php 641 /* translators: Hidden accessibility text. */ 642 _e( 'Deselect' ); 643 ?> 644 </span></button> 645 <# } #> 646 <# 647 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; 648 if ( data.describe ) { 649 if ( 'image' === data.type ) { #> 650 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption" 651 aria-label="<?php esc_attr_e( 'Caption' ); ?>" 652 placeholder="<?php esc_attr_e( 'Caption…' ); ?>" {{ maybeReadOnly }} /> 653 <# } else { #> 654 <input type="text" value="{{ data.title }}" class="describe" data-setting="title" 655 <# if ( 'video' === data.type ) { #> 656 aria-label="<?php esc_attr_e( 'Video title' ); ?>" 657 placeholder="<?php esc_attr_e( 'Video title…' ); ?>" 658 <# } else if ( 'audio' === data.type ) { #> 659 aria-label="<?php esc_attr_e( 'Audio title' ); ?>" 660 placeholder="<?php esc_attr_e( 'Audio title…' ); ?>" 661 <# } else { #> 662 aria-label="<?php esc_attr_e( 'Media title' ); ?>" 663 placeholder="<?php esc_attr_e( 'Media title…' ); ?>" 664 <# } #> {{ maybeReadOnly }} /> 665 <# } 666 } #> 667 </script> 668 669 <?php // Template for the Attachment details, used for example in the sidebar. ?> 670 <script type="text/html" id="tmpl-attachment-details"> 671 <h2> 672 <?php _e( 'Attachment Details' ); ?> 673 <span class="settings-save-status" role="status"> 674 <span class="spinner"></span> 675 <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span> 676 </span> 677 </h2> 678 <div class="attachment-info"> 679 680 <# if ( 'audio' === data.type ) { #> 681 <div class="wp-media-wrapper wp-audio"> 682 <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none"> 683 <source type="{{ data.mime }}" src="{{ data.url }}" /> 684 </audio> 685 </div> 686 <# } else if ( 'video' === data.type ) { 687 var w_rule = ''; 688 if ( data.width ) { 689 w_rule = 'width: ' + data.width + 'px;'; 690 } else if ( wp.media.view.settings.contentWidth ) { 691 w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;'; 692 } 693 #> 694 <div style="{{ w_rule }}" class="wp-media-wrapper wp-video"> 695 <video controls="controls" class="wp-video-shortcode" preload="metadata" 696 <# if ( data.width ) { #>width="{{ data.width }}"<# } #> 697 <# if ( data.height ) { #>height="{{ data.height }}"<# } #> 698 <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>> 699 <source type="{{ data.mime }}" src="{{ data.url }}" /> 700 </video> 701 </div> 702 <# } else { #> 703 <div class="thumbnail thumbnail-{{ data.type }}"> 704 <# if ( data.uploading ) { #> 705 <div class="media-progress-bar"><div></div></div> 706 <# } else if ( 'image' === data.type && data.size && data.size.url ) { #> 707 <img src="{{ data.size.url }}" draggable="false" alt="" /> 708 <# } else { #> 709 <img src="{{ data.icon }}" class="icon" draggable="false" alt="" /> 710 <# } #> 711 </div> 712 <# } #> 713 714 <div class="details"> 715 <div class="filename">{{ data.filename }}</div> 716 <div class="uploaded">{{ data.dateFormatted }}</div> 717 718 <div class="file-size">{{ data.filesizeHumanReadable }}</div> 719 <# if ( 'image' === data.type && ! data.uploading ) { #> 720 <# if ( data.width && data.height ) { #> 721 <div class="dimensions"> 722 <?php 723 /* translators: 1: A number of pixels wide, 2: A number of pixels tall. */ 724 printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' ); 725 ?> 726 </div> 727 <# } #> 728 729 <# if ( data.originalImageURL && data.originalImageName ) { #> 730 <div class="word-wrap-break-word"> 731 <?php _e( 'Original image:' ); ?> 732 <a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a> 733 </div> 734 <# } #> 735 736 <# if ( data.can.save && data.sizes ) { #> 737 <a class="edit-attachment" href="{{ data.editLink }}&image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a> 738 <# } #> 739 <# } #> 740 741 <# if ( data.fileLength && data.fileLengthHumanReadable ) { #> 742 <div class="file-length"><?php _e( 'Length:' ); ?> 743 <span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span> 744 <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span> 745 </div> 746 <# } #> 747 748 <# if ( data.mediaStates ) { #> 749 <div class="media-states"><strong><?php _e( 'Used as:' ); ?></strong> {{ data.mediaStates }}</div> 750 <# } #> 751 752 <# if ( ! data.uploading && data.can.remove ) { #> 753 <?php if ( MEDIA_TRASH ) : ?> 754 <# if ( 'trash' === data.status ) { #> 755 <button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button> 756 <# } else { #> 757 <button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button> 758 <# } #> 759 <?php else : ?> 760 <button type="button" class="button-link delete-attachment"><?php _e( 'Delete permanently' ); ?></button> 761 <?php endif; ?> 762 <# } #> 763 764 <div class="compat-meta"> 765 <# if ( data.compat && data.compat.meta ) { #> 766 {{{ data.compat.meta }}} 767 <# } #> 768 </div> 769 </div> 770 </div> 771 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> 772 <# if ( 'image' === data.type ) { #> 773 <span class="setting alt-text has-description" data-setting="alt"> 774 <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label> 775 <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea> 776 </span> 777 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 778 <# } #> 779 <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?> 780 <span class="setting" data-setting="title"> 781 <label for="attachment-details-title" class="name"><?php _e( 'Title' ); ?></label> 782 <input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} /> 783 </span> 784 <?php endif; ?> 785 <# if ( 'audio' === data.type ) { #> 786 <?php 787 foreach ( array( 788 'artist' => __( 'Artist' ), 789 'album' => __( 'Album' ), 790 ) as $key => $label ) : 791 ?> 792 <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>"> 793 <label for="attachment-details-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label> 794 <input type="text" id="attachment-details-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" /> 795 </span> 796 <?php endforeach; ?> 797 <# } #> 798 <span class="setting" data-setting="caption"> 799 <label for="attachment-details-caption" class="name"><?php _e( 'Caption' ); ?></label> 800 <textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea> 801 </span> 802 <span class="setting" data-setting="description"> 803 <label for="attachment-details-description" class="name"><?php _e( 'Description' ); ?></label> 804 <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea> 805 </span> 806 <span class="setting" data-setting="url"> 807 <label for="attachment-details-copy-link" class="name"><?php _e( 'File URL:' ); ?></label> 808 <input type="text" class="attachment-details-copy-link ltr" id="attachment-details-copy-link" value="{{ data.url }}" readonly /> 809 <div class="copy-to-clipboard-container"> 810 <button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link"><?php _e( 'Copy URL to clipboard' ); ?></button> 811 <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span> 812 </div> 813 </span> 814 </script> 815 816 <?php // Template for the Selection status bar. ?> 817 <script type="text/html" id="tmpl-media-selection"> 818 <div class="selection-info"> 819 <span class="count"></span> 820 <# if ( data.editable ) { #> 821 <button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button> 822 <# } #> 823 <# if ( data.clearable ) { #> 824 <button type="button" class="button-link clear-selection"><?php _e( 'Clear' ); ?></button> 825 <# } #> 826 </div> 827 <div class="selection-view"></div> 828 </script> 829 830 <?php // Template for the Attachment display settings, used for example in the sidebar. ?> 831 <script type="text/html" id="tmpl-attachment-display-settings"> 832 <h2><?php _e( 'Attachment Display Settings' ); ?></h2> 833 834 <# if ( 'image' === data.type ) { #> 835 <span class="setting align"> 836 <label for="attachment-display-settings-alignment" class="name"><?php _e( 'Alignment' ); ?></label> 837 <select id="attachment-display-settings-alignment" class="alignment" 838 data-setting="align" 839 <# if ( data.userSettings ) { #> 840 data-user-setting="align" 841 <# } #>> 842 843 <option value="left"> 844 <?php esc_html_e( 'Left' ); ?> 845 </option> 846 <option value="center"> 847 <?php esc_html_e( 'Center' ); ?> 848 </option> 849 <option value="right"> 850 <?php esc_html_e( 'Right' ); ?> 851 </option> 852 <option value="none" selected> 853 <?php echo esc_html_x( 'None', 'Alignment option' ); ?> 854 </option> 855 </select> 856 </span> 857 <# } #> 858 859 <span class="setting"> 860 <label for="attachment-display-settings-link-to" class="name"> 861 <# if ( data.model.canEmbed ) { #> 862 <?php _e( 'Embed or Link' ); ?> 863 <# } else { #> 864 <?php _e( 'Link To' ); ?> 865 <# } #> 866 </label> 867 <select id="attachment-display-settings-link-to" class="link-to" 868 data-setting="link" 869 <# if ( data.userSettings && ! data.model.canEmbed ) { #> 870 data-user-setting="urlbutton" 871 <# } #>> 872 873 <# if ( data.model.canEmbed ) { #> 874 <option value="embed" selected> 875 <?php esc_html_e( 'Embed Media Player' ); ?> 876 </option> 877 <option value="file"> 878 <# } else { #> 879 <option value="none" selected> 880 <?php echo esc_html_x( 'None', 'Media item link option' ); ?> 881 </option> 882 <option value="file"> 883 <# } #> 884 <# if ( data.model.canEmbed ) { #> 885 <?php esc_html_e( 'Link to Media File' ); ?> 886 <# } else { #> 887 <?php esc_html_e( 'Media File' ); ?> 888 <# } #> 889 </option> 890 <option value="post"> 891 <# if ( data.model.canEmbed ) { #> 892 <?php esc_html_e( 'Link to Attachment Page' ); ?> 893 <# } else { #> 894 <?php esc_html_e( 'Attachment Page' ); ?> 895 <# } #> 896 </option> 897 <# if ( 'image' === data.type ) { #> 898 <option value="custom"> 899 <?php esc_html_e( 'Custom URL' ); ?> 900 </option> 901 <# } #> 902 </select> 903 </span> 904 <span class="setting"> 905 <label for="attachment-display-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label> 906 <input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" /> 907 </span> 908 909 <# if ( 'undefined' !== typeof data.sizes ) { #> 910 <span class="setting"> 911 <label for="attachment-display-settings-size" class="name"><?php _e( 'Size' ); ?></label> 912 <select id="attachment-display-settings-size" class="size" name="size" 913 data-setting="size" 914 <# if ( data.userSettings ) { #> 915 data-user-setting="imgsize" 916 <# } #>> 917 <?php 918 /** This filter is documented in wp-admin/includes/media.php */ 919 $sizes = apply_filters( 920 'image_size_names_choose', 921 array( 922 'thumbnail' => __( 'Thumbnail' ), 923 'medium' => __( 'Medium' ), 924 'large' => __( 'Large' ), 925 'full' => __( 'Full Size' ), 926 ) 927 ); 928 929 foreach ( $sizes as $value => $name ) : 930 ?> 931 <# 932 var size = data.sizes['<?php echo esc_js( $value ); ?>']; 933 if ( size ) { #> 934 <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>> 935 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }} 936 </option> 937 <# } #> 938 <?php endforeach; ?> 939 </select> 940 </span> 941 <# } #> 942 </script> 943 944 <?php // Template for the Gallery settings, used for example in the sidebar. ?> 945 <script type="text/html" id="tmpl-gallery-settings"> 946 <h2><?php _e( 'Gallery Settings' ); ?></h2> 947 948 <span class="setting"> 949 <label for="gallery-settings-link-to" class="name"><?php _e( 'Link To' ); ?></label> 950 <select id="gallery-settings-link-to" class="link-to" 951 data-setting="link" 952 <# if ( data.userSettings ) { #> 953 data-user-setting="urlbutton" 954 <# } #>> 955 956 <option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' === wp.media.galleryDefaults.link ) { 957 #>selected="selected"<# } 958 #>> 959 <?php esc_html_e( 'Attachment Page' ); ?> 960 </option> 961 <option value="file" <# if ( 'file' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>> 962 <?php esc_html_e( 'Media File' ); ?> 963 </option> 964 <option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>> 965 <?php echo esc_html_x( 'None', 'Media item link option' ); ?> 966 </option> 967 </select> 968 </span> 969 970 <span class="setting"> 971 <label for="gallery-settings-columns" class="name select-label-inline"><?php _e( 'Columns' ); ?></label> 972 <select id="gallery-settings-columns" class="columns" name="columns" 973 data-setting="columns"> 974 <?php for ( $i = 1; $i <= 9; $i++ ) : ?> 975 <option value="<?php echo esc_attr( $i ); ?>" <# 976 if ( <?php echo $i; ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# } 977 #>> 978 <?php echo esc_html( $i ); ?> 979 </option> 980 <?php endfor; ?> 981 </select> 982 </span> 983 984 <span class="setting"> 985 <input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" /> 986 <label for="gallery-settings-random-order" class="checkbox-label-inline"><?php _e( 'Random Order' ); ?></label> 987 </span> 988 989 <span class="setting size"> 990 <label for="gallery-settings-size" class="name"><?php _e( 'Size' ); ?></label> 991 <select id="gallery-settings-size" class="size" name="size" 992 data-setting="size" 993 <# if ( data.userSettings ) { #> 994 data-user-setting="imgsize" 995 <# } #> 996 > 997 <?php 998 /** This filter is documented in wp-admin/includes/media.php */ 999 $size_names = apply_filters( 1000 'image_size_names_choose', 1001 array( 1002 'thumbnail' => __( 'Thumbnail' ), 1003 'medium' => __( 'Medium' ), 1004 'large' => __( 'Large' ), 1005 'full' => __( 'Full Size' ), 1006 ) 1007 ); 1008 1009 foreach ( $size_names as $size => $label ) : 1010 ?> 1011 <option value="<?php echo esc_attr( $size ); ?>"> 1012 <?php echo esc_html( $label ); ?> 1013 </option> 1014 <?php endforeach; ?> 1015 </select> 1016 </span> 1017 </script> 1018 1019 <?php // Template for the Playlists settings, used for example in the sidebar. ?> 1020 <script type="text/html" id="tmpl-playlist-settings"> 1021 <h2><?php _e( 'Playlist Settings' ); ?></h2> 1022 1023 <# var emptyModel = _.isEmpty( data.model ), 1024 isVideo = 'video' === data.controller.get('library').props.get('type'); #> 1025 1026 <span class="setting"> 1027 <input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #> 1028 checked="checked" 1029 <# } #> /> 1030 <label for="playlist-settings-show-list" class="checkbox-label-inline"> 1031 <# if ( isVideo ) { #> 1032 <?php _e( 'Show Video List' ); ?> 1033 <# } else { #> 1034 <?php _e( 'Show Tracklist' ); ?> 1035 <# } #> 1036 </label> 1037 </span> 1038 1039 <# if ( ! isVideo ) { #> 1040 <span class="setting"> 1041 <input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #> 1042 checked="checked" 1043 <# } #> /> 1044 <label for="playlist-settings-show-artist" class="checkbox-label-inline"> 1045 <?php _e( 'Show Artist Name in Tracklist' ); ?> 1046 </label> 1047 </span> 1048 <# } #> 1049 1050 <span class="setting"> 1051 <input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #> 1052 checked="checked" 1053 <# } #> /> 1054 <label for="playlist-settings-show-images" class="checkbox-label-inline"> 1055 <?php _e( 'Show Images' ); ?> 1056 </label> 1057 </span> 1058 </script> 1059 1060 <?php // Template for the "Insert from URL" layout. ?> 1061 <script type="text/html" id="tmpl-embed-link-settings"> 1062 <span class="setting link-text"> 1063 <label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label> 1064 <input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" /> 1065 </span> 1066 <div class="embed-container" style="display: none;"> 1067 <div class="embed-preview"></div> 1068 </div> 1069 </script> 1070 1071 <?php // Template for the "Insert from URL" image preview and details. ?> 1072 <script type="text/html" id="tmpl-embed-image-settings"> 1073 <div class="wp-clearfix"> 1074 <div class="thumbnail"> 1075 <img src="{{ data.model.url }}" draggable="false" alt="" /> 1076 </div> 1077 </div> 1078 1079 <span class="setting alt-text has-description"> 1080 <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label> 1081 <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea> 1082 </span> 1083 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 1084 1085 <?php 1086 /** This filter is documented in wp-admin/includes/media.php */ 1087 if ( ! apply_filters( 'disable_captions', '' ) ) : 1088 ?> 1089 <span class="setting caption"> 1090 <label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label> 1091 <textarea id="embed-image-settings-caption" data-setting="caption"></textarea> 1092 </span> 1093 <?php endif; ?> 1094 1095 <fieldset class="setting-group"> 1096 <legend class="name"><?php _e( 'Align' ); ?></legend> 1097 <span class="setting align"> 1098 <span class="button-group button-large" data-setting="align"> 1099 <button class="button" value="left"> 1100 <?php esc_html_e( 'Left' ); ?> 1101 </button> 1102 <button class="button" value="center"> 1103 <?php esc_html_e( 'Center' ); ?> 1104 </button> 1105 <button class="button" value="right"> 1106 <?php esc_html_e( 'Right' ); ?> 1107 </button> 1108 <button class="button active" value="none"> 1109 <?php echo esc_html_x( 'None', 'Alignment option' ); ?> 1110 </button> 1111 </span> 1112 </span> 1113 </fieldset> 1114 1115 <fieldset class="setting-group"> 1116 <legend class="name"><?php _e( 'Link To' ); ?></legend> 1117 <span class="setting link-to"> 1118 <span class="button-group button-large" data-setting="link"> 1119 <button class="button" value="file"> 1120 <?php esc_html_e( 'Image URL' ); ?> 1121 </button> 1122 <button class="button" value="custom"> 1123 <?php esc_html_e( 'Custom URL' ); ?> 1124 </button> 1125 <button class="button active" value="none"> 1126 <?php echo esc_html_x( 'None', 'Media item link option' ); ?> 1127 </button> 1128 </span> 1129 </span> 1130 <span class="setting"> 1131 <label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label> 1132 <input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" /> 1133 </span> 1134 </fieldset> 1135 </script> 1136 1137 <?php // Template for the Image details, used for example in the editor. ?> 1138 <script type="text/html" id="tmpl-image-details"> 1139 <div class="media-embed"> 1140 <div class="embed-media-settings"> 1141 <div class="column-settings"> 1142 <span class="setting alt-text has-description"> 1143 <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label> 1144 <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea> 1145 </span> 1146 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 1147 1148 <?php 1149 /** This filter is documented in wp-admin/includes/media.php */ 1150 if ( ! apply_filters( 'disable_captions', '' ) ) : 1151 ?> 1152 <span class="setting caption"> 1153 <label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label> 1154 <textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea> 1155 </span> 1156 <?php endif; ?> 1157 1158 <h2><?php _e( 'Display Settings' ); ?></h2> 1159 <fieldset class="setting-group"> 1160 <legend class="legend-inline"><?php _e( 'Align' ); ?></legend> 1161 <span class="setting align"> 1162 <span class="button-group button-large" data-setting="align"> 1163 <button class="button" value="left"> 1164 <?php esc_html_e( 'Left' ); ?> 1165 </button> 1166 <button class="button" value="center"> 1167 <?php esc_html_e( 'Center' ); ?> 1168 </button> 1169 <button class="button" value="right"> 1170 <?php esc_html_e( 'Right' ); ?> 1171 </button> 1172 <button class="button active" value="none"> 1173 <?php echo esc_html_x( 'None', 'Alignment option' ); ?> 1174 </button> 1175 </span> 1176 </span> 1177 </fieldset> 1178 1179 <# if ( data.attachment ) { #> 1180 <# if ( 'undefined' !== typeof data.attachment.sizes ) { #> 1181 <span class="setting size"> 1182 <label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label> 1183 <select id="image-details-size" class="size" name="size" 1184 data-setting="size" 1185 <# if ( data.userSettings ) { #> 1186 data-user-setting="imgsize" 1187 <# } #>> 1188 <?php 1189 /** This filter is documented in wp-admin/includes/media.php */ 1190 $sizes = apply_filters( 1191 'image_size_names_choose', 1192 array( 1193 'thumbnail' => __( 'Thumbnail' ), 1194 'medium' => __( 'Medium' ), 1195 'large' => __( 'Large' ), 1196 'full' => __( 'Full Size' ), 1197 ) 1198 ); 1199 1200 foreach ( $sizes as $value => $name ) : 1201 ?> 1202 <# 1203 var size = data.sizes['<?php echo esc_js( $value ); ?>']; 1204 if ( size ) { #> 1205 <option value="<?php echo esc_attr( $value ); ?>"> 1206 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }} 1207 </option> 1208 <# } #> 1209 <?php endforeach; ?> 1210 <option value="<?php echo esc_attr( 'custom' ); ?>"> 1211 <?php _e( 'Custom Size' ); ?> 1212 </option> 1213 </select> 1214 </span> 1215 <# } #> 1216 <div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>"> 1217 <span class="custom-size-setting"> 1218 <label for="image-details-size-width"><?php _e( 'Width' ); ?></label> 1219 <input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" /> 1220 </span> 1221 <span class="sep" aria-hidden="true">×</span> 1222 <span class="custom-size-setting"> 1223 <label for="image-details-size-height"><?php _e( 'Height' ); ?></label> 1224 <input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" /> 1225 </span> 1226 <p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p> 1227 </div> 1228 <# } #> 1229 1230 <span class="setting link-to"> 1231 <label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label> 1232 <select id="image-details-link-to" data-setting="link"> 1233 <# if ( data.attachment ) { #> 1234 <option value="file"> 1235 <?php esc_html_e( 'Media File' ); ?> 1236 </option> 1237 <option value="post"> 1238 <?php esc_html_e( 'Attachment Page' ); ?> 1239 </option> 1240 <# } else { #> 1241 <option value="file"> 1242 <?php esc_html_e( 'Image URL' ); ?> 1243 </option> 1244 <# } #> 1245 <option value="custom"> 1246 <?php esc_html_e( 'Custom URL' ); ?> 1247 </option> 1248 <option value="none"> 1249 <?php echo esc_html_x( 'None', 'Media item link option' ); ?> 1250 </option> 1251 </select> 1252 </span> 1253 <span class="setting"> 1254 <label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label> 1255 <input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" /> 1256 </span> 1257 1258 <div class="advanced-section"> 1259 <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2> 1260 <div class="advanced-settings hidden"> 1261 <div class="advanced-image"> 1262 <span class="setting title-text"> 1263 <label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label> 1264 <input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" /> 1265 </span> 1266 <span class="setting extra-classes"> 1267 <label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label> 1268 <input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" /> 1269 </span> 1270 </div> 1271 <div class="advanced-link"> 1272 <span class="setting link-target"> 1273 <input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>> 1274 <label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label> 1275 </span> 1276 <span class="setting link-rel"> 1277 <label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label> 1278 <input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" /> 1279 </span> 1280 <span class="setting link-class-name"> 1281 <label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label> 1282 <input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" /> 1283 </span> 1284 </div> 1285 </div> 1286 </div> 1287 </div> 1288 <div class="column-image"> 1289 <div class="image"> 1290 <img src="{{ data.model.url }}" draggable="false" alt="" /> 1291 <# if ( data.attachment && window.imageEdit ) { #> 1292 <div class="actions"> 1293 <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" /> 1294 <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" /> 1295 </div> 1296 <# } #> 1297 </div> 1298 </div> 1299 </div> 1300 </div> 1301 </script> 1302 1303 <?php // Template for the Image Editor layout. ?> 1304 <script type="text/html" id="tmpl-image-editor"> 1305 <div id="media-head-{{ data.id }}"></div> 1306 <div id="image-editor-{{ data.id }}"></div> 1307 </script> 1308 1309 <?php // Template for an embedded Audio details. ?> 1310 <script type="text/html" id="tmpl-audio-details"> 1311 <# var ext, html5types = { 1312 mp3: wp.media.view.settings.embedMimes.mp3, 1313 ogg: wp.media.view.settings.embedMimes.ogg 1314 }; #> 1315 1316 <?php $audio_types = wp_get_audio_extensions(); ?> 1317 <div class="media-embed media-embed-details"> 1318 <div class="embed-media-settings embed-audio-settings"> 1319 <?php wp_underscore_audio_template(); ?> 1320 1321 <# if ( ! _.isEmpty( data.model.src ) ) { 1322 ext = data.model.src.split('.').pop(); 1323 if ( html5types[ ext ] ) { 1324 delete html5types[ ext ]; 1325 } 1326 #> 1327 <span class="setting"> 1328 <label for="audio-details-source" class="name"><?php _e( 'URL' ); ?></label> 1329 <input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" /> 1330 <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button> 1331 </span> 1332 <# } #> 1333 <?php 1334 1335 foreach ( $audio_types as $type ) : 1336 ?> 1337 <# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) { 1338 if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) { 1339 delete html5types.<?php echo $type; ?>; 1340 } 1341 #> 1342 <span class="setting"> 1343 <label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label> 1344 <input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" /> 1345 <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button> 1346 </span> 1347 <# } #> 1348 <?php endforeach; ?> 1349 1350 <# if ( ! _.isEmpty( html5types ) ) { #> 1351 <fieldset class="setting-group"> 1352 <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend> 1353 <span class="setting"> 1354 <span class="button-large"> 1355 <# _.each( html5types, function (mime, type) { #> 1356 <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button> 1357 <# } ) #> 1358 </span> 1359 </span> 1360 </fieldset> 1361 <# } #> 1362 1363 <fieldset class="setting-group"> 1364 <legend class="name"><?php _e( 'Preload' ); ?></legend> 1365 <span class="setting preload"> 1366 <span class="button-group button-large" data-setting="preload"> 1367 <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button> 1368 <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button> 1369 <button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button> 1370 </span> 1371 </span> 1372 </fieldset> 1373 1374 <span class="setting-group"> 1375 <span class="setting checkbox-setting autoplay"> 1376 <input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" /> 1377 <label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label> 1378 </span> 1379 1380 <span class="setting checkbox-setting"> 1381 <input type="checkbox" id="audio-details-loop" data-setting="loop" /> 1382 <label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label> 1383 </span> 1384 </span> 1385 </div> 1386 </div> 1387 </script> 1388 1389 <?php // Template for an embedded Video details. ?> 1390 <script type="text/html" id="tmpl-video-details"> 1391 <# var ext, html5types = { 1392 mp4: wp.media.view.settings.embedMimes.mp4, 1393 ogv: wp.media.view.settings.embedMimes.ogv, 1394 webm: wp.media.view.settings.embedMimes.webm 1395 }; #> 1396 1397 <?php $video_types = wp_get_video_extensions(); ?> 1398 <div class="media-embed media-embed-details"> 1399 <div class="embed-media-settings embed-video-settings"> 1400 <div class="wp-video-holder"> 1401 <# 1402 var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width, 1403 h = ! data.model.height ? 360 : data.model.height; 1404 1405 if ( data.model.width && w !== data.model.width ) { 1406 h = Math.ceil( ( h * w ) / data.model.width ); 1407 } 1408 #> 1409 1410 <?php wp_underscore_video_template(); ?> 1411 1412 <# if ( ! _.isEmpty( data.model.src ) ) { 1413 ext = data.model.src.split('.').pop(); 1414 if ( html5types[ ext ] ) { 1415 delete html5types[ ext ]; 1416 } 1417 #> 1418 <span class="setting"> 1419 <label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label> 1420 <input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" /> 1421 <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button> 1422 </span> 1423 <# } #> 1424 <?php 1425 foreach ( $video_types as $type ) : 1426 ?> 1427 <# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) { 1428 if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) { 1429 delete html5types.<?php echo $type; ?>; 1430 } 1431 #> 1432 <span class="setting"> 1433 <label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label> 1434 <input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" /> 1435 <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button> 1436 </span> 1437 <# } #> 1438 <?php endforeach; ?> 1439 </div> 1440 1441 <# if ( ! _.isEmpty( html5types ) ) { #> 1442 <fieldset class="setting-group"> 1443 <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend> 1444 <span class="setting"> 1445 <span class="button-large"> 1446 <# _.each( html5types, function (mime, type) { #> 1447 <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button> 1448 <# } ) #> 1449 </span> 1450 </span> 1451 </fieldset> 1452 <# } #> 1453 1454 <# if ( ! _.isEmpty( data.model.poster ) ) { #> 1455 <span class="setting"> 1456 <label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label> 1457 <input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" /> 1458 <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button> 1459 </span> 1460 <# } #> 1461 1462 <fieldset class="setting-group"> 1463 <legend class="name"><?php _e( 'Preload' ); ?></legend> 1464 <span class="setting preload"> 1465 <span class="button-group button-large" data-setting="preload"> 1466 <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button> 1467 <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button> 1468 <button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button> 1469 </span> 1470 </span> 1471 </fieldset> 1472 1473 <span class="setting-group"> 1474 <span class="setting checkbox-setting autoplay"> 1475 <input type="checkbox" id="video-details-autoplay" data-setting="autoplay" /> 1476 <label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label> 1477 </span> 1478 1479 <span class="setting checkbox-setting"> 1480 <input type="checkbox" id="video-details-loop" data-setting="loop" /> 1481 <label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label> 1482 </span> 1483 </span> 1484 1485 <span class="setting" data-setting="content"> 1486 <# 1487 var content = ''; 1488 if ( ! _.isEmpty( data.model.content ) ) { 1489 var tracks = jQuery( data.model.content ).filter( 'track' ); 1490 _.each( tracks.toArray(), function( track, index ) { 1491 content += track.outerHTML; #> 1492 <label for="video-details-track-{{ index }}" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label> 1493 <input class="content-track" type="text" id="video-details-track-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" /> 1494 <span class="description" id="video-details-track-desc-{{ index }}"> 1495 <?php 1496 printf( 1497 /* translators: 1: "srclang" HTML attribute, 2: "label" HTML attribute, 3: "kind" HTML attribute. */ 1498 __( 'The %1$s, %2$s, and %3$s values can be edited to set the video track language and kind.' ), 1499 'srclang', 1500 'label', 1501 'kind' 1502 ); 1503 ?> 1504 </span> 1505 <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br /> 1506 <# } ); #> 1507 <# } else { #> 1508 <span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br /> 1509 <em><?php _e( 'There are no associated subtitles.' ); ?></em> 1510 <# } #> 1511 <textarea class="hidden content-setting">{{ content }}</textarea> 1512 </span> 1513 </div> 1514 </div> 1515 </script> 1516 1517 <?php // Template for a Gallery within the editor. ?> 1518 <script type="text/html" id="tmpl-editor-gallery"> 1519 <# if ( data.attachments.length ) { #> 1520 <div class="gallery gallery-columns-{{ data.columns }}"> 1521 <# _.each( data.attachments, function( attachment, index ) { #> 1522 <dl class="gallery-item"> 1523 <dt class="gallery-icon"> 1524 <# if ( attachment.thumbnail ) { #> 1525 <img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="{{ attachment.alt }}" /> 1526 <# } else { #> 1527 <img src="{{ attachment.url }}" alt="{{ attachment.alt }}" /> 1528 <# } #> 1529 </dt> 1530 <# if ( attachment.caption ) { #> 1531 <dd class="wp-caption-text gallery-caption"> 1532 {{{ data.verifyHTML( attachment.caption ) }}} 1533 </dd> 1534 <# } #> 1535 </dl> 1536 <# if ( index % data.columns === data.columns - 1 ) { #> 1537 <br style="clear: both;" /> 1538 <# } #> 1539 <# } ); #> 1540 </div> 1541 <# } else { #> 1542 <div class="wpview-error"> 1543 <div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p> 1544 </div> 1545 <# } #> 1546 </script> 1547 1548 <?php // Template for the Crop area layout, used for example in the Customizer. ?> 1549 <script type="text/html" id="tmpl-crop-content"> 1550 <img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>" /> 1551 <div class="upload-errors"></div> 1552 </script> 1553 1554 <?php // Template for the Site Icon preview, used for example in the Customizer. ?> 1555 <script type="text/html" id="tmpl-site-icon-preview-crop"> 1556 <style> 1557 :root{ 1558 --site-icon-url: url( "{{ data.url }}" ); 1559 } 1560 </style> 1561 <h2><?php _ex( 'Site Icon Preview', 'noun' ); ?></h2> 1562 <p><?php _e( 'As an app icon and a browser icon.' ); ?></p> 1563 <div class="site-icon-preview crop"> 1564 <div class="image-preview-wrap app-icon-preview"> 1565 <img id="preview-app-icon" src="{{ data.url }}" class="app-icon-preview" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>" /> 1566 </div> 1567 <div class="site-icon-preview-browser"> 1568 <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> 1569 <div class="site-icon-preview-tab"> 1570 <div class="image-preview-wrap browser"> 1571 <img id="preview-favicon" src="{{ data.url }}" class="browser-icon-preview" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>" /> 1572 </div> 1573 <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></div> 1574 <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button"> 1575 <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" /> 1576 </svg> 1577 </div> 1578 </div> 1579 </div> 1580 </div> 1581 </script> 1582 1583 <?php 1584 1585 /** 1586 * Fires when the custom Backbone media templates are printed. 1587 * 1588 * @since 3.5.0 1589 */ 1590 do_action( 'print_media_templates' ); 1591 1592 if ( $is_cross_origin_isolation_enabled ) { 1593 $html = (string) ob_get_clean(); 1594 1595 /* 1596 * The media templates are inside <script type="text/html"> tags, 1597 * whose content is treated as raw text by the HTML Tag Processor. 1598 * Extract each script block's content, process it separately, 1599 * then reassemble the full output. 1600 */ 1601 $script_processor = new WP_HTML_Tag_Processor( $html ); 1602 while ( $script_processor->next_tag( 'SCRIPT' ) ) { 1603 if ( 'text/html' !== $script_processor->get_attribute( 'type' ) ) { 1604 continue; 1605 } 1606 /* 1607 * Unlike wp_add_crossorigin_attributes(), this does not check whether 1608 * URLs are actually cross-origin. Media templates use Underscore.js 1609 * template expressions (e.g. {{ data.url }}) as placeholder URLs, 1610 * so actual URLs are not available at parse time. 1611 * The crossorigin attribute is added unconditionally to all relevant 1612 * media tags to ensure cross-origin isolation works regardless of 1613 * the final URL value at render time. 1614 */ 1615 $template_processor = new WP_HTML_Tag_Processor( $script_processor->get_modifiable_text() ); 1616 while ( $template_processor->next_tag() ) { 1617 if ( 1618 in_array( $template_processor->get_tag(), array( 'AUDIO', 'IMG', 'VIDEO' ), true ) 1619 && ! is_string( $template_processor->get_attribute( 'crossorigin' ) ) 1620 ) { 1621 $template_processor->set_attribute( 'crossorigin', 'anonymous' ); 1622 } 1623 } 1624 $script_processor->set_modifiable_text( $template_processor->get_updated_html() ); 1625 } 1626 1627 echo $script_processor->get_updated_html(); 1628 } 1629 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Thu Jun 25 08:20:12 2026 | Cross-referenced by PHPXref |