/wp-includes/media-template.php

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