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