PageRenderTime 49ms CodeModel.GetById 14ms RepoModel.GetById 0ms app.codeStats 1ms

/wp-includes/media-template.php

https://github.com/markjaquith/WordPress
PHP | 1513 lines | 1339 code | 111 blank | 63 comment | 58 complexity | dc68ec82e4e34437a5533120633d4d20 MD5 | raw file
Possible License(s): GPL-2.0, AGPL-1.0, LGPL-2.1

Large files files are truncated, but you can click here to view the full file

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

Large files files are truncated, but you can click here to view the full file