PageRenderTime 58ms CodeModel.GetById 16ms RepoModel.GetById 0ms app.codeStats 0ms

/wp-includes/media-template.php

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