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