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