WordPress 3.9.1
[autoinstalls/wordpress.git] / 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 }