wp-includes/media-template.php

   1 <?php
   2 /**
   3  * WordPress media templates.
   4  *
   5  * @package WordPress
   6  * @subpackage Media
   7  * @since 3.5.0
   8  */
   9
  10 /**
  11  * Output the markup for a 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 controls
  20         class="wp-audio-shortcode"
  21         width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
  22         preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
  23         <#
  24         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
  25         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
  26                 #> <?php echo $attr ?><#
  27         }
  28         <?php endforeach ?>#>
  29 >
  30         <# if ( ! _.isEmpty( data.model.src ) ) { #>
  31         <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
  32         <# } #>
  33
  34         <?php foreach ( $audio_types as $type ):
  35         ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
  36         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
  37         <# } #>
  38         <?php endforeach;
  39 ?></audio>
  40 <?php
  41 }
  42
  43 /**
  44  * Output the markup for a video tag to be used in an Underscore template
  45  * when data.model is passed.
  46  *
  47  * @since 3.9.0
  48  */
  49 function wp_underscore_video_template() {
  50         $video_types = wp_get_video_extensions();
  51 ?>
  52 <#  var w, h, settings = wp.media.view.settings,
  53                 isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
  54
  55         if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
  56                 w = settings.contentWidth;
  57         } else {
  58                 w = data.model.width;
  59         }
  60
  61         if ( w !== data.model.width ) {
  62                 h = Math.ceil( ( h * w ) / data.model.width );
  63         } else {
  64                 h = data.model.height;
  65         }
  66 #>
  67 <div style="max-width: 100%; width: {{ w }}px">
  68 <video controls
  69         class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
  70         width="{{ w }}"
  71         height="{{ h }}"
  72         <?php
  73         $props = array( 'poster' => '', 'preload' => 'metadata' );
  74         foreach ( $props as $key => $value ):
  75                 if ( empty( $value ) ) {
  76                 ?><#
  77                 if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
  78                         #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
  79                 } #>
  80                 <?php } else {
  81                         echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
  82                 }
  83         endforeach;
  84         ?><#
  85         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
  86         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
  87                 #> <?php echo $attr ?><#
  88         }
  89         <?php endforeach ?>#>
  90 >
  91         <# if ( ! _.isEmpty( data.model.src ) ) {
  92                 if ( isYouTube ) { #>
  93                 <source src="{{ data.model.src }}" type="video/youtube" />
  94                 <# } else { #>
  95                 <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
  96                 <# }
  97         } #>
  98
  99         <?php foreach ( $video_types as $type ):
 100         ?><# if ( data.model.<?php echo $type ?> ) { #>
 101         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
 102         <# } #>
 103         <?php endforeach; ?>
 104         {{{ data.model.content }}}
 105 </video>
 106 </div>
 107 <?php
 108 }
 109
 110 /**
 111  * Prints the templates used in the media manager.
 112  *
 113  * @since 3.5.0
 114  */
 115 function wp_print_media_templates() {
 116         global $is_IE;
 117         $class = 'media-modal wp-core-ui';
 118         if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
 119                 $class .= ' ie7';
 120         ?>
 121         <script type="text/html" id="tmpl-media-frame">
 122                 <div class="media-frame-menu"></div>
 123                 <div class="media-frame-title"></div>
 124                 <div class="media-frame-router"></div>
 125                 <div class="media-frame-content"></div>
 126                 <div class="media-frame-toolbar"></div>
 127                 <div class="media-frame-uploader"></div>
 128         </script>
 129
 130         <script type="text/html" id="tmpl-media-modal">
 131                 <div class="<?php echo $class; ?>">
 132                         <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a>
 133                         <div class="media-modal-content"></div>
 134                 </div>
 135                 <div class="media-modal-backdrop"></div>
 136         </script>
 137
 138         <script type="text/html" id="tmpl-uploader-window">
 139                 <div class="uploader-window-content">
 140                         <h3><?php _e( 'Drop files to upload' ); ?></h3>
 141                 </div>
 142         </script>
 143
 144         <script type="text/html" id="tmpl-uploader-editor">
 145                 <div class="uploader-editor-content">
 146                         <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
 147                 </div>
 148         </script>
 149
 150         <script type="text/html" id="tmpl-uploader-inline">
 151                 <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
 152                 <div class="uploader-inline-content {{ messageClass }}">
 153                 <# if ( data.message ) { #>
 154                         <h3 class="upload-message">{{ data.message }}</h3>
 155                 <# } #>
 156                 <?php if ( ! _device_can_upload() ) : ?>
 157                         <h3 class="upload-instructions"><?php printf( __('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.'), 'https://wordpress.org/mobile/' ); ?></h3>
 158                 <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
 159                         <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
 160                         <?php
 161                         /** This action is documented in wp-admin/includes/media.php */
 162                         do_action( 'upload_ui_over_quota' ); ?>
 163
 164                 <?php else : ?>
 165                         <div class="upload-ui">
 166                                 <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
 167                                 <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
 168                         </div>
 169
 170                         <div class="upload-inline-status"></div>
 171
 172                         <div class="post-upload-ui">
 173                                 <?php
 174                                 /** This action is documented in wp-admin/includes/media.php */
 175                                 do_action( 'pre-upload-ui' );
 176                                 /** This action is documented in wp-admin/includes/media.php */
 177                                 do_action( 'pre-plupload-upload-ui' );
 178
 179                                 if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
 180                                         /** This action is documented in wp-admin/includes/media.php */
 181                                         do_action( 'post-plupload-upload-ui' );
 182                                         add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
 183                                 } else {
 184                                         /** This action is documented in wp-admin/includes/media.php */
 185                                         do_action( 'post-plupload-upload-ui' );
 186                                 }
 187
 188                                 $upload_size_unit = $max_upload_size = wp_max_upload_size();
 189                                 $byte_sizes = array( 'KB', 'MB', 'GB' );
 190
 191                                 for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
 192                                         $upload_size_unit /= 1024;
 193                                 }
 194
 195                                 if ( $u < 0 ) {
 196                                         $upload_size_unit = 0;
 197                                         $u = 0;
 198                                 } else {
 199                                         $upload_size_unit = (int) $upload_size_unit;
 200                                 }
 201
 202                                 ?>
 203
 204                                 <p class="max-upload-size"><?php
 205                                         printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
 206                                 ?></p>
 207
 208                                 <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
 209                                         <p class="suggested-dimensions">
 210                                                 <?php _e( 'Suggested image dimensions:' ); ?> {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
 211                                         </p>
 212                                 <# } #>
 213
 214                                 <?php
 215                                 /** This action is documented in wp-admin/includes/media.php */
 216                                 do_action( 'post-upload-ui' ); ?>
 217                         </div>
 218                 <?php endif; ?>
 219                 </div>
 220         </script>
 221
 222         <script type="text/html" id="tmpl-uploader-status">
 223                 <h3><?php _e( 'Uploading' ); ?></h3>
 224                 <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
 225
 226                 <div class="media-progress-bar"><div></div></div>
 227                 <div class="upload-details">
 228                         <span class="upload-count">
 229                                 <span class="upload-index"></span> / <span class="upload-total"></span>
 230                         </span>
 231                         <span class="upload-detail-separator">&ndash;</span>
 232                         <span class="upload-filename"></span>
 233                 </div>
 234                 <div class="upload-errors"></div>
 235         </script>
 236
 237         <script type="text/html" id="tmpl-uploader-status-error">
 238                 <span class="upload-error-label"><?php _e('Error'); ?></span>
 239                 <span class="upload-error-filename">{{{ data.filename }}}</span>
 240                 <span class="upload-error-message">{{ data.message }}</span>
 241         </script>
 242
 243         <script type="text/html" id="tmpl-attachment">
 244                 <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
 245                         <# if ( data.uploading ) { #>
 246                                 <div class="media-progress-bar"><div></div></div>
 247                         <# } else if ( 'image' === data.type ) { #>
 248                                 <div class="thumbnail">
 249                                         <div class="centered">
 250                                                 <img src="{{ data.size.url }}" draggable="false" />
 251                                         </div>
 252                                 </div>
 253                         <# } else { #>
 254                                 <img src="{{ data.icon }}" class="icon" draggable="false" />
 255                                 <div class="filename">
 256                                         <div>{{ data.filename }}</div>
 257                                 </div>
 258                         <# } #>
 259
 260                         <# if ( data.buttons.close ) { #>
 261                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
 262                         <# } #>
 263
 264                         <# if ( data.buttons.check ) { #>
 265                                 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
 266                         <# } #>
 267                 </div>
 268                 <#
 269                 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
 270                 if ( data.describe ) { #>
 271                         <# if ( 'image' === data.type ) { #>
 272                                 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
 273                                         placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
 274                         <# } else { #>
 275                                 <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
 276                                         <# if ( 'video' === data.type ) { #>
 277                                                 placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
 278                                         <# } else if ( 'audio' === data.type ) { #>
 279                                                 placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
 280                                         <# } else { #>
 281                                                 placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
 282                                         <# } #> {{ maybeReadOnly }} />
 283                         <# } #>
 284                 <# } #>
 285         </script>
 286
 287         <script type="text/html" id="tmpl-attachment-details">
 288                 <h3>
 289                         <?php _e('Attachment Details'); ?>
 290
 291                         <span class="settings-save-status">
 292                                 <span class="spinner"></span>
 293                                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
 294                         </span>
 295                 </h3>
 296                 <div class="attachment-info">
 297                         <div class="thumbnail">
 298                                 <# if ( data.uploading ) { #>
 299                                         <div class="media-progress-bar"><div></div></div>
 300                                 <# } else if ( 'image' === data.type ) { #>
 301                                         <img src="{{ data.size.url }}" draggable="false" />
 302                                 <# } else { #>
 303                                         <img src="{{ data.icon }}" class="icon" draggable="false" />
 304                                 <# } #>
 305                         </div>
 306                         <div class="details">
 307                                 <div class="filename">{{ data.filename }}</div>
 308                                 <div class="uploaded">{{ data.dateFormatted }}</div>
 309
 310                                 <# if ( 'image' === data.type && ! data.uploading ) { #>
 311                                         <# if ( data.width && data.height ) { #>
 312                                                 <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
 313                                         <# } #>
 314
 315                                         <# if ( data.can.save ) { #>
 316                                                 <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
 317                                                 <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
 318                                         <# } #>
 319                                 <# } #>
 320
 321                                 <# if ( data.fileLength ) { #>
 322                                         <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
 323                                 <# } #>
 324
 325                                 <# if ( ! data.uploading && data.can.remove ) { #>
 326                                         <?php if ( MEDIA_TRASH ): ?>
 327                                                 <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
 328                                         <?php else: ?>
 329                                                 <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
 330                                         <?php endif; ?>
 331                                 <# } #>
 332
 333                                 <div class="compat-meta">
 334                                         <# if ( data.compat && data.compat.meta ) { #>
 335                                                 {{{ data.compat.meta }}}
 336                                         <# } #>
 337                                 </div>
 338                         </div>
 339                 </div>
 340
 341                 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
 342                         <label class="setting" data-setting="title">
 343                                 <span><?php _e('Title'); ?></span>
 344                                 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
 345                         </label>
 346                         <label class="setting" data-setting="caption">
 347                                 <span><?php _e('Caption'); ?></span>
 348                                 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
 349                         </label>
 350                 <# if ( 'image' === data.type ) { #>
 351                         <label class="setting" data-setting="alt">
 352                                 <span><?php _e('Alt Text'); ?></span>
 353                                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
 354                         </label>
 355                 <# } #>
 356                         <label class="setting" data-setting="description">
 357                                 <span><?php _e('Description'); ?></span>
 358                                 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 359                         </label>
 360         </script>
 361
 362         <script type="text/html" id="tmpl-media-selection">
 363                 <div class="selection-info">
 364                         <span class="count"></span>
 365                         <# if ( data.editable ) { #>
 366                                 <a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
 367                         <# } #>
 368                         <# if ( data.clearable ) { #>
 369                                 <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
 370                         <# } #>
 371                 </div>
 372                 <div class="selection-view"></div>
 373         </script>
 374
 375         <script type="text/html" id="tmpl-attachment-display-settings">
 376                 <h3><?php _e('Attachment Display Settings'); ?></h3>
 377
 378                 <# if ( 'image' === data.type ) { #>
 379                         <label class="setting">
 380                                 <span><?php _e('Alignment'); ?></span>
 381                                 <select class="alignment"
 382                                         data-setting="align"
 383                                         <# if ( data.userSettings ) { #>
 384                                                 data-user-setting="align"
 385                                         <# } #>>
 386
 387                                         <option value="left">
 388                                                 <?php esc_attr_e('Left'); ?>
 389                                         </option>
 390                                         <option value="center">
 391                                                 <?php esc_attr_e('Center'); ?>
 392                                         </option>
 393                                         <option value="right">
 394                                                 <?php esc_attr_e('Right'); ?>
 395                                         </option>
 396                                         <option value="none" selected>
 397                                                 <?php esc_attr_e('None'); ?>
 398                                         </option>
 399                                 </select>
 400                         </label>
 401                 <# } #>
 402
 403                 <div class="setting">
 404                         <label>
 405                                 <# if ( data.model.canEmbed ) { #>
 406                                         <span><?php _e('Embed or Link'); ?></span>
 407                                 <# } else { #>
 408                                         <span><?php _e('Link To'); ?></span>
 409                                 <# } #>
 410
 411                                 <select class="link-to"
 412                                         data-setting="link"
 413                                         <# if ( data.userSettings && ! data.model.canEmbed ) { #>
 414                                                 data-user-setting="urlbutton"
 415                                         <# } #>>
 416
 417                                 <# if ( data.model.canEmbed ) { #>
 418                                         <option value="embed" selected>
 419                                                 <?php esc_attr_e('Embed Media Player'); ?>
 420                                         </option>
 421                                         <option value="file">
 422                                 <# } else { #>
 423                                         <option value="file" selected>
 424                                 <# } #>
 425                                         <# if ( data.model.canEmbed ) { #>
 426                                                 <?php esc_attr_e('Link to Media File'); ?>
 427                                         <# } else { #>
 428                                                 <?php esc_attr_e('Media File'); ?>
 429                                         <# } #>
 430                                         </option>
 431                                         <option value="post">
 432                                         <# if ( data.model.canEmbed ) { #>
 433                                                 <?php esc_attr_e('Link to Attachment Page'); ?>
 434                                         <# } else { #>
 435                                                 <?php esc_attr_e('Attachment Page'); ?>
 436                                         <# } #>
 437                                         </option>
 438                                 <# if ( 'image' === data.type ) { #>
 439                                         <option value="custom">
 440                                                 <?php esc_attr_e('Custom URL'); ?>
 441                                         </option>
 442                                         <option value="none">
 443                                                 <?php esc_attr_e('None'); ?>
 444                                         </option>
 445                                 <# } #>
 446                                 </select>
 447                         </label>
 448                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
 449                 </div>
 450
 451                 <# if ( 'undefined' !== typeof data.sizes ) { #>
 452                         <label class="setting">
 453                                 <span><?php _e('Size'); ?></span>
 454                                 <select class="size" name="size"
 455                                         data-setting="size"
 456                                         <# if ( data.userSettings ) { #>
 457                                                 data-user-setting="imgsize"
 458                                         <# } #>>
 459                                         <?php
 460                                         /** This filter is documented in wp-admin/includes/media.php */
 461                                         $sizes = apply_filters( 'image_size_names_choose', array(
 462                                                 'thumbnail' => __('Thumbnail'),
 463                                                 'medium'    => __('Medium'),
 464                                                 'large'     => __('Large'),
 465                                                 'full'      => __('Full Size'),
 466                                         ) );
 467
 468                                         foreach ( $sizes as $value => $name ) : ?>
 469                                                 <#
 470                                                 var size = data.sizes['<?php echo esc_js( $value ); ?>'];
 471                                                 if ( size ) { #>
 472                                                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
 473                                                                 <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
 474                                                         </option>
 475                                                 <# } #>
 476                                         <?php endforeach; ?>
 477                                 </select>
 478                         </label>
 479                 <# } #>
 480         </script>
 481
 482         <script type="text/html" id="tmpl-gallery-settings">
 483                 <h3><?php _e('Gallery Settings'); ?></h3>
 484
 485                 <label class="setting">
 486                         <span><?php _e('Link To'); ?></span>
 487                         <select class="link-to"
 488                                 data-setting="link"
 489                                 <# if ( data.userSettings ) { #>
 490                                         data-user-setting="urlbutton"
 491                                 <# } #>>
 492
 493                                 <option value="post" selected>
 494                                         <?php esc_attr_e('Attachment Page'); ?>
 495                                 </option>
 496                                 <option value="file">
 497                                         <?php esc_attr_e('Media File'); ?>
 498                                 </option>
 499                                 <option value="none">
 500                                         <?php esc_attr_e('None'); ?>
 501                                 </option>
 502                         </select>
 503                 </label>
 504
 505                 <label class="setting">
 506                         <span><?php _e('Columns'); ?></span>
 507                         <select class="columns" name="columns"
 508                                 data-setting="columns">
 509                                 <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
 510                                         <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
 511                                                 <?php echo esc_html( $i ); ?>
 512                                         </option>
 513                                 <?php endfor; ?>
 514                         </select>
 515                 </label>
 516
 517                 <label class="setting">
 518                         <span><?php _e( 'Random Order' ); ?></span>
 519                         <input type="checkbox" data-setting="_orderbyRandom" />
 520                 </label>
 521         </script>
 522
 523         <script type="text/html" id="tmpl-playlist-settings">
 524                 <h3><?php _e( 'Playlist Settings' ); ?></h3>
 525
 526                 <# var emptyModel = _.isEmpty( data.model ),
 527                         isVideo = 'video' === data.controller.get('library').props.get('type'); #>
 528
 529                 <label class="setting">
 530                         <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
 531                                 checked="checked"
 532                         <# } #> />
 533                         <# if ( isVideo ) { #>
 534                         <span><?php _e( 'Show Video List' ); ?></span>
 535                         <# } else { #>
 536                         <span><?php _e( 'Show Tracklist' ); ?></span>
 537                         <# } #>
 538                 </label>
 539
 540                 <# if ( ! isVideo ) { #>
 541                 <label class="setting">
 542                         <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
 543                                 checked="checked"
 544                         <# } #> />
 545                         <span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
 546                 </label>
 547                 <# } #>
 548
 549                 <label class="setting">
 550                         <input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
 551                                 checked="checked"
 552                         <# } #> />
 553                         <span><?php _e( 'Show Images' ); ?></span>
 554                 </label>
 555         </script>
 556
 557         <script type="text/html" id="tmpl-embed-link-settings">
 558                 <label class="setting">
 559                         <span><?php _e('Title'); ?></span>
 560                         <input type="text" class="alignment" data-setting="title" />
 561                 </label>
 562         </script>
 563
 564         <script type="text/html" id="tmpl-embed-image-settings">
 565                 <div class="thumbnail">
 566                         <img src="{{ data.model.url }}" draggable="false" />
 567                 </div>
 568
 569                 <?php
 570                 /** This filter is documented in wp-admin/includes/media.php */
 571                 if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
 572                         <label class="setting caption">
 573                                 <span><?php _e('Caption'); ?></span>
 574                                 <textarea data-setting="caption" />
 575                         </label>
 576                 <?php endif; ?>
 577
 578                 <label class="setting alt-text">
 579                         <span><?php _e('Alt Text'); ?></span>
 580                         <input type="text" data-setting="alt" />
 581                 </label>
 582
 583                 <div class="setting align">
 584                         <span><?php _e('Align'); ?></span>
 585                         <div class="button-group button-large" data-setting="align">
 586                                 <button class="button" value="left">
 587                                         <?php esc_attr_e('Left'); ?>
 588                                 </button>
 589                                 <button class="button" value="center">
 590                                         <?php esc_attr_e('Center'); ?>
 591                                 </button>
 592                                 <button class="button" value="right">
 593                                         <?php esc_attr_e('Right'); ?>
 594                                 </button>
 595                                 <button class="button active" value="none">
 596                                         <?php esc_attr_e('None'); ?>
 597                                 </button>
 598                         </div>
 599                 </div>
 600
 601                 <div class="setting link-to">
 602                         <span><?php _e('Link To'); ?></span>
 603                         <div class="button-group button-large" data-setting="link">
 604                                 <button class="button" value="file">
 605                                         <?php esc_attr_e('Image URL'); ?>
 606                                 </button>
 607                                 <button class="button" value="custom">
 608                                         <?php esc_attr_e('Custom URL'); ?>
 609                                 </button>
 610                                 <button class="button active" value="none">
 611                                         <?php esc_attr_e('None'); ?>
 612                                 </button>
 613                         </div>
 614                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
 615                 </div>
 616         </script>
 617
 618         <script type="text/html" id="tmpl-attachments-css">
 619                 <style type="text/css" id="{{ data.id }}-css">
 620                         #{{ data.id }} {
 621                                 padding: 0 {{ data.gutter }}px;
 622                         }
 623
 624                         #{{ data.id }} .attachment {
 625                                 margin: {{ data.gutter }}px;
 626                                 width: {{ data.edge }}px;
 627                         }
 628
 629                         #{{ data.id }} .attachment-preview,
 630                         #{{ data.id }} .attachment-preview .thumbnail {
 631                                 width: {{ data.edge }}px;
 632                                 height: {{ data.edge }}px;
 633                         }
 634
 635                         #{{ data.id }} .portrait .thumbnail img {
 636                                 max-width: {{ data.edge }}px;
 637                                 height: auto;
 638                         }
 639
 640                         #{{ data.id }} .landscape .thumbnail img {
 641                                 width: auto;
 642                                 max-height: {{ data.edge }}px;
 643                         }
 644                 </style>
 645         </script>
 646
 647         <script type="text/html" id="tmpl-image-details">
 648                 <div class="media-embed">
 649                         <div class="embed-media-settings">
 650                                 <div class="column-image">
 651                                         <div class="image">
 652                                                 <img src="{{ data.model.url }}" draggable="false" />
 653
 654                                                 <# if ( data.attachment && window.imageEdit ) { #>
 655                                                         <div class="actions">
 656                                                                 <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
 657                                                                 <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
 658                                                         </div>
 659                                                 <# } #>
 660                                         </div>
 661                                 </div>
 662                                 <div class="column-settings">
 663                                         <?php
 664                                         /** This filter is documented in wp-admin/includes/media.php */
 665                                         if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
 666                                                 <label class="setting caption">
 667                                                         <span><?php _e('Caption'); ?></span>
 668                                                         <textarea data-setting="caption">{{ data.model.caption }}</textarea>
 669                                                 </label>
 670                                         <?php endif; ?>
 671
 672                                         <label class="setting alt-text">
 673                                                 <span><?php _e('Alternative Text'); ?></span>
 674                                                 <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
 675                                         </label>
 676
 677                                         <h3><?php _e( 'Display Settings' ); ?></h3>
 678                                         <div class="setting align">
 679                                                 <span><?php _e('Align'); ?></span>
 680                                                 <div class="button-group button-large" data-setting="align">
 681                                                         <button class="button" value="left">
 682                                                                 <?php esc_attr_e('Left'); ?>
 683                                                         </button>
 684                                                         <button class="button" value="center">
 685                                                                 <?php esc_attr_e('Center'); ?>
 686                                                         </button>
 687                                                         <button class="button" value="right">
 688                                                                 <?php esc_attr_e('Right'); ?>
 689                                                         </button>
 690                                                         <button class="button active" value="none">
 691                                                                 <?php esc_attr_e('None'); ?>
 692                                                         </button>
 693                                                 </div>
 694                                         </div>
 695
 696                                         <# if ( data.attachment ) { #>
 697                                                 <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
 698                                                         <label class="setting size">
 699                                                                 <span><?php _e('Size'); ?></span>
 700                                                                 <select class="size" name="size"
 701                                                                         data-setting="size"
 702                                                                         <# if ( data.userSettings ) { #>
 703                                                                                 data-user-setting="imgsize"
 704                                                                         <# } #>>
 705                                                                         <?php
 706                                                                         /** This filter is documented in wp-admin/includes/media.php */
 707                                                                         $sizes = apply_filters( 'image_size_names_choose', array(
 708                                                                                 'thumbnail' => __('Thumbnail'),
 709                                                                                 'medium'    => __('Medium'),
 710                                                                                 'large'     => __('Large'),
 711                                                                                 'full'      => __('Full Size'),
 712                                                                         ) );
 713
 714                                                                         foreach ( $sizes as $value => $name ) : ?>
 715                                                                                 <#
 716                                                                                 var size = data.sizes['<?php echo esc_js( $value ); ?>'];
 717                                                                                 if ( size ) { #>
 718                                                                                         <option value="<?php echo esc_attr( $value ); ?>">
 719                                                                                                 <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
 720                                                                                         </option>
 721                                                                                 <# } #>
 722                                                                         <?php endforeach; ?>
 723                                                                         <option value="<?php echo esc_attr( 'custom' ); ?>">
 724                                                                                 <?php _e( 'Custom Size' ); ?>
 725                                                                         </option>
 726                                                                 </select>
 727                                                         </label>
 728                                                 <# } #>
 729                                                         <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
 730                                                                 <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
 731                                                         </div>
 732                                         <# } #>
 733
 734                                         <div class="setting link-to">
 735                                                 <span><?php _e('Link To'); ?></span>
 736                                                 <select data-setting="link">
 737                                                 <# if ( data.attachment ) { #>
 738                                                         <option value="file">
 739                                                                 <?php esc_attr_e('Media File'); ?>
 740                                                         </option>
 741                                                         <option value="post">
 742                                                                 <?php esc_attr_e('Attachment Page'); ?>
 743                                                         </option>
 744                                                 <# } else { #>
 745                                                         <option value="file">
 746                                                                 <?php esc_attr_e('Image URL'); ?>
 747                                                         </option>
 748                                                 <# } #>
 749                                                         <option value="custom">
 750                                                                 <?php esc_attr_e('Custom URL'); ?>
 751                                                         </option>
 752                                                         <option value="none">
 753                                                                 <?php esc_attr_e('None'); ?>
 754                                                         </option>
 755                                                 </select>
 756                                                 <input type="text" class="link-to-custom" data-setting="linkUrl" />
 757                                         </div>
 758                                         <div class="advanced-section">
 759                                                 <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
 760                                                 <div class="advanced-settings hidden">
 761                                                         <div class="advanced-image">
 762                                                                 <label class="setting title-text">
 763                                                                         <span><?php _e('Image Title Attribute'); ?></span>
 764                                                                         <input type="text" data-setting="title" value="{{ data.model.title }}" />
 765                                                                 </label>
 766                                                                 <label class="setting extra-classes">
 767                                                                         <span><?php _e('Image CSS Class'); ?></span>
 768                                                                         <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
 769                                                                 </label>
 770                                                         </div>
 771                                                         <div class="advanced-link">
 772                                                                 <div class="setting link-target">
 773                                                                         <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
 774                                                                 </div>
 775                                                                 <label class="setting link-rel">
 776                                                                         <span><?php _e('Link Rel'); ?></span>
 777                                                                         <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
 778                                                                 </label>
 779                                                                 <label class="setting link-class-name">
 780                                                                         <span><?php _e('Link CSS Class'); ?></span>
 781                                                                         <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
 782                                                                 </label>
 783                                                         </div>
 784                                                 </div>
 785                                         </div>
 786                                 </div>
 787                         </div>
 788                 </div>
 789         </script>
 790
 791         <script type="text/html" id="tmpl-image-editor">
 792                 <div id="media-head-{{ data.id }}"></div>
 793                 <div id="image-editor-{{ data.id }}"></div>
 794         </script>
 795
 796         <script type="text/html" id="tmpl-audio-details">
 797                 <# var ext, html5types = {
 798                         mp3: wp.media.view.settings.embedMimes.mp3,
 799                         ogg: wp.media.view.settings.embedMimes.ogg
 800                 }; #>
 801
 802                 <?php $audio_types = wp_get_audio_extensions(); ?>
 803                 <div class="media-embed media-embed-details">
 804                         <div class="embed-media-settings embed-audio-settings">
 805                                 <?php wp_underscore_audio_template() ?>
 806
 807                                 <# if ( ! _.isEmpty( data.model.src ) ) {
 808                                         ext = data.model.src.split('.').pop();
 809                                         if ( html5types[ ext ] ) {
 810                                                 delete html5types[ ext ];
 811                                         }
 812                                 #>
 813                                 <label class="setting">
 814                                         <span>SRC</span>
 815                                         <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
 816                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
 817                                 </label>
 818                                 <# } #>
 819                                 <?php
 820
 821                                 foreach ( $audio_types as $type ):
 822                                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
 823                                         if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
 824                                                 delete html5types.<?php echo $type ?>;
 825                                         }
 826                                 #>
 827                                 <label class="setting">
 828                                         <span><?php echo strtoupper( $type ) ?></span>
 829                                         <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
 830                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
 831                                 </label>
 832                                 <# } #>
 833                                 <?php endforeach ?>
 834
 835                                 <# if ( ! _.isEmpty( html5types ) ) { #>
 836                                 <div class="setting">
 837                                         <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ) ?></span>
 838                                         <div class="button-large">
 839                                         <# _.each( html5types, function (mime, type) { #>
 840                                         <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
 841                                         <# } ) #>
 842                                         </div>
 843                                 </div>
 844                                 <# } #>
 845
 846                                 <div class="setting preload">
 847                                         <span><?php _e( 'Preload' ); ?></span>
 848                                         <div class="button-group button-large" data-setting="preload">
 849                                                 <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
 850                                                 <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
 851                                                 <button class="button active" value="none"><?php _e( 'None' ); ?></button>
 852                                         </div>
 853                                 </div>
 854
 855                                 <label class="setting checkbox-setting">
 856                                         <span><?php _e( 'Autoplay' ); ?></span>
 857                                         <input type="checkbox" data-setting="autoplay" />
 858                                 </label>
 859
 860                                 <label class="setting checkbox-setting">
 861                                         <span><?php _e( 'Loop' ); ?></span>
 862                                         <input type="checkbox" data-setting="loop" />
 863                                 </label>
 864                                 <div class="clear"></div>
 865                         </div>
 866                 </div>
 867         </script>
 868
 869         <script type="text/html" id="tmpl-video-details">
 870                 <# var ext, html5types = {
 871                         mp4: wp.media.view.settings.embedMimes.mp4,
 872                         ogv: wp.media.view.settings.embedMimes.ogv,
 873                         webm: wp.media.view.settings.embedMimes.webm
 874                 }; #>
 875
 876                 <?php $video_types = wp_get_video_extensions(); ?>
 877                 <div class="media-embed media-embed-details">
 878                         <div class="embed-media-settings embed-video-settings">
 879                                 <div class="wp-video-holder">
 880                                 <#
 881                                 var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
 882                                         w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
 883                                         h = ! data.model.height ? 360 : data.model.height;
 884
 885                                 if ( data.model.width && w !== data.model.width ) {
 886                                         h = Math.ceil( ( h * w ) / data.model.width );
 887                                 }
 888                                 #>
 889
 890                                 <?php wp_underscore_video_template() ?>
 891
 892                                 <# if ( ! _.isEmpty( data.model.src ) ) {
 893                                         ext = data.model.src.split('.').pop();
 894                                         if ( html5types[ ext ] ) {
 895                                                 delete html5types[ ext ];
 896                                         }
 897                                 #>
 898                                 <label class="setting">
 899                                         <span>SRC</span>
 900                                         <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
 901                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
 902                                 </label>
 903                                 <# } #>
 904                                 <?php foreach ( $video_types as $type ):
 905                                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
 906                                         if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
 907                                                 delete html5types.<?php echo $type ?>;
 908                                         }
 909                                 #>
 910                                 <label class="setting">
 911                                         <span><?php echo strtoupper( $type ) ?></span>
 912                                         <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
 913                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
 914                                 </label>
 915                                 <# } #>
 916                                 <?php endforeach ?>
 917                                 </div>
 918
 919                                 <# if ( ! _.isEmpty( html5types ) ) { #>
 920                                 <div class="setting">
 921                                         <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
 922                                         <div class="button-large">
 923                                         <# _.each( html5types, function (mime, type) { #>
 924                                         <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
 925                                         <# } ) #>
 926                                         </div>
 927                                 </div>
 928                                 <# } #>
 929
 930                                 <# if ( ! _.isEmpty( data.model.poster ) ) { #>
 931                                 <label class="setting">
 932                                         <span><?php _e( 'Poster Image' ); ?></span>
 933                                         <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
 934                                         <a class="remove-setting"><?php _e( 'Remove' ); ?></a>
 935                                 </label>
 936                                 <# } #>
 937                                 <div class="setting preload">
 938                                         <span><?php _e( 'Preload' ); ?></span>
 939                                         <div class="button-group button-large" data-setting="preload">
 940                                                 <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
 941                                                 <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
 942                                                 <button class="button active" value="none"><?php _e( 'None' ); ?></button>
 943                                         </div>
 944                                 </div>
 945
 946                                 <label class="setting checkbox-setting">
 947                                         <span><?php _e( 'Autoplay' ); ?></span>
 948                                         <input type="checkbox" data-setting="autoplay" />
 949                                 </label>
 950
 951                                 <label class="setting checkbox-setting">
 952                                         <span><?php _e( 'Loop' ); ?></span>
 953                                         <input type="checkbox" data-setting="loop" />
 954                                 </label>
 955                                 <div class="clear"></div>
 956
 957                                 <label class="setting" data-setting="content">
 958                                         <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
 959                                         <#
 960                                         var content = '';
 961                                         if ( ! _.isEmpty( data.model.content ) ) {
 962                                                 var tracks = jQuery( data.model.content ).filter( 'track' );
 963                                                 _.each( tracks.toArray(), function (track) {
 964                                                         content += track.outerHTML; #>
 965                                                 <p>
 966                                                         <input class="content-track" type="text" value="{{ track.outerHTML }}" />
 967                                                         <a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
 968                                                 </p>
 969                                                 <# } ); #>
 970                                         <# } else { #>
 971                                         <em><?php _e( 'There are no associated subtitles.' ); ?></em>
 972                                         <# } #>
 973                                         <textarea class="hidden content-setting">{{ content }}</textarea>
 974                                 </label>
 975                         </div>
 976                 </div>
 977         </script>
 978
 979         <script type="text/html" id="tmpl-editor-gallery">
 980                 <div class="toolbar">
 981                         <div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
 982                 </div>
 983                 <# if ( data.attachments ) { #>
 984                         <div class="gallery gallery-columns-{{ data.columns }}">
 985                                 <# _.each( data.attachments, function( attachment, index ) { #>
 986                                         <dl class="gallery-item">
 987                                                 <dt class="gallery-icon">
 988                                                         <# if ( attachment.thumbnail ) { #>
 989                                                                 <img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
 990                                                         <# } else { #>
 991                                                                 <img src="{{ attachment.url }}" />
 992                                                         <# } #>
 993                                                 </dt>
 994                                                 <dd class="wp-caption-text gallery-caption">
 995                                                         {{ attachment.caption }}
 996                                                 </dd>
 997                                         </dl>
 998                                         <# if ( index % data.columns === data.columns - 1 ) { #>
 999                                                 <br style="clear: both;">
1000                                         <# } #>
1001                                 <# } ); #>
1002                         </div>
1003                 <# } else { #>
1004                         <div class="wpview-error">
1005                                 <div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
1006                         </div>
1007                 <# } #>
1008         </script>
1009
1010         <script type="text/html" id="tmpl-editor-audio">
1011                 <div class="toolbar">
1012                         <div class="dashicons dashicons-edit edit"></div>
1013                         <div class="dashicons dashicons-no-alt remove"></div>
1014                 </div>
1015                 <?php wp_underscore_audio_template() ?>
1016                 <div class="wpview-overlay"></div>
1017         </script>
1018
1019         <script type="text/html" id="tmpl-editor-video">
1020                 <div class="toolbar">
1021                         <div class="dashicons dashicons-edit edit"></div>
1022                         <div class="dashicons dashicons-no-alt remove"></div>
1023                 </div>
1024                 <?php wp_underscore_video_template() ?>
1025                 <div class="wpview-overlay"></div>
1026         </script>
1027
1028         <?php wp_underscore_playlist_templates() ?>
1029
1030         <script type="text/html" id="tmpl-editor-playlist">
1031                 <div class="toolbar">
1032                         <div class="dashicons dashicons-edit edit"></div>
1033                         <div class="dashicons dashicons-no-alt remove"></div>
1034                 </div>
1035                 <# if ( data.tracks ) { #>
1036                         <div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
1037                                 <# if ( 'audio' === data.type ){ #>
1038                                 <div class="wp-playlist-current-item"></div>
1039                                 <# } #>
1040                                 <{{ data.type }} controls="controls" preload="none" <#
1041                                         if ( data.width ) { #> width="{{ data.width }}"<# }
1042                                         #><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
1043                                 <div class="wp-playlist-next"></div>
1044                                 <div class="wp-playlist-prev"></div>
1045                         </div>
1046                         <div class="wpview-overlay"></div>
1047                 <# } else { #>
1048                         <div class="wpview-error">
1049                                 <div class="dashicons dashicons-video-alt3"></div><p><?php _e( 'No items found.' ); ?></p>
1050                         </div>
1051                 <# } #>
1052         </script>
1053
1054         <script type="text/html" id="tmpl-crop-content">
1055                 <img class="crop-image" src="{{ data.url }}">
1056                 <div class="upload-errors"></div>
1057         </script>
1058
1059         <?php
1060
1061         /**
1062          * Fires when the custom Backbone media templates are printed.
1063          *
1064          * @since 3.5.0
1065          */
1066         do_action( 'print_media_templates' );
1067 }