home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-includes / media-template.php < prev    next >
Encoding:
PHP Script  |  2018-01-31  |  45.0 KB  |  1,273 lines
  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_rule = '', classes = [],
  54.         w, h, settings = wp.media.view.settings,
  55.         isYouTube = isVimeo = false;
  56.  
  57.     if ( ! _.isEmpty( data.model.src ) ) {
  58.         isYouTube = data.model.src.match(/youtube|youtu\.be/);
  59.         isVimeo = -1 !== data.model.src.indexOf('vimeo');
  60.     }
  61.  
  62.     if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
  63.         w = settings.contentWidth;
  64.     } else {
  65.         w = data.model.width;
  66.     }
  67.  
  68.     if ( w !== data.model.width ) {
  69.         h = Math.ceil( ( data.model.height * w ) / data.model.width );
  70.     } else {
  71.         h = data.model.height;
  72.      }
  73.  
  74.     if ( w ) {
  75.         w_rule = 'width: ' + w + 'px; ';
  76.     }
  77.  
  78.     if ( isYouTube ) {
  79.         classes.push( 'youtube-video' );
  80.     }
  81.  
  82.     if ( isVimeo ) {
  83.         classes.push( 'vimeo-video' );
  84.     }
  85.  
  86. #>
  87. <div style="{{ w_rule }}" class="wp-video">
  88. <video controls
  89.     class="wp-video-shortcode {{ classes.join( ' ' ) }}"
  90.     <# if ( w ) { #>width="{{ w }}"<# } #>
  91.     <# if ( h ) { #>height="{{ h }}"<# } #>
  92.     <?php
  93.     $props = array( 'poster' => '', 'preload' => 'metadata' );
  94.     foreach ( $props as $key => $value ):
  95.         if ( empty( $value ) ) {
  96.         ?><#
  97.         if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
  98.             #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
  99.         } #>
  100.         <?php } else {
  101.             echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
  102.         }
  103.     endforeach;
  104.     ?><#
  105.     <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
  106.     ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
  107.         #> <?php echo $attr ?><#
  108.     }
  109.     <?php endforeach ?>#>
  110. >
  111.     <# if ( ! _.isEmpty( data.model.src ) ) {
  112.         if ( isYouTube ) { #>
  113.         <source src="{{ data.model.src }}" type="video/youtube" />
  114.         <# } else if ( isVimeo ) { #>
  115.         <source src="{{ data.model.src }}" type="video/vimeo" />
  116.         <# } else { #>
  117.         <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
  118.         <# }
  119.     } #>
  120.  
  121.     <?php foreach ( $video_types as $type ):
  122.     ?><# if ( data.model.<?php echo $type ?> ) { #>
  123.     <source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
  124.     <# } #>
  125.     <?php endforeach; ?>
  126.     {{{ data.model.content }}}
  127. </video>
  128. </div>
  129. <?php
  130. }
  131.  
  132. /**
  133.  * Prints the templates used in the media manager.
  134.  *
  135.  * @since 3.5.0
  136.  *
  137.  * @global bool $is_IE
  138.  */
  139. function wp_print_media_templates() {
  140.     global $is_IE;
  141.     $class = 'media-modal wp-core-ui';
  142.     if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
  143.         $class .= ' ie7';
  144.     ?>
  145.     <!--[if lte IE 8]>
  146.     <style>
  147.         .attachment:focus {
  148.             outline: #1e8cbe solid;
  149.         }
  150.         .selected.attachment {
  151.             outline: #1e8cbe solid;
  152.         }
  153.     </style>
  154.     <![endif]-->
  155.     <script type="text/html" id="tmpl-media-frame">
  156.         <div class="media-frame-menu"></div>
  157.         <div class="media-frame-title"></div>
  158.         <div class="media-frame-router"></div>
  159.         <div class="media-frame-content"></div>
  160.         <div class="media-frame-toolbar"></div>
  161.         <div class="media-frame-uploader"></div>
  162.     </script>
  163.  
  164.     <script type="text/html" id="tmpl-media-modal">
  165.         <div tabindex="0" class="<?php echo $class; ?>">
  166.             <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
  167.             <div class="media-modal-content"></div>
  168.         </div>
  169.         <div class="media-modal-backdrop"></div>
  170.     </script>
  171.  
  172.     <script type="text/html" id="tmpl-uploader-window">
  173.         <div class="uploader-window-content">
  174.             <h1><?php _e( 'Drop files to upload' ); ?></h1>
  175.         </div>
  176.     </script>
  177.  
  178.     <script type="text/html" id="tmpl-uploader-editor">
  179.         <div class="uploader-editor-content">
  180.             <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
  181.         </div>
  182.     </script>
  183.  
  184.     <script type="text/html" id="tmpl-uploader-inline">
  185.         <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
  186.         <# if ( data.canClose ) { #>
  187.         <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
  188.         <# } #>
  189.         <div class="uploader-inline-content {{ messageClass }}">
  190.         <# if ( data.message ) { #>
  191.             <h2 class="upload-message">{{ data.message }}</h2>
  192.         <# } #>
  193.         <?php if ( ! _device_can_upload() ) : ?>
  194.             <h2 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://apps.wordpress.org/' ); ?></h2>
  195.         <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
  196.             <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
  197.             <?php
  198.             /** This action is documented in wp-admin/includes/media.php */
  199.             do_action( 'upload_ui_over_quota' ); ?>
  200.  
  201.         <?php else : ?>
  202.             <div class="upload-ui">
  203.                 <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
  204.                 <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
  205.                 <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
  206.             </div>
  207.  
  208.             <div class="upload-inline-status"></div>
  209.  
  210.             <div class="post-upload-ui">
  211.                 <?php
  212.                 /** This action is documented in wp-admin/includes/media.php */
  213.                 do_action( 'pre-upload-ui' );
  214.                 /** This action is documented in wp-admin/includes/media.php */
  215.                 do_action( 'pre-plupload-upload-ui' );
  216.  
  217.                 if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
  218.                     /** This action is documented in wp-admin/includes/media.php */
  219.                     do_action( 'post-plupload-upload-ui' );
  220.                     add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
  221.                 } else {
  222.                     /** This action is documented in wp-admin/includes/media.php */
  223.                     do_action( 'post-plupload-upload-ui' );
  224.                 }
  225.  
  226.                 $max_upload_size = wp_max_upload_size();
  227.                 if ( ! $max_upload_size ) {
  228.                     $max_upload_size = 0;
  229.                 }
  230.                 ?>
  231.  
  232.                 <p class="max-upload-size"><?php
  233.                     printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
  234.                 ?></p>
  235.  
  236.                 <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
  237.                     <p class="suggested-dimensions">
  238.                         <?php
  239.                             /* translators: 1: suggested width number, 2: suggested height number. */
  240.                             printf( __( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}', '{{data.suggestedHeight}}' );
  241.                         ?>
  242.                     </p>
  243.                 <# } #>
  244.  
  245.                 <?php
  246.                 /** This action is documented in wp-admin/includes/media.php */
  247.                 do_action( 'post-upload-ui' ); ?>
  248.             </div>
  249.         <?php endif; ?>
  250.         </div>
  251.     </script>
  252.  
  253.     <script type="text/html" id="tmpl-media-library-view-switcher">
  254.         <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
  255.             <span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
  256.         </a>
  257.         <a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
  258.             <span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
  259.         </a>
  260.     </script>
  261.  
  262.     <script type="text/html" id="tmpl-uploader-status">
  263.         <h2><?php _e( 'Uploading' ); ?></h2>
  264.         <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
  265.  
  266.         <div class="media-progress-bar"><div></div></div>
  267.         <div class="upload-details">
  268.             <span class="upload-count">
  269.                 <span class="upload-index"></span> / <span class="upload-total"></span>
  270.             </span>
  271.             <span class="upload-detail-separator">–</span>
  272.             <span class="upload-filename"></span>
  273.         </div>
  274.         <div class="upload-errors"></div>
  275.     </script>
  276.  
  277.     <script type="text/html" id="tmpl-uploader-status-error">
  278.         <span class="upload-error-filename">{{{ data.filename }}}</span>
  279.         <span class="upload-error-message">{{ data.message }}</span>
  280.     </script>
  281.  
  282.     <script type="text/html" id="tmpl-edit-attachment-frame">
  283.         <div class="edit-media-header">
  284.             <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
  285.             <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
  286.         </div>
  287.         <div class="media-frame-title"></div>
  288.         <div class="media-frame-content"></div>
  289.     </script>
  290.  
  291.     <script type="text/html" id="tmpl-attachment-details-two-column">
  292.         <div class="attachment-media-view {{ data.orientation }}">
  293.             <div class="thumbnail thumbnail-{{ data.type }}">
  294.                 <# if ( data.uploading ) { #>
  295.                     <div class="media-progress-bar"><div></div></div>
  296.                 <# } else if ( data.sizes && data.sizes.large ) { #>
  297.                     <img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
  298.                 <# } else if ( data.sizes && data.sizes.full ) { #>
  299.                     <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
  300.                 <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
  301.                     <img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
  302.                 <# } #>
  303.  
  304.                 <# if ( 'audio' === data.type ) { #>
  305.                 <div class="wp-media-wrapper">
  306.                     <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
  307.                         <source type="{{ data.mime }}" src="{{ data.url }}"/>
  308.                     </audio>
  309.                 </div>
  310.                 <# } else if ( 'video' === data.type ) {
  311.                     var w_rule = '';
  312.                     if ( data.width ) {
  313.                         w_rule = 'width: ' + data.width + 'px;';
  314.                     } else if ( wp.media.view.settings.contentWidth ) {
  315.                         w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
  316.                     }
  317.                 #>
  318.                 <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
  319.                     <video controls="controls" class="wp-video-shortcode" preload="metadata"
  320.                         <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
  321.                         <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
  322.                         <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
  323.                         <source type="{{ data.mime }}" src="{{ data.url }}"/>
  324.                     </video>
  325.                 </div>
  326.                 <# } #>
  327.  
  328.                 <div class="attachment-actions">
  329.                     <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
  330.                     <button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
  331.                     <# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
  332.                     <?php _e( 'Document Preview' ); ?>
  333.                     <# } #>
  334.                 </div>
  335.             </div>
  336.         </div>
  337.         <div class="attachment-info">
  338.             <span class="settings-save-status">
  339.                 <span class="spinner"></span>
  340.                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
  341.             </span>
  342.             <div class="details">
  343.                 <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
  344.                 <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
  345.                 <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
  346.  
  347.                 <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
  348.                 <# if ( 'image' === data.type && ! data.uploading ) { #>
  349.                     <# if ( data.width && data.height ) { #>
  350.                         <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} × {{ data.height }}</div>
  351.                     <# } #>
  352.                 <# } #>
  353.  
  354.                 <# if ( data.fileLength ) { #>
  355.                     <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
  356.                 <# } #>
  357.  
  358.                 <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
  359.                     <div class="bitrate">
  360.                         <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
  361.                         <# if ( data.meta.bitrate_mode ) { #>
  362.                         {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
  363.                         <# } #>
  364.                     </div>
  365.                 <# } #>
  366.  
  367.                 <div class="compat-meta">
  368.                     <# if ( data.compat && data.compat.meta ) { #>
  369.                         {{{ data.compat.meta }}}
  370.                     <# } #>
  371.                 </div>
  372.             </div>
  373.  
  374.             <div class="settings">
  375.                 <label class="setting" data-setting="url">
  376.                     <span class="name"><?php _e('URL'); ?></span>
  377.                     <input type="text" value="{{ data.url }}" readonly />
  378.                 </label>
  379.                 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
  380.                 <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
  381.                 <label class="setting" data-setting="title">
  382.                     <span class="name"><?php _e('Title'); ?></span>
  383.                     <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
  384.                 </label>
  385.                 <?php endif; ?>
  386.                 <# if ( 'audio' === data.type ) { #>
  387.                 <?php foreach ( array(
  388.                     'artist' => __( 'Artist' ),
  389.                     'album' => __( 'Album' ),
  390.                 ) as $key => $label ) : ?>
  391.                 <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
  392.                     <span class="name"><?php echo $label ?></span>
  393.                     <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
  394.                 </label>
  395.                 <?php endforeach; ?>
  396.                 <# } #>
  397.                 <label class="setting" data-setting="caption">
  398.                     <span class="name"><?php _e( 'Caption' ); ?></span>
  399.                     <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
  400.                 </label>
  401.                 <# if ( 'image' === data.type ) { #>
  402.                     <label class="setting" data-setting="alt">
  403.                         <span class="name"><?php _e( 'Alt Text' ); ?></span>
  404.                         <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
  405.                     </label>
  406.                 <# } #>
  407.                 <label class="setting" data-setting="description">
  408.                     <span class="name"><?php _e('Description'); ?></span>
  409.                     <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
  410.                 </label>
  411.                 <label class="setting">
  412.                     <span class="name"><?php _e( 'Uploaded By' ); ?></span>
  413.                     <span class="value">{{ data.authorName }}</span>
  414.                 </label>
  415.                 <# if ( data.uploadedToTitle ) { #>
  416.                     <label class="setting">
  417.                         <span class="name"><?php _e( 'Uploaded To' ); ?></span>
  418.                         <# if ( data.uploadedToLink ) { #>
  419.                             <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
  420.                         <# } else { #>
  421.                             <span class="value">{{ data.uploadedToTitle }}</span>
  422.                         <# } #>
  423.                     </label>
  424.                 <# } #>
  425.                 <div class="attachment-compat"></div>
  426.             </div>
  427.  
  428.             <div class="actions">
  429.                 <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
  430.                 <# if ( data.can.save ) { #> |
  431.                     <a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
  432.                 <# } #>
  433.                 <# if ( ! data.uploading && data.can.remove ) { #> |
  434.                     <?php if ( MEDIA_TRASH ): ?>
  435.                         <# if ( 'trash' === data.status ) { #>
  436.                             <button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
  437.                         <# } else { #>
  438.                             <button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
  439.                         <# } #>
  440.                     <?php else: ?>
  441.                         <button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
  442.                     <?php endif; ?>
  443.                 <# } #>
  444.             </div>
  445.  
  446.         </div>
  447.     </script>
  448.  
  449.     <script type="text/html" id="tmpl-attachment">
  450.         <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
  451.             <div class="thumbnail">
  452.                 <# if ( data.uploading ) { #>
  453.                     <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
  454.                 <# } else if ( 'image' === data.type && data.sizes ) { #>
  455.                     <div class="centered">
  456.                         <img src="{{ data.size.url }}" draggable="false" alt="" />
  457.                     </div>
  458.                 <# } else { #>
  459.                     <div class="centered">
  460.                         <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
  461.                             <img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
  462.                         <# } else if ( data.sizes && data.sizes.medium ) { #>
  463.                             <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
  464.                         <# } else { #>
  465.                             <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
  466.                         <# } #>
  467.                     </div>
  468.                     <div class="filename">
  469.                         <div>{{ data.filename }}</div>
  470.                     </div>
  471.                 <# } #>
  472.             </div>
  473.             <# if ( data.buttons.close ) { #>
  474.                 <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
  475.             <# } #>
  476.         </div>
  477.         <# if ( data.buttons.check ) { #>
  478.             <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
  479.         <# } #>
  480.         <#
  481.         var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
  482.         if ( data.describe ) {
  483.             if ( 'image' === data.type ) { #>
  484.                 <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
  485.                     placeholder="<?php esc_attr_e('Caption this image…'); ?>" {{ maybeReadOnly }} />
  486.             <# } else { #>
  487.                 <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
  488.                     <# if ( 'video' === data.type ) { #>
  489.                         placeholder="<?php esc_attr_e('Describe this video…'); ?>"
  490.                     <# } else if ( 'audio' === data.type ) { #>
  491.                         placeholder="<?php esc_attr_e('Describe this audio file…'); ?>"
  492.                     <# } else { #>
  493.                         placeholder="<?php esc_attr_e('Describe this media file…'); ?>"
  494.                     <# } #> {{ maybeReadOnly }} />
  495.             <# }
  496.         } #>
  497.     </script>
  498.  
  499.     <script type="text/html" id="tmpl-attachment-details">
  500.         <h2>
  501.             <?php _e( 'Attachment Details' ); ?>
  502.             <span class="settings-save-status">
  503.                 <span class="spinner"></span>
  504.                 <span class="saved"><?php esc_html_e('Saved.'); ?></span>
  505.             </span>
  506.         </h2>
  507.         <div class="attachment-info">
  508.             <div class="thumbnail thumbnail-{{ data.type }}">
  509.                 <# if ( data.uploading ) { #>
  510.                     <div class="media-progress-bar"><div></div></div>
  511.                 <# } else if ( 'image' === data.type && data.sizes ) { #>
  512.                     <img src="{{ data.size.url }}" draggable="false" alt="" />
  513.                 <# } else { #>
  514.                     <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
  515.                 <# } #>
  516.             </div>
  517.             <div class="details">
  518.                 <div class="filename">{{ data.filename }}</div>
  519.                 <div class="uploaded">{{ data.dateFormatted }}</div>
  520.  
  521.                 <div class="file-size">{{ data.filesizeHumanReadable }}</div>
  522.                 <# if ( 'image' === data.type && ! data.uploading ) { #>
  523.                     <# if ( data.width && data.height ) { #>
  524.                         <div class="dimensions">{{ data.width }} × {{ data.height }}</div>
  525.                     <# } #>
  526.  
  527.                     <# if ( data.can.save && data.sizes ) { #>
  528.                         <a class="edit-attachment" href="{{ data.editLink }}&image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
  529.                     <# } #>
  530.                 <# } #>
  531.  
  532.                 <# if ( data.fileLength ) { #>
  533.                     <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
  534.                 <# } #>
  535.  
  536.                 <# if ( ! data.uploading && data.can.remove ) { #>
  537.                     <?php if ( MEDIA_TRASH ): ?>
  538.                     <# if ( 'trash' === data.status ) { #>
  539.                         <button type="button" class="button-link untrash-attachment"><?php _e( 'Untrash' ); ?></button>
  540.                     <# } else { #>
  541.                         <button type="button" class="button-link trash-attachment"><?php _ex( 'Trash', 'verb' ); ?></button>
  542.                     <# } #>
  543.                     <?php else: ?>
  544.                         <button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
  545.                     <?php endif; ?>
  546.                 <# } #>
  547.  
  548.                 <div class="compat-meta">
  549.                     <# if ( data.compat && data.compat.meta ) { #>
  550.                         {{{ data.compat.meta }}}
  551.                     <# } #>
  552.                 </div>
  553.             </div>
  554.         </div>
  555.  
  556.         <label class="setting" data-setting="url">
  557.             <span class="name"><?php _e('URL'); ?></span>
  558.             <input type="text" value="{{ data.url }}" readonly />
  559.         </label>
  560.         <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
  561.         <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
  562.         <label class="setting" data-setting="title">
  563.             <span class="name"><?php _e('Title'); ?></span>
  564.             <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
  565.         </label>
  566.         <?php endif; ?>
  567.         <# if ( 'audio' === data.type ) { #>
  568.         <?php foreach ( array(
  569.             'artist' => __( 'Artist' ),
  570.             'album' => __( 'Album' ),
  571.         ) as $key => $label ) : ?>
  572.         <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
  573.             <span class="name"><?php echo $label ?></span>
  574.             <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
  575.         </label>
  576.         <?php endforeach; ?>
  577.         <# } #>
  578.         <label class="setting" data-setting="caption">
  579.             <span class="name"><?php _e('Caption'); ?></span>
  580.             <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
  581.         </label>
  582.         <# if ( 'image' === data.type ) { #>
  583.             <label class="setting" data-setting="alt">
  584.                 <span class="name"><?php _e('Alt Text'); ?></span>
  585.                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
  586.             </label>
  587.         <# } #>
  588.         <label class="setting" data-setting="description">
  589.             <span class="name"><?php _e('Description'); ?></span>
  590.             <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
  591.         </label>
  592.     </script>
  593.  
  594.     <script type="text/html" id="tmpl-media-selection">
  595.         <div class="selection-info">
  596.             <span class="count"></span>
  597.             <# if ( data.editable ) { #>
  598.                 <button type="button" class="button-link edit-selection"><?php _e( 'Edit Selection' ); ?></button>
  599.             <# } #>
  600.             <# if ( data.clearable ) { #>
  601.                 <button type="button" class="button-link clear-selection"><?php _e( 'Clear' ); ?></button>
  602.             <# } #>
  603.         </div>
  604.         <div class="selection-view"></div>
  605.     </script>
  606.  
  607.     <script type="text/html" id="tmpl-attachment-display-settings">
  608.         <h2><?php _e( 'Attachment Display Settings' ); ?></h2>
  609.  
  610.         <# if ( 'image' === data.type ) { #>
  611.             <label class="setting align">
  612.                 <span><?php _e('Alignment'); ?></span>
  613.                 <select class="alignment"
  614.                     data-setting="align"
  615.                     <# if ( data.userSettings ) { #>
  616.                         data-user-setting="align"
  617.                     <# } #>>
  618.  
  619.                     <option value="left">
  620.                         <?php esc_html_e( 'Left' ); ?>
  621.                     </option>
  622.                     <option value="center">
  623.                         <?php esc_html_e( 'Center' ); ?>
  624.                     </option>
  625.                     <option value="right">
  626.                         <?php esc_html_e( 'Right' ); ?>
  627.                     </option>
  628.                     <option value="none" selected>
  629.                         <?php esc_html_e( 'None' ); ?>
  630.                     </option>
  631.                 </select>
  632.             </label>
  633.         <# } #>
  634.  
  635.         <div class="setting">
  636.             <label>
  637.                 <# if ( data.model.canEmbed ) { #>
  638.                     <span><?php _e('Embed or Link'); ?></span>
  639.                 <# } else { #>
  640.                     <span><?php _e('Link To'); ?></span>
  641.                 <# } #>
  642.  
  643.                 <select class="link-to"
  644.                     data-setting="link"
  645.                     <# if ( data.userSettings && ! data.model.canEmbed ) { #>
  646.                         data-user-setting="urlbutton"
  647.                     <# } #>>
  648.  
  649.                 <# if ( data.model.canEmbed ) { #>
  650.                     <option value="embed" selected>
  651.                         <?php esc_html_e( 'Embed Media Player' ); ?>
  652.                     </option>
  653.                     <option value="file">
  654.                 <# } else { #>
  655.                     <option value="none" selected>
  656.                         <?php esc_html_e( 'None' ); ?>
  657.                     </option>
  658.                     <option value="file">
  659.                 <# } #>
  660.                     <# if ( data.model.canEmbed ) { #>
  661.                         <?php esc_html_e( 'Link to Media File' ); ?>
  662.                     <# } else { #>
  663.                         <?php esc_html_e( 'Media File' ); ?>
  664.                     <# } #>
  665.                     </option>
  666.                     <option value="post">
  667.                     <# if ( data.model.canEmbed ) { #>
  668.                         <?php esc_html_e( 'Link to Attachment Page' ); ?>
  669.                     <# } else { #>
  670.                         <?php esc_html_e( 'Attachment Page' ); ?>
  671.                     <# } #>
  672.                     </option>
  673.                 <# if ( 'image' === data.type ) { #>
  674.                     <option value="custom">
  675.                         <?php esc_html_e( 'Custom URL' ); ?>
  676.                     </option>
  677.                 <# } #>
  678.                 </select>
  679.             </label>
  680.             <input type="text" class="link-to-custom" data-setting="linkUrl" />
  681.         </div>
  682.  
  683.         <# if ( 'undefined' !== typeof data.sizes ) { #>
  684.             <label class="setting">
  685.                 <span><?php _e('Size'); ?></span>
  686.                 <select class="size" name="size"
  687.                     data-setting="size"
  688.                     <# if ( data.userSettings ) { #>
  689.                         data-user-setting="imgsize"
  690.                     <# } #>>
  691.                     <?php
  692.                     /** This filter is documented in wp-admin/includes/media.php */
  693.                     $sizes = apply_filters( 'image_size_names_choose', array(
  694.                         'thumbnail' => __('Thumbnail'),
  695.                         'medium'    => __('Medium'),
  696.                         'large'     => __('Large'),
  697.                         'full'      => __('Full Size'),
  698.                     ) );
  699.  
  700.                     foreach ( $sizes as $value => $name ) : ?>
  701.                         <#
  702.                         var size = data.sizes['<?php echo esc_js( $value ); ?>'];
  703.                         if ( size ) { #>
  704.                             <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
  705.                                 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }}
  706.                             </option>
  707.                         <# } #>
  708.                     <?php endforeach; ?>
  709.                 </select>
  710.             </label>
  711.         <# } #>
  712.     </script>
  713.  
  714.     <script type="text/html" id="tmpl-gallery-settings">
  715.         <h2><?php _e( 'Gallery Settings' ); ?></h2>
  716.  
  717.         <label class="setting">
  718.             <span><?php _e('Link To'); ?></span>
  719.             <select class="link-to"
  720.                 data-setting="link"
  721.                 <# if ( data.userSettings ) { #>
  722.                     data-user-setting="urlbutton"
  723.                 <# } #>>
  724.  
  725.                 <option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
  726.                     #>selected="selected"<# }
  727.                 #>>
  728.                     <?php esc_html_e( 'Attachment Page' ); ?>
  729.                 </option>
  730.                 <option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
  731.                     <?php esc_html_e( 'Media File' ); ?>
  732.                 </option>
  733.                 <option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
  734.                     <?php esc_html_e( 'None' ); ?>
  735.                 </option>
  736.             </select>
  737.         </label>
  738.  
  739.         <label class="setting">
  740.             <span><?php _e('Columns'); ?></span>
  741.             <select class="columns" name="columns"
  742.                 data-setting="columns">
  743.                 <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
  744.                     <option value="<?php echo esc_attr( $i ); ?>" <#
  745.                         if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
  746.                     #>>
  747.                         <?php echo esc_html( $i ); ?>
  748.                     </option>
  749.                 <?php endfor; ?>
  750.             </select>
  751.         </label>
  752.  
  753.         <label class="setting">
  754.             <span><?php _e( 'Random Order' ); ?></span>
  755.             <input type="checkbox" data-setting="_orderbyRandom" />
  756.         </label>
  757.  
  758.         <label class="setting size">
  759.             <span><?php _e( 'Size' ); ?></span>
  760.             <select class="size" name="size"
  761.                 data-setting="size"
  762.                 <# if ( data.userSettings ) { #>
  763.                     data-user-setting="imgsize"
  764.                 <# } #>
  765.                 >
  766.                 <?php
  767.                 /** This filter is documented in wp-admin/includes/media.php */
  768.                 $size_names = apply_filters( 'image_size_names_choose', array(
  769.                     'thumbnail' => __( 'Thumbnail' ),
  770.                     'medium'    => __( 'Medium' ),
  771.                     'large'     => __( 'Large' ),
  772.                     'full'      => __( 'Full Size' ),
  773.                 ) );
  774.  
  775.                 foreach ( $size_names as $size => $label ) : ?>
  776.                     <option value="<?php echo esc_attr( $size ); ?>">
  777.                         <?php echo esc_html( $label ); ?>
  778.                     </option>
  779.                 <?php endforeach; ?>
  780.             </select>
  781.         </label>
  782.     </script>
  783.  
  784.     <script type="text/html" id="tmpl-playlist-settings">
  785.         <h2><?php _e( 'Playlist Settings' ); ?></h2>
  786.  
  787.         <# var emptyModel = _.isEmpty( data.model ),
  788.             isVideo = 'video' === data.controller.get('library').props.get('type'); #>
  789.  
  790.         <label class="setting">
  791.             <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
  792.                 checked="checked"
  793.             <# } #> />
  794.             <# if ( isVideo ) { #>
  795.             <span><?php _e( 'Show Video List' ); ?></span>
  796.             <# } else { #>
  797.             <span><?php _e( 'Show Tracklist' ); ?></span>
  798.             <# } #>
  799.         </label>
  800.  
  801.         <# if ( ! isVideo ) { #>
  802.         <label class="setting">
  803.             <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
  804.                 checked="checked"
  805.             <# } #> />
  806.             <span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
  807.         </label>
  808.         <# } #>
  809.  
  810.         <label class="setting">
  811.             <input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
  812.                 checked="checked"
  813.             <# } #> />
  814.             <span><?php _e( 'Show Images' ); ?></span>
  815.         </label>
  816.     </script>
  817.  
  818.     <script type="text/html" id="tmpl-embed-link-settings">
  819.         <label class="setting link-text">
  820.             <span><?php _e( 'Link Text' ); ?></span>
  821.             <input type="text" class="alignment" data-setting="linkText" />
  822.         </label>
  823.         <div class="embed-container" style="display: none;">
  824.             <div class="embed-preview"></div>
  825.         </div>
  826.     </script>
  827.  
  828.     <script type="text/html" id="tmpl-embed-image-settings">
  829.         <div class="thumbnail">
  830.             <img src="{{ data.model.url }}" draggable="false" alt="" />
  831.         </div>
  832.  
  833.         <?php
  834.         /** This filter is documented in wp-admin/includes/media.php */
  835.         if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
  836.             <label class="setting caption">
  837.                 <span><?php _e('Caption'); ?></span>
  838.                 <textarea data-setting="caption" />
  839.             </label>
  840.         <?php endif; ?>
  841.  
  842.         <label class="setting alt-text">
  843.             <span><?php _e('Alt Text'); ?></span>
  844.             <input type="text" data-setting="alt" />
  845.         </label>
  846.  
  847.         <div class="setting align">
  848.             <span><?php _e('Align'); ?></span>
  849.             <div class="button-group button-large" data-setting="align">
  850.                 <button class="button" value="left">
  851.                     <?php esc_html_e( 'Left' ); ?>
  852.                 </button>
  853.                 <button class="button" value="center">
  854.                     <?php esc_html_e( 'Center' ); ?>
  855.                 </button>
  856.                 <button class="button" value="right">
  857.                     <?php esc_html_e( 'Right' ); ?>
  858.                 </button>
  859.                 <button class="button active" value="none">
  860.                     <?php esc_html_e( 'None' ); ?>
  861.                 </button>
  862.             </div>
  863.         </div>
  864.  
  865.         <div class="setting link-to">
  866.             <span><?php _e('Link To'); ?></span>
  867.             <div class="button-group button-large" data-setting="link">
  868.                 <button class="button" value="file">
  869.                     <?php esc_html_e( 'Image URL' ); ?>
  870.                 </button>
  871.                 <button class="button" value="custom">
  872.                     <?php esc_html_e( 'Custom URL' ); ?>
  873.                 </button>
  874.                 <button class="button active" value="none">
  875.                     <?php esc_html_e( 'None' ); ?>
  876.                 </button>
  877.             </div>
  878.             <input type="text" class="link-to-custom" data-setting="linkUrl" />
  879.         </div>
  880.     </script>
  881.  
  882.     <script type="text/html" id="tmpl-image-details">
  883.         <div class="media-embed">
  884.             <div class="embed-media-settings">
  885.                 <div class="column-image">
  886.                     <div class="image">
  887.                         <img src="{{ data.model.url }}" draggable="false" alt="" />
  888.  
  889.                         <# if ( data.attachment && window.imageEdit ) { #>
  890.                             <div class="actions">
  891.                                 <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
  892.                                 <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
  893.                             </div>
  894.                         <# } #>
  895.                     </div>
  896.                 </div>
  897.                 <div class="column-settings">
  898.                     <?php
  899.                     /** This filter is documented in wp-admin/includes/media.php */
  900.                     if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
  901.                         <label class="setting caption">
  902.                             <span><?php _e('Caption'); ?></span>
  903.                             <textarea data-setting="caption">{{ data.model.caption }}</textarea>
  904.                         </label>
  905.                     <?php endif; ?>
  906.  
  907.                     <label class="setting alt-text">
  908.                         <span><?php _e('Alternative Text'); ?></span>
  909.                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
  910.                     </label>
  911.  
  912.                     <h2><?php _e( 'Display Settings' ); ?></h2>
  913.                     <div class="setting align">
  914.                         <span><?php _e('Align'); ?></span>
  915.                         <div class="button-group button-large" data-setting="align">
  916.                             <button class="button" value="left">
  917.                                 <?php esc_html_e( 'Left' ); ?>
  918.                             </button>
  919.                             <button class="button" value="center">
  920.                                 <?php esc_html_e( 'Center' ); ?>
  921.                             </button>
  922.                             <button class="button" value="right">
  923.                                 <?php esc_html_e( 'Right' ); ?>
  924.                             </button>
  925.                             <button class="button active" value="none">
  926.                                 <?php esc_html_e( 'None' ); ?>
  927.                             </button>
  928.                         </div>
  929.                     </div>
  930.  
  931.                     <# if ( data.attachment ) { #>
  932.                         <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
  933.                             <label class="setting size">
  934.                                 <span><?php _e('Size'); ?></span>
  935.                                 <select class="size" name="size"
  936.                                     data-setting="size"
  937.                                     <# if ( data.userSettings ) { #>
  938.                                         data-user-setting="imgsize"
  939.                                     <# } #>>
  940.                                     <?php
  941.                                     /** This filter is documented in wp-admin/includes/media.php */
  942.                                     $sizes = apply_filters( 'image_size_names_choose', array(
  943.                                         'thumbnail' => __('Thumbnail'),
  944.                                         'medium'    => __('Medium'),
  945.                                         'large'     => __('Large'),
  946.                                         'full'      => __('Full Size'),
  947.                                     ) );
  948.  
  949.                                     foreach ( $sizes as $value => $name ) : ?>
  950.                                         <#
  951.                                         var size = data.sizes['<?php echo esc_js( $value ); ?>'];
  952.                                         if ( size ) { #>
  953.                                             <option value="<?php echo esc_attr( $value ); ?>">
  954.                                                 <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }}
  955.                                             </option>
  956.                                         <# } #>
  957.                                     <?php endforeach; ?>
  958.                                     <option value="<?php echo esc_attr( 'custom' ); ?>">
  959.                                         <?php _e( 'Custom Size' ); ?>
  960.                                     </option>
  961.                                 </select>
  962.                             </label>
  963.                         <# } #>
  964.                             <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
  965.                                 <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">×</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
  966.                             </div>
  967.                     <# } #>
  968.  
  969.                     <div class="setting link-to">
  970.                         <span><?php _e('Link To'); ?></span>
  971.                         <select data-setting="link">
  972.                         <# if ( data.attachment ) { #>
  973.                             <option value="file">
  974.                                 <?php esc_html_e( 'Media File' ); ?>
  975.                             </option>
  976.                             <option value="post">
  977.                                 <?php esc_html_e( 'Attachment Page' ); ?>
  978.                             </option>
  979.                         <# } else { #>
  980.                             <option value="file">
  981.                                 <?php esc_html_e( 'Image URL' ); ?>
  982.                             </option>
  983.                         <# } #>
  984.                             <option value="custom">
  985.                                 <?php esc_html_e( 'Custom URL' ); ?>
  986.                             </option>
  987.                             <option value="none">
  988.                                 <?php esc_html_e( 'None' ); ?>
  989.                             </option>
  990.                         </select>
  991.                         <input type="text" class="link-to-custom" data-setting="linkUrl" />
  992.                     </div>
  993.                     <div class="advanced-section">
  994.                         <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
  995.                         <div class="advanced-settings hidden">
  996.                             <div class="advanced-image">
  997.                                 <label class="setting title-text">
  998.                                     <span><?php _e('Image Title Attribute'); ?></span>
  999.                                     <input type="text" data-setting="title" value="{{ data.model.title }}" />
  1000.                                 </label>
  1001.                                 <label class="setting extra-classes">
  1002.                                     <span><?php _e('Image CSS Class'); ?></span>
  1003.                                     <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
  1004.                                 </label>
  1005.                             </div>
  1006.                             <div class="advanced-link">
  1007.                                 <div class="setting link-target">
  1008.                                     <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
  1009.                                 </div>
  1010.                                 <label class="setting link-rel">
  1011.                                     <span><?php _e('Link Rel'); ?></span>
  1012.                                     <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
  1013.                                 </label>
  1014.                                 <label class="setting link-class-name">
  1015.                                     <span><?php _e('Link CSS Class'); ?></span>
  1016.                                     <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
  1017.                                 </label>
  1018.                             </div>
  1019.                         </div>
  1020.                     </div>
  1021.                 </div>
  1022.             </div>
  1023.         </div>
  1024.     </script>
  1025.  
  1026.     <script type="text/html" id="tmpl-image-editor">
  1027.         <div id="media-head-{{ data.id }}"></div>
  1028.         <div id="image-editor-{{ data.id }}"></div>
  1029.     </script>
  1030.  
  1031.     <script type="text/html" id="tmpl-audio-details">
  1032.         <# var ext, html5types = {
  1033.             mp3: wp.media.view.settings.embedMimes.mp3,
  1034.             ogg: wp.media.view.settings.embedMimes.ogg
  1035.         }; #>
  1036.  
  1037.         <?php $audio_types = wp_get_audio_extensions(); ?>
  1038.         <div class="media-embed media-embed-details">
  1039.             <div class="embed-media-settings embed-audio-settings">
  1040.                 <?php wp_underscore_audio_template() ?>
  1041.  
  1042.                 <# if ( ! _.isEmpty( data.model.src ) ) {
  1043.                     ext = data.model.src.split('.').pop();
  1044.                     if ( html5types[ ext ] ) {
  1045.                         delete html5types[ ext ];
  1046.                     }
  1047.                 #>
  1048.                 <label class="setting">
  1049.                     <span>SRC</span>
  1050.                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1051.                     <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1052.                 </label>
  1053.                 <# } #>
  1054.                 <?php
  1055.  
  1056.                 foreach ( $audio_types as $type ):
  1057.                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1058.                     if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1059.                         delete html5types.<?php echo $type ?>;
  1060.                     }
  1061.                 #>
  1062.                 <label class="setting">
  1063.                     <span><?php echo strtoupper( $type ) ?></span>
  1064.                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1065.                     <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
  1066.                 </label>
  1067.                 <# } #>
  1068.                 <?php endforeach ?>
  1069.  
  1070.                 <# if ( ! _.isEmpty( html5types ) ) { #>
  1071.                 <div class="setting">
  1072.                     <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ) ?></span>
  1073.                     <div class="button-large">
  1074.                     <# _.each( html5types, function (mime, type) { #>
  1075.                     <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1076.                     <# } ) #>
  1077.                     </div>
  1078.                 </div>
  1079.                 <# } #>
  1080.  
  1081.                 <div class="setting preload">
  1082.                     <span><?php _e( 'Preload' ); ?></span>
  1083.                     <div class="button-group button-large" data-setting="preload">
  1084.                         <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1085.                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1086.                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1087.                     </div>
  1088.                 </div>
  1089.  
  1090.                 <label class="setting checkbox-setting autoplay">
  1091.                     <input type="checkbox" data-setting="autoplay" />
  1092.                     <span><?php _e( 'Autoplay' ); ?></span>
  1093.                 </label>
  1094.  
  1095.                 <label class="setting checkbox-setting">
  1096.                     <input type="checkbox" data-setting="loop" />
  1097.                     <span><?php _e( 'Loop' ); ?></span>
  1098.                 </label>
  1099.             </div>
  1100.         </div>
  1101.     </script>
  1102.  
  1103.     <script type="text/html" id="tmpl-video-details">
  1104.         <# var ext, html5types = {
  1105.             mp4: wp.media.view.settings.embedMimes.mp4,
  1106.             ogv: wp.media.view.settings.embedMimes.ogv,
  1107.             webm: wp.media.view.settings.embedMimes.webm
  1108.         }; #>
  1109.  
  1110.         <?php $video_types = wp_get_video_extensions(); ?>
  1111.         <div class="media-embed media-embed-details">
  1112.             <div class="embed-media-settings embed-video-settings">
  1113.                 <div class="wp-video-holder">
  1114.                 <#
  1115.                 var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
  1116.                     h = ! data.model.height ? 360 : data.model.height;
  1117.  
  1118.                 if ( data.model.width && w !== data.model.width ) {
  1119.                     h = Math.ceil( ( h * w ) / data.model.width );
  1120.                 }
  1121.                 #>
  1122.  
  1123.                 <?php wp_underscore_video_template() ?>
  1124.  
  1125.                 <# if ( ! _.isEmpty( data.model.src ) ) {
  1126.                     ext = data.model.src.split('.').pop();
  1127.                     if ( html5types[ ext ] ) {
  1128.                         delete html5types[ ext ];
  1129.                     }
  1130.                 #>
  1131.                 <label class="setting">
  1132.                     <span>SRC</span>
  1133.                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
  1134.                     <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1135.                 </label>
  1136.                 <# } #>
  1137.                 <?php foreach ( $video_types as $type ):
  1138.                 ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
  1139.                     if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
  1140.                         delete html5types.<?php echo $type ?>;
  1141.                     }
  1142.                 #>
  1143.                 <label class="setting">
  1144.                     <span><?php echo strtoupper( $type ) ?></span>
  1145.                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
  1146.                     <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
  1147.                 </label>
  1148.                 <# } #>
  1149.                 <?php endforeach ?>
  1150.                 </div>
  1151.  
  1152.                 <# if ( ! _.isEmpty( html5types ) ) { #>
  1153.                 <div class="setting">
  1154.                     <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
  1155.                     <div class="button-large">
  1156.                     <# _.each( html5types, function (mime, type) { #>
  1157.                     <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
  1158.                     <# } ) #>
  1159.                     </div>
  1160.                 </div>
  1161.                 <# } #>
  1162.  
  1163.                 <# if ( ! _.isEmpty( data.model.poster ) ) { #>
  1164.                 <label class="setting">
  1165.                     <span><?php _e( 'Poster Image' ); ?></span>
  1166.                     <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
  1167.                     <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
  1168.                 </label>
  1169.                 <# } #>
  1170.                 <div class="setting preload">
  1171.                     <span><?php _e( 'Preload' ); ?></span>
  1172.                     <div class="button-group button-large" data-setting="preload">
  1173.                         <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
  1174.                         <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
  1175.                         <button class="button active" value="none"><?php _e( 'None' ); ?></button>
  1176.                     </div>
  1177.                 </div>
  1178.  
  1179.                 <label class="setting checkbox-setting autoplay">
  1180.                     <input type="checkbox" data-setting="autoplay" />
  1181.                     <span><?php _e( 'Autoplay' ); ?></span>
  1182.                 </label>
  1183.  
  1184.                 <label class="setting checkbox-setting">
  1185.                     <input type="checkbox" data-setting="loop" />
  1186.                     <span><?php _e( 'Loop' ); ?></span>
  1187.                 </label>
  1188.  
  1189.                 <label class="setting" data-setting="content">
  1190.                     <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
  1191.                     <#
  1192.                     var content = '';
  1193.                     if ( ! _.isEmpty( data.model.content ) ) {
  1194.                         var tracks = jQuery( data.model.content ).filter( 'track' );
  1195.                         _.each( tracks.toArray(), function (track) {
  1196.                             content += track.outerHTML; #>
  1197.                         <p>
  1198.                             <input class="content-track" type="text" value="{{ track.outerHTML }}" />
  1199.                             <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
  1200.                         </p>
  1201.                         <# } ); #>
  1202.                     <# } else { #>
  1203.                     <em><?php _e( 'There are no associated subtitles.' ); ?></em>
  1204.                     <# } #>
  1205.                     <textarea class="hidden content-setting">{{ content }}</textarea>
  1206.                 </label>
  1207.             </div>
  1208.         </div>
  1209.     </script>
  1210.  
  1211.     <script type="text/html" id="tmpl-editor-gallery">
  1212.         <# if ( data.attachments.length ) { #>
  1213.             <div class="gallery gallery-columns-{{ data.columns }}">
  1214.                 <# _.each( data.attachments, function( attachment, index ) { #>
  1215.                     <dl class="gallery-item">
  1216.                         <dt class="gallery-icon">
  1217.                             <# if ( attachment.thumbnail ) { #>
  1218.                                 <img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="" />
  1219.                             <# } else { #>
  1220.                                 <img src="{{ attachment.url }}" alt="" />
  1221.                             <# } #>
  1222.                         </dt>
  1223.                         <# if ( attachment.caption ) { #>
  1224.                             <dd class="wp-caption-text gallery-caption">
  1225.                                 {{{ data.verifyHTML( attachment.caption ) }}}
  1226.                             </dd>
  1227.                         <# } #>
  1228.                     </dl>
  1229.                     <# if ( index % data.columns === data.columns - 1 ) { #>
  1230.                         <br style="clear: both;">
  1231.                     <# } #>
  1232.                 <# } ); #>
  1233.             </div>
  1234.         <# } else { #>
  1235.             <div class="wpview-error">
  1236.                 <div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
  1237.             </div>
  1238.         <# } #>
  1239.     </script>
  1240.  
  1241.     <script type="text/html" id="tmpl-crop-content">
  1242.         <img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
  1243.         <div class="upload-errors"></div>
  1244.     </script>
  1245.  
  1246.     <script type="text/html" id="tmpl-site-icon-preview">
  1247.         <h2><?php _e( 'Preview' ); ?></h2>
  1248.         <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
  1249.         <div class="favicon-preview">
  1250.             <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" height="" alt="" />
  1251.  
  1252.             <div class="favicon">
  1253.                 <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
  1254.             </div>
  1255.             <span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
  1256.         </div>
  1257.  
  1258.         <strong aria-hidden="true"><?php _e( 'As an app icon' ); ?></strong>
  1259.         <div class="app-icon-preview">
  1260.             <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
  1261.         </div>
  1262.     </script>
  1263.  
  1264.     <?php
  1265.  
  1266.     /**
  1267.      * Fires when the custom Backbone media templates are printed.
  1268.      *
  1269.      * @since 3.5.0
  1270.      */
  1271.     do_action( 'print_media_templates' );
  1272. }
  1273.