WordPress.org

Make WordPress Core

Ticket #31614: media-template.php

File media-template.php, 46.1 KB (added by andrewgstreet, 6 years ago)

Suggested code modifcations

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