2012-12-06 02:10:20 -05:00
< ? php
/**
* WordPress media templates .
*
* @ package WordPress
* @ subpackage Media
* @ since 3.5 . 0
*/
2014-03-14 08:20:15 -04:00
/**
* Output the markup for a audio tag to be used in an Underscore template
2014-04-07 16:29:14 -04:00
* when data . model is passed .
2014-03-14 08:20:15 -04:00
*
* @ since 3.9 . 0
*/
function wp_underscore_audio_template () {
$audio_types = wp_get_audio_extensions ();
2018-08-16 21:51:36 -04:00
?>
2014-04-22 13:53:16 -04:00
< audio style = " visibility: hidden "
controls
2014-03-14 08:20:15 -04:00
class = " wp-audio-shortcode "
2014-03-26 08:11:14 -04:00
width = " { { _.isUndefined( data.model.width ) ? 400 : data.model.width }} "
2014-03-14 08:20:15 -04:00
preload = " { { _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }} "
< #
2017-11-30 18:11:00 -05:00
< ? php
foreach ( array ( 'autoplay' , 'loop' ) as $attr ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
if ( ! _ . isUndefined ( data . model .< ? php echo $attr ; ?> ) && data.model.<?php echo $attr; ?> ) {
#> <?php echo $attr; ?><#
2014-03-14 08:20:15 -04:00
}
< ? php endforeach ?> #>
>
< # if ( ! _.isEmpty( data.model.src ) ) { #>
< source src = " { { data.model.src }} " type = " { { wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }} " />
< # } #>
2017-11-30 18:11:00 -05:00
< ? php
foreach ( $audio_types as $type ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< # if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) { #>
< source src = " { { data.model.<?php echo $type ; ?> }} " type = " { { wp.media.view.settings.embedMimes[ '<?php echo $type ; ?>' ] }} " />
2014-03-14 08:20:15 -04:00
< # } #>
2018-08-16 21:51:36 -04:00
< ? php
2017-11-30 18:11:00 -05:00
endforeach ;
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
</ audio >
2018-08-16 21:51:36 -04:00
< ? php
2014-03-14 08:20:15 -04:00
}
/**
* Output the markup for a video tag to be used in an Underscore template
2014-04-07 16:29:14 -04:00
* when data . model is passed .
2014-03-14 08:20:15 -04:00
*
* @ since 3.9 . 0
*/
function wp_underscore_video_template () {
$video_types = wp_get_video_extensions ();
2018-08-16 21:51:36 -04:00
?>
2015-09-11 14:27:25 -04:00
< # var w_rule = '', classes = [],
2014-08-07 01:53:15 -04:00
w , h , settings = wp . media . view . settings ,
2014-12-31 15:41:24 -05:00
isYouTube = isVimeo = false ;
if ( ! _ . isEmpty ( data . model . src ) ) {
isYouTube = data . model . src . match ( / youtube | youtu\ . be / );
isVimeo = - 1 !== data . model . src . indexOf ( 'vimeo' );
}
2014-03-14 08:20:15 -04:00
2014-03-22 19:26:17 -04:00
if ( settings . contentWidth && data . model . width >= settings . contentWidth ) {
w = settings . contentWidth ;
} else {
w = data . model . width ;
}
if ( w !== data . model . width ) {
2014-06-23 16:35:18 -04:00
h = Math . ceil ( ( data . model . height * w ) / data . model . width );
2015-09-11 14:30:26 -04:00
} else {
h = data . model . height ;
2018-01-14 11:39:47 -05:00
}
2014-08-07 01:53:15 -04:00
if ( w ) {
2014-08-09 16:44:17 -04:00
w_rule = 'width: ' + w + 'px; ' ;
}
2014-12-31 15:41:24 -05:00
if ( isYouTube ) {
classes . push ( 'youtube-video' );
}
if ( isVimeo ) {
classes . push ( 'vimeo-video' );
}
2014-03-14 08:20:15 -04:00
#>
2015-09-11 14:27:25 -04:00
< div style = " { { w_rule }} " class = " wp-video " >
2014-03-14 08:20:15 -04:00
< video controls
2014-12-31 15:41:24 -05:00
class = " wp-video-shortcode { { classes.join( ' ' ) }} "
2014-08-07 01:53:15 -04:00
< # if ( w ) { #>width="{{ w }}"<# } #>
< # if ( h ) { #>height="{{ h }}"<# } #>
2014-03-14 08:20:15 -04:00
< ? php
2018-12-10 23:45:23 -05:00
$props = array (
2017-11-30 18:11:00 -05:00
'poster' => '' ,
'preload' => 'metadata' ,
);
foreach ( $props as $key => $value ) :
2014-03-14 08:20:15 -04:00
if ( empty ( $value ) ) {
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< #
if ( ! _ . isUndefined ( data . model .< ? php echo $key ; ?> ) && data.model.<?php echo $key; ?> ) {
#> <?php echo $key; ?>="{{ data.model.<?php echo $key; ?> }}"<#
2014-03-14 08:20:15 -04:00
} #>
2018-08-16 21:51:36 -04:00
< ? php
2017-11-30 18:11:00 -05:00
} else {
echo $key
?>
= " { { _.isUndefined( data.model.<?php echo $key ; ?> ) ? '<?php echo $value ; ?>' : data.model.<?php echo $key ; ?> }} "
< ? php
2014-03-14 08:20:15 -04:00
}
endforeach ;
2017-11-30 18:11:00 -05:00
?>
< #
< ? php
foreach ( array ( 'autoplay' , 'loop' ) as $attr ) :
2018-08-16 21:51:36 -04:00
?>
2018-01-14 11:39:47 -05:00
if ( ! _ . isUndefined ( data . model .< ? php echo $attr ; ?> ) && data.model.<?php echo $attr; ?> ) {
2017-11-30 18:11:00 -05:00
#> <?php echo $attr; ?><#
2014-03-14 08:20:15 -04:00
}
< ? php endforeach ?> #>
>
< # if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
< source src = " { { data.model.src }} " type = " video/youtube " />
2014-12-31 15:41:24 -05:00
< # } else if ( isVimeo ) { #>
< source src = " { { data.model.src }} " type = " video/vimeo " />
2014-03-14 08:20:15 -04:00
< # } else { #>
2014-03-22 19:26:17 -04:00
< source src = " { { data.model.src }} " type = " { { settings.embedMimes[ data.model.src.split('.').pop() ] }} " />
2014-03-14 08:20:15 -04:00
< # }
} #>
2017-11-30 18:11:00 -05:00
< ? php
foreach ( $video_types as $type ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< # if ( data.model.<?php echo $type; ?> ) { #>
< source src = " { { data.model.<?php echo $type ; ?> }} " type = " { { settings.embedMimes[ '<?php echo $type ; ?>' ] }} " />
2014-03-14 08:20:15 -04:00
< # } #>
< ? php endforeach ; ?>
{{{ data . model . content }}}
</ video >
</ div >
2018-08-16 21:51:36 -04:00
< ? php
2014-03-14 08:20:15 -04:00
}
2012-12-06 02:10:20 -05:00
/**
* Prints the templates used in the media manager .
*
* @ since 3.5 . 0
2016-08-31 11:22:31 -04:00
*
* @ global bool $is_IE
2012-12-06 02:10:20 -05:00
*/
function wp_print_media_templates () {
2016-08-31 11:22:31 -04:00
global $is_IE ;
2012-12-06 02:10:20 -05:00
$class = 'media-modal wp-core-ui' ;
2017-11-30 18:11:00 -05:00
if ( $is_IE && strpos ( $_SERVER [ 'HTTP_USER_AGENT' ], 'MSIE 7' ) !== false ) {
2012-12-06 02:10:20 -05:00
$class .= ' ie7' ;
2017-11-30 18:11:00 -05:00
}
2019-03-15 06:43:51 -04:00
$alt_text_description = sprintf (
2019-05-16 20:56:54 -04:00
/* translators: 1: link to tutorial, 2: additional link attributes, 3: accessibility text */
__ ( '<a href="%1$s" %2$s>Describe the purpose of the image%3$s</a>. Leave empty if the image is purely decorative.' ),
esc_url ( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ),
'target="_blank" rel="noopener noreferrer"' ,
2019-03-15 06:43:51 -04:00
sprintf (
'<span class="screen-reader-text"> %s</span>' ,
/* translators: accessibility text */
__ ( '(opens in a new tab)' )
2019-05-16 20:56:54 -04:00
)
2019-03-15 06:43:51 -04:00
);
2012-12-06 02:10:20 -05:00
?>
2014-05-28 23:39:15 -04:00
<!-- [ if lte IE 8 ] >
< style >
. attachment : focus {
outline : #1e8cbe solid;
}
. selected . attachment {
outline : #1e8cbe solid;
}
</ style >
<! [ endif ] -->
2012-12-06 02:10:20 -05:00
< script type = " text/html " id = " tmpl-media-frame " >
2019-08-20 18:42:51 -04:00
< div class = " media-frame-title " id = " media-frame-title " ></ div >
2012-12-06 02:10:20 -05:00
< div class = " media-frame-menu " ></ div >
< div class = " media-frame-router " ></ div >
< div class = " media-frame-content " ></ div >
< div class = " media-frame-toolbar " ></ div >
< div class = " media-frame-uploader " ></ div >
</ script >
< script type = " text/html " id = " tmpl-media-modal " >
2019-08-20 18:42:51 -04:00
< div tabindex = " 0 " class = " <?php echo $class ; ?> " role = " dialog " aria - modal = " true " aria - labelledby = " media-frame-title " >
2019-08-19 00:55:53 -04:00
< # if ( data.hasCloseButton ) { #>
< button type = " button " class = " media-modal-close " >< span class = " media-modal-icon " >< span class = " screen-reader-text " >< ? php _e ( 'Close dialog' ); ?> </span></span></button>
< # } #>
2019-08-20 18:42:51 -04:00
< div class = " media-modal-content " role = " document " ></ div >
2012-12-06 02:10:20 -05:00
</ div >
< div class = " media-modal-backdrop " ></ div >
</ script >
< script type = " text/html " id = " tmpl-uploader-window " >
< div class = " uploader-window-content " >
2015-10-28 19:08:24 -04:00
< h1 >< ? php _e ( 'Drop files to upload' ); ?> </h1>
2014-03-01 16:34:17 -05:00
</ div >
</ script >
< script type = " text/html " id = " tmpl-uploader-editor " >
< div class = " uploader-editor-content " >
2014-03-22 21:42:15 -04:00
< div class = " uploader-editor-title " >< ? php _e ( 'Drop files to upload' ); ?> </div>
2012-12-06 02:10:20 -05:00
</ div >
</ script >
< script type = " text/html " id = " tmpl-uploader-inline " >
< # var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
2014-07-10 19:06:15 -04:00
< # if ( data.canClose ) { #>
2014-08-02 16:47:16 -04:00
< button class = " close dashicons dashicons-no " >< span class = " screen-reader-text " >< ? php _e ( 'Close uploader' ); ?> </span></button>
2014-07-10 19:06:15 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
< div class = " uploader-inline-content { { messageClass }} " >
< # if ( data.message ) { #>
2015-10-28 19:08:24 -04:00
< h2 class = " upload-message " > {{ data . message }} </ h2 >
2012-12-06 02:10:20 -05:00
< # } #>
2015-10-30 18:06:24 -04:00
< ? php if ( ! _device_can_upload () ) : ?>
2015-10-28 19:08:24 -04:00
< 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>
2015-10-30 18:06:24 -04:00
< ? php elseif ( is_multisite () && ! is_upload_space_available () ) : ?>
2015-10-28 19:08:24 -04:00
< h2 class = " upload-instructions " >< ? php _e ( 'Upload Limit Exceeded' ); ?> </h2>
2013-11-26 02:52:08 -05:00
< ? php
/** This action is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
do_action ( 'upload_ui_over_quota' );
?>
2012-12-06 02:10:20 -05:00
< ? php else : ?>
< div class = " upload-ui " >
2015-10-28 19:08:24 -04:00
< h2 class = " upload-instructions drop-instructions " >< ? php _e ( 'Drop files anywhere to upload' ); ?> </h2>
2014-08-04 17:17:16 -04:00
< p class = " upload-instructions drop-instructions " >< ? php _ex ( 'or' , 'Uploader: Drop files here - or - Select Files' ); ?> </p>
2015-05-09 02:07:25 -04:00
< button type = " button " class = " browser button button-hero " >< ? php _e ( 'Select Files' ); ?> </button>
2012-12-06 02:10:20 -05:00
</ div >
< div class = " upload-inline-status " ></ div >
< div class = " post-upload-ui " >
< ? php
2013-11-26 02:52:08 -05:00
/** This action is documented in wp-admin/includes/media.php */
2012-12-06 02:10:20 -05:00
do_action ( 'pre-upload-ui' );
2013-11-26 02:52:08 -05:00
/** This action is documented in wp-admin/includes/media.php */
2012-12-06 02:10:20 -05:00
do_action ( 'pre-plupload-upload-ui' );
if ( 10 === remove_action ( 'post-plupload-upload-ui' , 'media_upload_flash_bypass' ) ) {
2013-11-26 02:52:08 -05:00
/** This action is documented in wp-admin/includes/media.php */
2012-12-06 02:10:20 -05:00
do_action ( 'post-plupload-upload-ui' );
add_action ( 'post-plupload-upload-ui' , 'media_upload_flash_bypass' );
} else {
2013-11-26 02:52:08 -05:00
/** This action is documented in wp-admin/includes/media.php */
2012-12-06 02:10:20 -05:00
do_action ( 'post-plupload-upload-ui' );
}
2014-05-07 14:25:14 -04:00
$max_upload_size = wp_max_upload_size ();
if ( ! $max_upload_size ) {
$max_upload_size = 0 ;
2012-12-06 02:10:20 -05:00
}
?>
2017-11-30 18:11:00 -05:00
< p class = " max-upload-size " >
< ? php
2014-05-07 14:25:14 -04:00
printf ( __ ( 'Maximum upload file size: %s.' ), esc_html ( size_format ( $max_upload_size ) ) );
2017-11-30 18:11:00 -05:00
?>
</ p >
2012-12-06 02:10:20 -05:00
2014-04-07 21:55:15 -04:00
< # if ( data.suggestedWidth && data.suggestedHeight ) { #>
< p class = " suggested-dimensions " >
2017-05-05 19:29:44 -04:00
< ? php
/* translators: 1: suggested width number, 2: suggested height number. */
printf ( __ ( 'Suggested image dimensions: %1$s by %2$s pixels.' ), '{{data.suggestedWidth}}' , '{{data.suggestedHeight}}' );
?>
2014-04-07 21:55:15 -04:00
</ p >
< # } #>
2013-11-26 02:52:08 -05:00
< ? php
/** This action is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
do_action ( 'post-upload-ui' );
?>
2012-12-06 02:10:20 -05:00
</ div >
< ? php endif ; ?>
</ div >
</ script >
2014-07-03 23:39:15 -04:00
< script type = " text/html " id = " tmpl-media-library-view-switcher " >
2017-11-30 18:11:00 -05:00
< a href = " <?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?> " class = " view-list " >
2014-07-13 07:05:15 -04:00
< span class = " screen-reader-text " >< ? php _e ( 'List View' ); ?> </span>
2014-07-03 23:39:15 -04:00
</ a >
2017-11-30 18:11:00 -05:00
< a href = " <?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ); ?> " class = " view-grid current " >
2014-07-13 07:05:15 -04:00
< span class = " screen-reader-text " >< ? php _e ( 'Grid View' ); ?> </span>
2014-07-03 23:39:15 -04:00
</ a >
</ script >
2012-12-06 02:10:20 -05:00
< script type = " text/html " id = " tmpl-uploader-status " >
2015-10-28 19:08:24 -04:00
< h2 >< ? php _e ( 'Uploading' ); ?> </h2>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link upload-dismiss-errors " >< span class = " screen-reader-text " >< ? php _e ( 'Dismiss Errors' ); ?> </span></button>
2012-12-06 02:10:20 -05:00
< div class = " media-progress-bar " >< div ></ div ></ div >
< div class = " upload-details " >
< span class = " upload-count " >
< span class = " upload-index " ></ span > / < span class = " upload-total " ></ span >
</ span >
< span class = " upload-detail-separator " >& ndash ; </ span >
< span class = " upload-filename " ></ span >
</ div >
< div class = " upload-errors " ></ div >
</ script >
< script type = " text/html " id = " tmpl-uploader-status-error " >
< span class = " upload-error-filename " > {{{ data . filename }}} </ span >
< span class = " upload-error-message " > {{ data . message }} </ span >
</ script >
2014-07-03 23:39:15 -04:00
< script type = " text/html " id = " tmpl-edit-attachment-frame " >
< div class = " edit-media-header " >
2014-07-16 23:55:15 -04:00
< button class = " left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #> " >< span class = " screen-reader-text " >< ? php _e ( 'Edit previous media item' ); ?> </span></button>
< button class = " right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #> " >< span class = " screen-reader-text " >< ? php _e ( 'Edit next media item' ); ?> </span></button>
2019-08-19 00:55:53 -04:00
< button type = " button " class = " media-modal-close " >< span class = " media-modal-icon " >< span class = " screen-reader-text " >< ? php _e ( 'Close dialog' ); ?> </span></span></button>
2014-07-03 23:39:15 -04:00
</ div >
2014-07-16 23:55:15 -04:00
< div class = " media-frame-title " ></ div >
2014-07-03 23:39:15 -04:00
< div class = " media-frame-content " ></ div >
</ script >
< script type = " text/html " id = " tmpl-attachment-details-two-column " >
2014-08-15 00:10:16 -04:00
< div class = " attachment-media-view { { data.orientation }} " >
2014-07-03 23:39:15 -04:00
< div class = " thumbnail thumbnail- { { data.type }} " >
< # if ( data.uploading ) { #>
< div class = " media-progress-bar " >< div ></ div ></ div >
Media: Add support for rendering PDF thumbnails.
When support for PDFs is available, on upload,
render 'Thumbnail', 'Medium', 'Large', and 'Full' sizes of
the first page, and save them in attachment meta.
Use these renders within Add Media, Media Gallery and List views,
Attachment Details, Post/Attachment Edit screens, and Attachment pages.
Support available by default via Imagick -> ImageMagick -> Ghostscript,
but can be provided by any `WP_Image_Editor` that supports PDFs.
Props adamsilverstein, azaozz, celloexpressions, desrosj, dglingren, ericlewis, ipstenu, joemcgill, joyously, markoheijnen, melchoyce, mikeschroder, tomauger.
Fixes #31050.
Built from https://develop.svn.wordpress.org/trunk@38949
git-svn-id: http://core.svn.wordpress.org/trunk@38892 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-26 03:28:32 -04:00
< # } else if ( data.sizes && data.sizes.large ) { #>
2015-11-07 11:12:27 -05:00
< img class = " details-image " src = " { { data.sizes.large.url }} " draggable = " false " alt = " " />
Media: Add support for rendering PDF thumbnails.
When support for PDFs is available, on upload,
render 'Thumbnail', 'Medium', 'Large', and 'Full' sizes of
the first page, and save them in attachment meta.
Use these renders within Add Media, Media Gallery and List views,
Attachment Details, Post/Attachment Edit screens, and Attachment pages.
Support available by default via Imagick -> ImageMagick -> Ghostscript,
but can be provided by any `WP_Image_Editor` that supports PDFs.
Props adamsilverstein, azaozz, celloexpressions, desrosj, dglingren, ericlewis, ipstenu, joemcgill, joyously, markoheijnen, melchoyce, mikeschroder, tomauger.
Fixes #31050.
Built from https://develop.svn.wordpress.org/trunk@38949
git-svn-id: http://core.svn.wordpress.org/trunk@38892 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-26 03:28:32 -04:00
< # } else if ( data.sizes && data.sizes.full ) { #>
2015-11-07 11:12:27 -05:00
< img class = " details-image " src = " { { data.sizes.full.url }} " draggable = " false " alt = " " />
2014-07-11 02:15:15 -04:00
< # } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
2015-11-07 11:12:27 -05:00
< img class = " details-image icon " src = " { { data.icon }} " draggable = " false " alt = " " />
2014-07-03 23:39:15 -04:00
< # } #>
2014-07-16 23:55:15 -04:00
< # if ( 'audio' === data.type ) { #>
< div class = " wp-media-wrapper " >
< audio style = " visibility: hidden " controls class = " wp-audio-shortcode " width = " 100% " preload = " none " >
< source type = " { { data.mime }} " src = " { { data.url }} " />
</ audio >
</ div >
2014-08-07 01:53:15 -04:00
< # } else if ( 'video' === data.type ) {
2015-09-11 14:27:25 -04:00
var w_rule = '' ;
2014-08-07 01:53:15 -04:00
if ( data . width ) {
2014-08-09 15:39:15 -04:00
w_rule = 'width: ' + data . width + 'px;' ;
2014-08-07 01:53:15 -04:00
} else if ( wp . media . view . settings . contentWidth ) {
2014-08-09 15:39:15 -04:00
w_rule = 'width: ' + wp . media . view . settings . contentWidth + 'px;' ;
2014-08-07 01:53:15 -04:00
}
#>
2015-09-11 14:27:25 -04:00
< div style = " { { w_rule }} " class = " wp-media-wrapper wp-video " >
2014-08-09 15:39:15 -04:00
< video controls = " controls " class = " wp-video-shortcode " preload = " metadata "
2014-08-07 01:53:15 -04:00
< # if ( data.width ) { #>width="{{ data.width }}"<# } #>
< # if ( data.height ) { #>height="{{ data.height }}"<# } #>
2014-07-16 23:55:15 -04:00
< # if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
< source type = " { { data.mime }} " src = " { { data.url }} " />
</ video >
</ div >
< # } #>
< div class = " attachment-actions " >
2014-09-09 05:50:15 -04:00
< # if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
2015-05-09 02:07:25 -04:00
< button type = " button " class = " button edit-attachment " >< ? php _e ( 'Edit Image' ); ?> </button>
2016-11-13 11:39:31 -05:00
< # } else if ( 'pdf' === data.subtype && data.sizes ) { #>
< ? php _e ( 'Document Preview' ); ?>
2014-07-16 23:55:15 -04:00
< # } #>
</ div >
2014-07-03 23:39:15 -04:00
</ div >
2014-07-16 23:55:15 -04:00
</ div >
< div class = " attachment-info " >
< span class = " settings-save-status " >
< span class = " spinner " ></ span >
2017-11-30 18:11:00 -05:00
< span class = " saved " >< ? php esc_html_e ( 'Saved.' ); ?> </span>
2014-07-16 23:55:15 -04:00
</ span >
2014-07-03 23:39:15 -04:00
< div class = " details " >
2014-08-07 16:32:16 -04:00
< div class = " filename " >< strong >< ? php _e ( 'File name:' ); ?> </strong> {{ data.filename }}</div>
< div class = " filename " >< strong >< ? php _e ( 'File type:' ); ?> </strong> {{ data.mime }}</div>
< div class = " uploaded " >< strong >< ? php _e ( 'Uploaded on:' ); ?> </strong> {{ data.dateFormatted }}</div>
< div class = " file-size " >< strong >< ? php _e ( 'File size:' ); ?> </strong> {{ data.filesizeHumanReadable }}</div>
2014-07-03 23:39:15 -04:00
< # if ( 'image' === data.type && ! data.uploading ) { #>
< # if ( data.width && data.height ) { #>
2018-09-08 00:20:24 -04:00
< div class = " dimensions " >< strong >< ? php _e ( 'Dimensions:' ); ?> </strong>
< ? php
/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
printf ( __ ( '%1$s by %2$s pixels' ), '{{ data.width }}' , '{{ data.height }}' );
?>
</ div >
2014-07-03 23:39:15 -04:00
< # } #>
< # } #>
2018-09-08 00:20:24 -04:00
< # if ( data.fileLength && data.fileLengthHumanReadable ) { #>
< div class = " file-length " >< strong >< ? php _e ( 'Length:' ); ?> </strong>
< span aria - hidden = " true " > {{ data . fileLength }} </ span >
< span class = " screen-reader-text " > {{ data . fileLengthHumanReadable }} </ span >
</ div >
2014-07-03 23:39:15 -04:00
< # } #>
2014-07-24 14:04:18 -04:00
< # if ( 'audio' === data.type && data.meta.bitrate ) { #>
2014-08-07 16:32:16 -04:00
< div class = " bitrate " >
< strong >< ? php _e ( 'Bitrate:' ); ?> </strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
2014-07-11 17:56:16 -04:00
< # if ( data.meta.bitrate_mode ) { #>
{{ ' ' + data . meta . bitrate_mode . toUpperCase () }}
2014-08-07 16:32:16 -04:00
< # } #>
2014-07-11 17:56:16 -04:00
</ div >
< # } #>
2014-07-03 23:39:15 -04:00
< div class = " compat-meta " >
< # if ( data.compat && data.compat.meta ) { #>
{{{ data . compat . meta }}}
< # } #>
</ div >
</ div >
2014-07-16 23:55:15 -04:00
2014-08-07 16:32:16 -04:00
< div class = " settings " >
< # var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
2019-03-15 06:43:51 -04:00
< # if ( 'image' === data.type ) { #>
< label class = " setting " data - setting = " alt " >
< span class = " name " >< ? php _e ( 'Alternative Text' ); ?> </span>
< input type = " text " value = " { { data.alt }} " aria - describedby = " alt-text-description " {{ maybeReadOnly }} />
</ label >
< p class = " description " id = " alt-text-description " >< ? php echo $alt_text_description ; ?> </p>
< # } #>
2015-06-14 16:33:26 -04:00
< ? php if ( post_type_supports ( 'attachment' , 'title' ) ) : ?>
2014-08-07 16:32:16 -04:00
< label class = " setting " data - setting = " title " >
2017-11-30 18:11:00 -05:00
< span class = " name " >< ? php _e ( 'Title' ); ?> </span>
2014-08-07 16:32:16 -04:00
< input type = " text " value = " { { data.title }} " {{ maybeReadOnly }} />
</ label >
2015-06-14 16:33:26 -04:00
< ? php endif ; ?>
2014-08-07 16:32:16 -04:00
< # if ( 'audio' === data.type ) { #>
2017-11-30 18:11:00 -05:00
< ? php
foreach ( array (
2014-08-07 16:32:16 -04:00
'artist' => __ ( 'Artist' ),
2017-11-30 18:11:00 -05:00
'album' => __ ( 'Album' ),
) as $key => $label ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< label class = " setting " data - setting = " <?php echo esc_attr( $key ); ?> " >
< span class = " name " >< ? php echo $label ; ?> </span>
< input type = " text " value = " { { data.<?php echo $key ; ?> || data.meta.<?php echo $key ; ?> || '' }} " />
2014-08-07 16:32:16 -04:00
</ label >
< ? php endforeach ; ?>
< # } #>
< label class = " setting " data - setting = " caption " >
< span class = " name " >< ? php _e ( 'Caption' ); ?> </span>
< textarea {{ maybeReadOnly }} > {{ data . caption }} </ textarea >
</ label >
< label class = " setting " data - setting = " description " >
2017-11-30 18:11:00 -05:00
< span class = " name " >< ? php _e ( 'Description' ); ?> </span>
2014-08-07 16:32:16 -04:00
< textarea {{ maybeReadOnly }} > {{ data . description }} </ textarea >
</ label >
2018-01-14 11:39:47 -05:00
< div class = " setting " >
2014-08-07 16:32:16 -04:00
< span class = " name " >< ? php _e ( 'Uploaded By' ); ?> </span>
< span class = " value " > {{ data . authorName }} </ span >
2018-01-14 11:39:47 -05:00
</ div >
2014-09-09 06:03:14 -04:00
< # if ( data.uploadedToTitle ) { #>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
2014-08-07 16:32:16 -04:00
< span class = " name " >< ? php _e ( 'Uploaded To' ); ?> </span>
2014-08-19 03:24:16 -04:00
< # if ( data.uploadedToLink ) { #>
< span class = " value " >< a href = " { { data.uploadedToLink }} " > {{ data . uploadedToTitle }} </ a ></ span >
< # } else { #>
< span class = " value " > {{ data . uploadedToTitle }} </ span >
< # } #>
2018-01-14 11:39:47 -05:00
</ div >
2014-08-07 16:32:16 -04:00
< # } #>
2019-03-15 06:43:51 -04:00
< label class = " setting " data - setting = " url " >
< span class = " name " >< ? php _e ( 'Copy Link' ); ?> </span>
< input type = " text " value = " { { data.url }} " readonly />
</ label >
2014-08-07 16:32:16 -04:00
< div class = " attachment-compat " ></ div >
2014-07-16 23:55:15 -04:00
</ div >
2014-08-15 00:10:16 -04:00
< div class = " actions " >
2014-09-09 05:50:15 -04:00
< a class = " view-attachment " href = " { { data.link }} " >< ? php _e ( 'View attachment page' ); ?> </a>
< # if ( data.can.save ) { #> |
2018-08-31 06:51:24 -04:00
< a href = " { { data.editLink }} " >< ? php _e ( 'Edit more details' ); ?> </a>
2014-09-09 05:50:15 -04:00
< # } #>
2014-08-15 00:10:16 -04:00
< # if ( ! data.uploading && data.can.remove ) { #> |
2017-11-30 18:11:00 -05:00
< ? php if ( MEDIA_TRASH ) : ?>
2014-08-15 00:10:16 -04:00
< # if ( 'trash' === data.status ) { #>
2019-04-08 19:54:52 -04:00
< button type = " button " class = " button-link untrash-attachment " >< ? php _e ( 'Restore from Trash' ); ?> </button>
2014-08-15 00:10:16 -04:00
< # } else { #>
2019-04-08 19:54:52 -04:00
< button type = " button " class = " button-link trash-attachment " >< ? php _e ( 'Move to Trash' ); ?> </button>
2014-08-15 00:10:16 -04:00
< # } #>
2017-11-30 18:11:00 -05:00
< ? php else : ?>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link delete-attachment " >< ? php _e ( 'Delete Permanently' ); ?> </button>
2014-09-09 05:50:15 -04:00
< ? php endif ; ?>
< # } #>
2014-08-15 00:10:16 -04:00
</ div >
2014-07-11 16:55:15 -04:00
2014-07-03 23:39:15 -04:00
</ div >
</ script >
2012-12-06 02:10:20 -05:00
< script type = " text/html " id = " tmpl-attachment " >
2014-07-10 11:56:15 -04:00
< div class = " attachment-preview js--select-attachment type- { { data.type }} subtype- { { data.subtype }} { { data.orientation }} " >
2014-08-05 01:20:18 -04:00
< div class = " thumbnail " >
< # if ( data.uploading ) { #>
2014-08-25 18:45:16 -04:00
< div class = " media-progress-bar " >< div style = " width: { { data.percent }}% " ></ div ></ div >
2014-08-17 22:35:17 -04:00
< # } else if ( 'image' === data.type && data.sizes ) { #>
2012-12-06 02:10:20 -05:00
< div class = " centered " >
2014-05-28 23:39:15 -04:00
< img src = " { { data.size.url }} " draggable = " false " alt = " " />
2012-12-06 02:10:20 -05:00
</ div >
2014-08-05 01:20:18 -04:00
< # } else { #>
< div class = " centered " >
2014-08-06 15:33:14 -04:00
< # if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
2015-11-07 11:12:27 -05:00
< img src = " { { data.image.src }} " class = " thumbnail " draggable = " false " alt = " " />
Media: Add support for rendering PDF thumbnails.
When support for PDFs is available, on upload,
render 'Thumbnail', 'Medium', 'Large', and 'Full' sizes of
the first page, and save them in attachment meta.
Use these renders within Add Media, Media Gallery and List views,
Attachment Details, Post/Attachment Edit screens, and Attachment pages.
Support available by default via Imagick -> ImageMagick -> Ghostscript,
but can be provided by any `WP_Image_Editor` that supports PDFs.
Props adamsilverstein, azaozz, celloexpressions, desrosj, dglingren, ericlewis, ipstenu, joemcgill, joyously, markoheijnen, melchoyce, mikeschroder, tomauger.
Fixes #31050.
Built from https://develop.svn.wordpress.org/trunk@38949
git-svn-id: http://core.svn.wordpress.org/trunk@38892 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-26 03:28:32 -04:00
< # } else if ( data.sizes && data.sizes.medium ) { #>
< img src = " { { data.sizes.medium.url }} " class = " thumbnail " draggable = " false " alt = " " />
2014-08-05 01:20:18 -04:00
< # } else { #>
2015-11-07 11:12:27 -05:00
< img src = " { { data.icon }} " class = " icon " draggable = " false " alt = " " />
2014-08-05 01:20:18 -04:00
< # } #>
</ div >
< div class = " filename " >
< div > {{ data . filename }} </ div >
</ div >
< # } #>
</ div >
2012-12-06 02:10:20 -05:00
< # if ( data.buttons.close ) { #>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link attachment-close media-modal-icon " >< span class = " screen-reader-text " >< ? php _e ( 'Remove' ); ?> </span></button>
2012-12-06 02:10:20 -05:00
< # } #>
</ div >
2014-07-17 16:42:15 -04:00
< # if ( data.buttons.check ) { #>
2017-02-09 11:47:44 -05:00
< button type = " button " class = " check " tabindex = " -1 " >< span class = " media-modal-icon " ></ span >< span class = " screen-reader-text " >< ? php _e ( 'Deselect' ); ?> </span></button>
2014-07-17 16:42:15 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
< #
var maybeReadOnly = data . can . save || data . allowLocalEdits ? '' : 'readonly' ;
2014-07-03 23:39:15 -04:00
if ( data . describe ) {
if ( 'image' === data . type ) { #>
2012-12-06 02:10:20 -05:00
< input type = " text " value = " { { data.caption }} " class = " describe " data - setting = " caption "
2017-11-30 18:11:00 -05:00
placeholder = " <?php esc_attr_e( 'Caption this image…' ); ?> " {{ maybeReadOnly }} />
2012-12-06 02:10:20 -05:00
< # } else { #>
< input type = " text " value = " { { data.title }} " class = " describe " data - setting = " title "
< # if ( 'video' === data.type ) { #>
2017-11-30 18:11:00 -05:00
placeholder = " <?php esc_attr_e( 'Describe this video…' ); ?> "
2012-12-06 02:10:20 -05:00
< # } else if ( 'audio' === data.type ) { #>
2017-11-30 18:11:00 -05:00
placeholder = " <?php esc_attr_e( 'Describe this audio file…' ); ?> "
2012-12-06 02:10:20 -05:00
< # } else { #>
2017-11-30 18:11:00 -05:00
placeholder = " <?php esc_attr_e( 'Describe this media file…' ); ?> "
2012-12-06 02:10:20 -05:00
< # } #> {{ maybeReadOnly }} />
2014-07-03 23:39:15 -04:00
< # }
2014-07-24 01:26:15 -04:00
} #>
2012-12-06 02:10:20 -05:00
</ script >
< script type = " text/html " id = " tmpl-attachment-details " >
2015-10-28 19:08:24 -04:00
< h2 >
< ? php _e ( 'Attachment Details' ); ?>
2012-12-06 02:10:20 -05:00
< span class = " settings-save-status " >
< span class = " spinner " ></ span >
2017-11-30 18:11:00 -05:00
< span class = " saved " >< ? php esc_html_e ( 'Saved.' ); ?> </span>
2012-12-06 02:10:20 -05:00
</ span >
2015-10-28 19:08:24 -04:00
</ h2 >
2012-12-06 02:10:20 -05:00
< div class = " attachment-info " >
2014-05-11 02:19:14 -04:00
< div class = " thumbnail thumbnail- { { data.type }} " >
2012-12-06 02:10:20 -05:00
< # if ( data.uploading ) { #>
< div class = " media-progress-bar " >< div ></ div ></ div >
2014-08-17 22:35:17 -04:00
< # } else if ( 'image' === data.type && data.sizes ) { #>
2015-11-07 11:12:27 -05:00
< img src = " { { data.size.url }} " draggable = " false " alt = " " />
2012-12-06 02:10:20 -05:00
< # } else { #>
2015-11-07 11:12:27 -05:00
< img src = " { { data.icon }} " class = " icon " draggable = " false " alt = " " />
2012-12-06 02:10:20 -05:00
< # } #>
</ div >
< div class = " details " >
< div class = " filename " > {{ data . filename }} </ div >
< div class = " uploaded " > {{ data . dateFormatted }} </ div >
2014-06-05 18:01:18 -04:00
< div class = " file-size " > {{ data . filesizeHumanReadable }} </ div >
2012-12-06 02:10:20 -05:00
< # if ( 'image' === data.type && ! data.uploading ) { #>
< # if ( data.width && data.height ) { #>
2018-09-08 00:20:24 -04:00
< div class = " dimensions " >
< ? php
/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
printf ( __ ( '%1$s by %2$s pixels' ), '{{ data.width }}' , '{{ data.height }}' );
?>
</ div >
2012-12-06 02:10:20 -05:00
< # } #>
2014-08-17 22:42:17 -04:00
< # if ( data.can.save && data.sizes ) { #>
2012-12-06 02:10:20 -05:00
< a class = " edit-attachment " href = " { { data.editLink }}&image-editor " target = " _blank " >< ? php _e ( 'Edit Image' ); ?> </a>
< # } #>
< # } #>
2018-09-08 00:20:24 -04:00
< # if ( data.fileLength && data.fileLengthHumanReadable ) { #>
< div class = " file-length " >< ? php _e ( 'Length:' ); ?>
< span aria - hidden = " true " > {{ data . fileLength }} </ span >
< span class = " screen-reader-text " > {{ data . fileLengthHumanReadable }} </ span >
</ div >
2013-07-23 01:39:08 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
< # if ( ! data.uploading && data.can.remove ) { #>
2017-11-30 18:11:00 -05:00
< ? php if ( MEDIA_TRASH ) : ?>
2014-08-14 14:51:19 -04:00
< # if ( 'trash' === data.status ) { #>
2019-04-08 19:54:52 -04:00
< button type = " button " class = " button-link untrash-attachment " >< ? php _e ( 'Restore from Trash' ); ?> </button>
2014-08-14 14:51:19 -04:00
< # } else { #>
2019-04-08 23:59:51 -04:00
< button type = " button " class = " button-link trash-attachment " >< ? php _e ( 'Move to Trash' ); ?> </button>
2014-08-14 14:51:19 -04:00
< # } #>
2017-11-30 18:11:00 -05:00
< ? php else : ?>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link delete-attachment " >< ? php _e ( 'Delete Permanently' ); ?> </button>
2014-03-07 11:42:14 -05:00
< ? php endif ; ?>
2012-12-06 02:10:20 -05:00
< # } #>
< div class = " compat-meta " >
< # if ( data.compat && data.compat.meta ) { #>
{{{ data . compat . meta }}}
< # } #>
</ div >
</ div >
</ div >
< # var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
2019-03-15 06:43:51 -04:00
< # if ( 'image' === data.type ) { #>
< label class = " setting " data - setting = " alt " >
< span class = " name " >< ? php _e ( 'Alt Text' ); ?> </span>
< input type = " text " value = " { { data.alt }} " aria - describedby = " alt-text-description " {{ maybeReadOnly }} />
</ label >
< p class = " description " id = " alt-text-description " >< ? php echo $alt_text_description ; ?> </p>
< # } #>
2015-06-14 16:33:26 -04:00
< ? php if ( post_type_supports ( 'attachment' , 'title' ) ) : ?>
2014-06-05 18:01:18 -04:00
< label class = " setting " data - setting = " title " >
2017-11-30 18:11:00 -05:00
< span class = " name " >< ? php _e ( 'Title' ); ?> </span>
2014-06-05 18:01:18 -04:00
< input type = " text " value = " { { data.title }} " {{ maybeReadOnly }} />
</ label >
2015-06-14 16:33:26 -04:00
< ? php endif ; ?>
2014-07-11 17:02:15 -04:00
< # if ( 'audio' === data.type ) { #>
2017-11-30 18:11:00 -05:00
< ? php
foreach ( array (
2014-07-11 17:02:15 -04:00
'artist' => __ ( 'Artist' ),
2017-11-30 18:11:00 -05:00
'album' => __ ( 'Album' ),
) as $key => $label ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< label class = " setting " data - setting = " <?php echo esc_attr( $key ); ?> " >
< span class = " name " >< ? php echo $label ; ?> </span>
< input type = " text " value = " { { data.<?php echo $key ; ?> || data.meta.<?php echo $key ; ?> || '' }} " />
2014-07-11 17:02:15 -04:00
</ label >
< ? php endforeach ; ?>
< # } #>
2014-06-05 18:01:18 -04:00
< label class = " setting " data - setting = " caption " >
2017-11-30 18:11:00 -05:00
< span class = " name " >< ? php _e ( 'Caption' ); ?> </span>
2014-06-05 18:01:18 -04:00
< textarea {{ maybeReadOnly }} > {{ data . caption }} </ textarea >
</ label >
< label class = " setting " data - setting = " description " >
2017-11-30 18:11:00 -05:00
< span class = " name " >< ? php _e ( 'Description' ); ?> </span>
2014-06-05 18:01:18 -04:00
< textarea {{ maybeReadOnly }} > {{ data . description }} </ textarea >
</ label >
2019-03-15 06:43:51 -04:00
< label class = " setting " data - setting = " url " >
< span class = " name " >< ? php _e ( 'Copy Link' ); ?> </span>
< input type = " text " value = " { { data.url }} " readonly />
</ label >
2012-12-06 02:10:20 -05:00
</ script >
< script type = " text/html " id = " tmpl-media-selection " >
< div class = " selection-info " >
< span class = " count " ></ span >
< # if ( data.editable ) { #>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link edit-selection " >< ? php _e ( 'Edit Selection' ); ?> </button>
2012-12-06 02:10:20 -05:00
< # } #>
< # if ( data.clearable ) { #>
2015-06-26 01:01:24 -04:00
< button type = " button " class = " button-link clear-selection " >< ? php _e ( 'Clear' ); ?> </button>
2012-12-06 02:10:20 -05:00
< # } #>
</ div >
< div class = " selection-view " ></ div >
</ script >
< script type = " text/html " id = " tmpl-attachment-display-settings " >
2015-10-28 19:08:24 -04:00
< h2 >< ? php _e ( 'Attachment Display Settings' ); ?> </h2>
2012-12-06 02:10:20 -05:00
< # if ( 'image' === data.type ) { #>
Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!
Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes #32417, #39993, #39994, #39995.
Built from https://develop.svn.wordpress.org/trunk@40640
git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-11 17:11:44 -04:00
< label class = " setting align " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Alignment' ); ?> </span>
2012-12-06 02:10:20 -05:00
< select class = " alignment "
data - setting = " align "
< # if ( data.userSettings ) { #>
data - user - setting = " align "
< # } #>>
< option value = " left " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Left' ); ?>
2012-12-06 02:10:20 -05:00
</ option >
< option value = " center " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Center' ); ?>
2012-12-06 02:10:20 -05:00
</ option >
< option value = " right " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Right' ); ?>
2012-12-06 02:10:20 -05:00
</ option >
< option value = " none " selected >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2012-12-06 02:10:20 -05:00
</ option >
</ select >
</ label >
< # } #>
< div class = " setting " >
< label >
2013-07-23 01:39:08 -04:00
< # if ( data.model.canEmbed ) { #>
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Embed or Link' ); ?> </span>
2013-07-23 01:39:08 -04:00
< # } else { #>
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link To' ); ?> </span>
2013-07-23 01:39:08 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
< select class = " link-to "
data - setting = " link "
2013-07-23 01:39:08 -04:00
< # if ( data.userSettings && ! data.model.canEmbed ) { #>
2012-12-06 02:10:20 -05:00
data - user - setting = " urlbutton "
< # } #>>
2013-07-23 13:29:55 -04:00
< # if ( data.model.canEmbed ) { #>
2013-07-23 01:39:08 -04:00
< option value = " embed " selected >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Embed Media Player' ); ?>
2013-07-23 01:39:08 -04:00
</ option >
< option value = " file " >
< # } else { #>
2015-08-25 08:13:23 -04:00
< option value = " none " selected >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2015-08-25 08:13:23 -04:00
</ option >
< option value = " file " >
2013-07-23 01:39:08 -04:00
< # } #>
< # if ( data.model.canEmbed ) { #>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Link to Media File' ); ?>
2013-07-23 01:39:08 -04:00
< # } else { #>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Media File' ); ?>
2013-07-23 01:39:08 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
</ option >
2013-01-04 03:02:16 -05:00
< option value = " post " >
2013-07-23 01:39:08 -04:00
< # if ( data.model.canEmbed ) { #>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Link to Attachment Page' ); ?>
2013-07-23 01:39:08 -04:00
< # } else { #>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Attachment Page' ); ?>
2013-07-23 01:39:08 -04:00
< # } #>
</ option >
< # if ( 'image' === data.type ) { #>
< option value = " custom " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Custom URL' ); ?>
2013-01-04 03:02:16 -05:00
</ option >
2013-07-23 01:39:08 -04:00
< # } #>
2012-12-06 02:10:20 -05:00
</ select >
</ label >
< input type = " text " class = " link-to-custom " data - setting = " linkUrl " />
</ div >
< # if ( 'undefined' !== typeof data.sizes ) { #>
< label class = " setting " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Size' ); ?> </span>
2012-12-06 02:10:20 -05:00
< select class = " size " name = " size "
data - setting = " size "
< # if ( data.userSettings ) { #>
data - user - setting = " imgsize "
< # } #>>
< ? php
2013-10-24 18:59:20 -04:00
/** This filter is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
$sizes = apply_filters (
2018-08-16 21:51:36 -04:00
'image_size_names_choose' ,
array (
2017-11-30 18:11:00 -05:00
'thumbnail' => __ ( 'Thumbnail' ),
'medium' => __ ( 'Medium' ),
'large' => __ ( 'Large' ),
'full' => __ ( 'Full Size' ),
)
);
foreach ( $sizes as $value => $name ) :
2018-08-16 21:51:36 -04:00
?>
2012-12-06 02:10:20 -05:00
< #
var size = data . sizes [ '<?php echo esc_js( $value ); ?>' ];
if ( size ) { #>
< option value = " <?php echo esc_attr( $value ); ?> " < ? php selected ( $value , 'full' ); ?> >
< ? php echo esc_html ( $name ); ?> – {{ size.width }} × {{ size.height }}
</ option >
< # } #>
< ? php endforeach ; ?>
</ select >
</ label >
< # } #>
</ script >
< script type = " text/html " id = " tmpl-gallery-settings " >
2015-10-28 19:08:24 -04:00
< h2 >< ? php _e ( 'Gallery Settings' ); ?> </h2>
2012-12-06 02:10:20 -05:00
< label class = " setting " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link To' ); ?> </span>
2012-12-06 02:10:20 -05:00
< select class = " link-to "
data - setting = " link "
< # if ( data.userSettings ) { #>
data - user - setting = " urlbutton "
< # } #>>
2014-07-24 15:35:15 -04:00
< option value = " post " < # if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
#>selected="selected"<# }
#>>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Attachment Page' ); ?>
2013-01-04 03:02:16 -05:00
</ option >
2014-07-24 15:35:15 -04:00
< option value = " file " < # if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Media File' ); ?>
2013-05-02 18:07:37 -04:00
</ option >
2014-07-24 15:35:15 -04:00
< option value = " none " < # if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2013-07-03 16:43:19 -04:00
</ option >
2012-12-06 02:10:20 -05:00
</ select >
</ label >
< label class = " setting " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Columns' ); ?> </span>
2012-12-06 02:10:20 -05:00
< select class = " columns " name = " columns "
data - setting = " columns " >
< ? php for ( $i = 1 ; $i <= 9 ; $i ++ ) : ?>
2014-07-24 15:35:15 -04:00
< option value = " <?php echo esc_attr( $i ); ?> " < #
2017-11-30 18:11:00 -05:00
if ( < ? php echo $i ; ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
2014-07-24 15:35:15 -04:00
#>>
2012-12-06 02:10:20 -05:00
< ? php echo esc_html ( $i ); ?>
</ option >
< ? php endfor ; ?>
</ select >
</ label >
< label class = " setting " >
2012-12-09 12:11:25 -05:00
< span >< ? php _e ( 'Random Order' ); ?> </span>
2012-12-06 02:10:20 -05:00
< input type = " checkbox " data - setting = " _orderbyRandom " />
</ label >
2014-09-28 23:45:16 -04:00
< label class = " setting size " >
< span >< ? php _e ( 'Size' ); ?> </span>
< select class = " size " name = " size "
data - setting = " size "
< # if ( data.userSettings ) { #>
data - user - setting = " imgsize "
< # } #>
>
< ? php
2016-12-27 04:28:40 -05:00
/** This filter is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
$size_names = apply_filters (
2018-08-16 21:51:36 -04:00
'image_size_names_choose' ,
array (
2017-11-30 18:11:00 -05:00
'thumbnail' => __ ( 'Thumbnail' ),
'medium' => __ ( 'Medium' ),
'large' => __ ( 'Large' ),
'full' => __ ( 'Full Size' ),
)
);
foreach ( $size_names as $size => $label ) :
2018-08-16 21:51:36 -04:00
?>
2014-09-28 23:45:16 -04:00
< option value = " <?php echo esc_attr( $size ); ?> " >
< ? php echo esc_html ( $label ); ?>
</ option >
< ? php endforeach ; ?>
</ select >
</ label >
2012-12-06 02:10:20 -05:00
</ script >
2014-02-24 13:08:16 -05:00
< script type = " text/html " id = " tmpl-playlist-settings " >
2015-10-28 19:08:24 -04:00
< h2 >< ? php _e ( 'Playlist Settings' ); ?> </h2>
2014-02-24 13:08:16 -05:00
2014-03-28 08:37:15 -04:00
< # var emptyModel = _.isEmpty( data.model ),
isVideo = 'video' === data . controller . get ( 'library' ) . props . get ( 'type' ); #>
2014-03-09 19:19:15 -04:00
< label class = " setting " >
2014-03-27 13:58:15 -04:00
< input type = " checkbox " data - setting = " tracklist " < # if ( emptyModel ) { #>
2014-02-24 15:26:14 -05:00
checked = " checked "
< # } #> />
2014-03-28 08:37:15 -04:00
< # if ( isVideo ) { #>
2014-03-27 17:10:15 -04:00
< span >< ? php _e ( 'Show Video List' ); ?> </span>
2014-03-28 08:37:15 -04:00
< # } else { #>
< span >< ? php _e ( 'Show Tracklist' ); ?> </span>
2014-03-27 17:10:15 -04:00
< # } #>
2014-02-24 13:08:16 -05:00
</ label >
2014-03-28 08:37:15 -04:00
< # if ( ! isVideo ) { #>
2014-02-24 13:08:16 -05:00
< label class = " setting " >
2014-03-27 13:58:15 -04:00
< input type = " checkbox " data - setting = " artists " < # if ( emptyModel ) { #>
2014-02-24 15:26:14 -05:00
checked = " checked "
< # } #> />
2014-03-09 19:19:15 -04:00
< span >< ? php _e ( 'Show Artist Name in Tracklist' ); ?> </span>
2014-02-24 13:08:16 -05:00
</ label >
2014-03-26 18:12:16 -04:00
< # } #>
2014-02-24 13:08:16 -05:00
< label class = " setting " >
2014-02-27 14:22:14 -05:00
< input type = " checkbox " data - setting = " images " < # if ( emptyModel ) { #>
2014-02-24 15:26:14 -05:00
checked = " checked "
< # } #> />
2014-03-09 19:19:15 -04:00
< span >< ? php _e ( 'Show Images' ); ?> </span>
2014-02-24 13:08:16 -05:00
</ label >
</ script >
2012-12-06 02:10:20 -05:00
< script type = " text/html " id = " tmpl-embed-link-settings " >
2015-03-06 10:03:25 -05:00
< label class = " setting link-text " >
< span >< ? php _e ( 'Link Text' ); ?> </span>
2015-04-06 14:25:27 -04:00
< input type = " text " class = " alignment " data - setting = " linkText " />
2012-12-06 02:10:20 -05:00
</ label >
2015-03-06 10:03:25 -05:00
< div class = " embed-container " style = " display: none; " >
< div class = " embed-preview " ></ div >
</ div >
2012-12-06 02:10:20 -05:00
</ script >
< script type = " text/html " id = " tmpl-embed-image-settings " >
< div class = " thumbnail " >
2015-11-07 11:12:27 -05:00
< img src = " { { data.model.url }} " draggable = " false " alt = " " />
2012-12-06 02:10:20 -05:00
</ div >
2019-03-15 06:43:51 -04:00
< label class = " setting alt-text has-description " >
< span >< ? php _e ( 'Alternative Text' ); ?> </span>
< input type = " text " data - setting = " alt " aria - describedby = " alt-text-description " />
</ label >
< p class = " description " id = " alt-text-description " >< ? php echo $alt_text_description ; ?> </p>
2013-11-26 02:52:08 -05:00
< ? php
/** This filter is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
if ( ! apply_filters ( 'disable_captions' , '' ) ) :
2018-08-16 21:51:36 -04:00
?>
2012-12-06 02:10:20 -05:00
< label class = " setting caption " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Caption' ); ?> </span>
2012-12-06 02:10:20 -05:00
< textarea data - setting = " caption " />
</ label >
< ? php endif ; ?>
< div class = " setting align " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Align' ); ?> </span>
2012-12-06 02:10:20 -05:00
< div class = " button-group button-large " data - setting = " align " >
< button class = " button " value = " left " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Left' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
< button class = " button " value = " center " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Center' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
< button class = " button " value = " right " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Right' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
< button class = " button active " value = " none " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
</ div >
</ div >
< div class = " setting link-to " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link To' ); ?> </span>
2012-12-06 02:10:20 -05:00
< div class = " button-group button-large " data - setting = " link " >
< button class = " button " value = " file " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Image URL' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
< button class = " button " value = " custom " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Custom URL' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
< button class = " button active " value = " none " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2012-12-06 02:10:20 -05:00
</ button >
</ div >
< input type = " text " class = " link-to-custom " data - setting = " linkUrl " />
</ div >
</ script >
2014-01-28 16:17:12 -05:00
< script type = " text/html " id = " tmpl-image-details " >
< div class = " media-embed " >
2014-03-05 10:06:14 -05:00
< div class = " embed-media-settings " >
2014-04-01 21:54:15 -04:00
< div class = " column-image " >
< div class = " image " >
2015-11-07 11:12:27 -05:00
< img src = " { { data.model.url }} " draggable = " false " alt = " " />
2014-04-01 21:54:15 -04:00
< # if ( data.attachment && window.imageEdit ) { #>
< div class = " actions " >
< input type = " button " class = " edit-attachment button " value = " <?php esc_attr_e( 'Edit Original' ); ?> " />
< input type = " button " class = " replace-attachment button " value = " <?php esc_attr_e( 'Replace' ); ?> " />
</ div >
< # } #>
</ div >
</ div >
2014-03-27 18:41:14 -04:00
< div class = " column-settings " >
2019-03-15 06:43:51 -04:00
< label class = " setting alt-text has-description " >
< span >< ? php _e ( 'Alternative Text' ); ?> </span>
< input type = " text " data - setting = " alt " value = " { { data.model.alt }} " aria - describedby = " alt-text-description " />
</ label >
< p class = " description " id = " alt-text-description " >< ? php echo $alt_text_description ; ?> </p>
2014-03-27 18:41:14 -04:00
< ? php
/** This filter is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
if ( ! apply_filters ( 'disable_captions' , '' ) ) :
2018-08-16 21:51:36 -04:00
?>
2014-03-27 18:41:14 -04:00
< label class = " setting caption " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Caption' ); ?> </span>
2014-03-27 18:41:14 -04:00
< textarea data - setting = " caption " > {{ data . model . caption }} </ textarea >
</ label >
< ? php endif ; ?>
2014-01-28 16:17:12 -05:00
2015-10-28 19:08:24 -04:00
< h2 >< ? php _e ( 'Display Settings' ); ?> </h2>
2014-03-27 18:41:14 -04:00
< div class = " setting align " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Align' ); ?> </span>
2014-03-27 18:41:14 -04:00
< div class = " button-group button-large " data - setting = " align " >
< button class = " button " value = " left " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Left' ); ?>
2014-03-27 18:41:14 -04:00
</ button >
< button class = " button " value = " center " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Center' ); ?>
2014-03-27 18:41:14 -04:00
</ button >
< button class = " button " value = " right " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Right' ); ?>
2014-03-27 18:41:14 -04:00
</ button >
< button class = " button active " value = " none " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2014-03-27 18:41:14 -04:00
</ button >
</ div >
</ div >
2014-01-28 18:21:13 -05:00
< # if ( data.attachment ) { #>
2014-04-01 21:54:15 -04:00
< # if ( 'undefined' !== typeof data.attachment.sizes ) { #>
2014-04-02 23:21:15 -04:00
< label class = " setting size " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Size' ); ?> </span>
2014-04-01 21:54:15 -04:00
< select class = " size " name = " size "
data - setting = " size "
< # if ( data.userSettings ) { #>
data - user - setting = " imgsize "
< # } #>>
< ? php
/** This filter is documented in wp-admin/includes/media.php */
2017-11-30 18:11:00 -05:00
$sizes = apply_filters (
2018-08-16 21:51:36 -04:00
'image_size_names_choose' ,
array (
2017-11-30 18:11:00 -05:00
'thumbnail' => __ ( 'Thumbnail' ),
'medium' => __ ( 'Medium' ),
'large' => __ ( 'Large' ),
'full' => __ ( 'Full Size' ),
)
);
foreach ( $sizes as $value => $name ) :
2018-08-16 21:51:36 -04:00
?>
2014-04-01 21:54:15 -04:00
< #
var size = data . sizes [ '<?php echo esc_js( $value ); ?>' ];
if ( size ) { #>
2014-04-02 23:21:15 -04:00
< option value = " <?php echo esc_attr( $value ); ?> " >
2014-04-01 21:54:15 -04:00
< ? php echo esc_html ( $name ); ?> – {{ size.width }} × {{ size.height }}
</ option >
< # } #>
< ? php endforeach ; ?>
2014-04-02 23:21:15 -04:00
< option value = " <?php echo esc_attr( 'custom' ); ?> " >
< ? php _e ( 'Custom Size' ); ?>
</ option >
2014-04-01 21:54:15 -04:00
</ select >
</ label >
< # } #>
2014-04-02 23:21:15 -04:00
< div class = " custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #> " >
< 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>
</ div >
2014-01-28 18:21:13 -05:00
< # } #>
2014-03-27 18:41:14 -04:00
< div class = " setting link-to " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link To' ); ?> </span>
2014-04-01 21:54:15 -04:00
< select data - setting = " link " >
2014-03-27 18:41:14 -04:00
< # if ( data.attachment ) { #>
2014-04-01 21:54:15 -04:00
< option value = " file " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Media File' ); ?>
2014-04-01 21:54:15 -04:00
</ option >
< option value = " post " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Attachment Page' ); ?>
2014-04-01 21:54:15 -04:00
</ option >
2014-03-27 18:41:14 -04:00
< # } else { #>
2014-04-01 21:54:15 -04:00
< option value = " file " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Image URL' ); ?>
2014-04-01 21:54:15 -04:00
</ option >
2014-03-27 18:41:14 -04:00
< # } #>
2014-04-01 21:54:15 -04:00
< option value = " custom " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'Custom URL' ); ?>
2014-04-01 21:54:15 -04:00
</ option >
< option value = " none " >
2016-08-28 14:06:30 -04:00
< ? php esc_html_e ( 'None' ); ?>
2014-04-01 21:54:15 -04:00
</ option >
</ select >
2014-03-27 18:41:14 -04:00
< input type = " text " class = " link-to-custom " data - setting = " linkUrl " />
2014-01-28 16:17:12 -05:00
</ div >
2014-04-13 00:02:15 -04:00
< div class = " advanced-section " >
2015-10-28 19:08:24 -04:00
< h2 >< button type = " button " class = " button-link advanced-toggle " >< ? php _e ( 'Advanced Options' ); ?> </button></h2>
2014-04-13 00:02:15 -04:00
< div class = " advanced-settings hidden " >
< div class = " advanced-image " >
< label class = " setting title-text " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Image Title Attribute' ); ?> </span>
2014-04-13 00:02:15 -04:00
< input type = " text " data - setting = " title " value = " { { data.model.title }} " />
</ label >
< label class = " setting extra-classes " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Image CSS Class' ); ?> </span>
2014-04-13 00:02:15 -04:00
< input type = " text " data - setting = " extraClasses " value = " { { data.model.extraClasses }} " />
</ label >
</ div >
< div class = " advanced-link " >
< div class = " setting link-target " >
2015-09-10 06:59:27 -04:00
< label >< input type = " checkbox " data - setting = " linkTargetBlank " value = " _blank " < # if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
2014-04-13 00:02:15 -04:00
</ div >
< label class = " setting link-rel " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link Rel' ); ?> </span>
2017-08-31 07:17:45 -04:00
< input type = " text " data - setting = " linkRel " value = " { { data.model.linkRel }} " />
2014-04-13 00:02:15 -04:00
</ label >
< label class = " setting link-class-name " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Link CSS Class' ); ?> </span>
2014-04-13 00:02:15 -04:00
< input type = " text " data - setting = " linkClassName " value = " { { data.model.linkClassName }} " />
</ label >
2014-03-27 18:41:14 -04:00
</ div >
2014-01-28 16:17:12 -05:00
</ div >
</ div >
2014-03-27 18:41:14 -04:00
</ div >
2014-01-28 16:17:12 -05:00
</ div >
</ div >
</ script >
2014-03-05 10:06:14 -05:00
2014-03-06 17:55:14 -05:00
< script type = " text/html " id = " tmpl-image-editor " >
2014-03-31 01:13:15 -04:00
< div id = " media-head- { { data.id }} " ></ div >
< div id = " image-editor- { { data.id }} " ></ div >
2014-03-06 17:55:14 -05:00
</ script >
2014-03-05 10:06:14 -05:00
< script type = " text/html " id = " tmpl-audio-details " >
2014-03-22 23:16:14 -04:00
< # var ext, html5types = {
mp3 : wp . media . view . settings . embedMimes . mp3 ,
ogg : wp . media . view . settings . embedMimes . ogg
}; #>
2014-03-19 01:31:15 -04:00
2014-03-08 20:01:14 -05:00
< ? php $audio_types = wp_get_audio_extensions (); ?>
2014-03-09 00:25:15 -05:00
< div class = " media-embed media-embed-details " >
2014-03-05 10:06:14 -05:00
< div class = " embed-media-settings embed-audio-settings " >
2017-11-30 18:11:00 -05:00
< ? php wp_underscore_audio_template (); ?>
2014-03-14 08:20:15 -04:00
2014-03-19 01:31:15 -04:00
< # if ( ! _.isEmpty( data.model.src ) ) {
ext = data . model . src . split ( '.' ) . pop ();
if ( html5types [ ext ] ) {
delete html5types [ ext ];
}
#>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
< label for = " audio-source " >< ? php _e ( 'URL' ); ?> </label>
< input type = " text " id = " audio-source " readonly data - setting = " src " value = " { { data.model.src }} " />
2015-06-27 10:51:26 -04:00
< button type = " button " class = " button-link remove-setting " >< ? php _e ( 'Remove audio source' ); ?> </button>
2018-01-14 11:39:47 -05:00
</ div >
2014-03-05 10:06:14 -05:00
< # } #>
< ? php
2014-03-08 20:01:14 -05:00
2017-11-30 18:11:00 -05:00
foreach ( $audio_types as $type ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< # if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
if ( ! _ . isUndefined ( html5types .< ? php echo $type ; ?> ) ) {
delete html5types .< ? php echo $type ; ?> ;
2014-03-19 01:31:15 -04:00
}
#>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
< label for = " <?php echo $type . '-source'; ?> " >< ? php echo strtoupper ( $type ); ?> </span>
< input type = " text " id = " <?php echo $type . '-source'; ?> " readonly data - setting = " <?php echo $type ; ?> " value = " { { data.model.<?php echo $type ; ?> }} " />
2015-06-27 10:51:26 -04:00
< button type = " button " class = " button-link remove-setting " >< ? php _e ( 'Remove audio source' ); ?> </button>
2018-01-14 11:39:47 -05:00
</ div >
2014-03-05 10:06:14 -05:00
< # } #>
< ? php endforeach ?>
2014-03-19 01:31:15 -04:00
< # if ( ! _.isEmpty( html5types ) ) { #>
< div class = " setting " >
2017-11-30 18:11:00 -05:00
< span >< ? php _e ( 'Add alternate sources for maximum HTML5 playback:' ); ?> </span>
2014-03-19 01:31:15 -04:00
< div class = " button-large " >
2014-03-22 23:16:14 -04:00
< # _.each( html5types, function (mime, type) { #>
< button class = " button add-media-source " data - mime = " { { mime }} " > {{ type }} </ button >
2014-03-19 01:31:15 -04:00
< # } ) #>
</ div >
</ div >
< # } #>
2014-03-05 10:06:14 -05:00
< div class = " setting preload " >
< span >< ? php _e ( 'Preload' ); ?> </span>
< div class = " button-group button-large " data - setting = " preload " >
2014-03-20 20:19:16 -04:00
< button class = " button " value = " auto " >< ? php _ex ( 'Auto' , 'auto preload' ); ?> </button>
2014-03-06 14:06:16 -05:00
< button class = " button " value = " metadata " >< ? php _e ( 'Metadata' ); ?> </button>
< button class = " button active " value = " none " >< ? php _e ( 'None' ); ?> </button>
2014-03-05 10:06:14 -05:00
</ div >
</ div >
Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!
Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes #32417, #39993, #39994, #39995.
Built from https://develop.svn.wordpress.org/trunk@40640
git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-11 17:11:44 -04:00
< label class = " setting checkbox-setting autoplay " >
2014-03-05 10:06:14 -05:00
< input type = " checkbox " data - setting = " autoplay " />
2014-04-22 16:29:14 -04:00
< span >< ? php _e ( 'Autoplay' ); ?> </span>
2014-03-05 10:06:14 -05:00
</ label >
< label class = " setting checkbox-setting " >
< input type = " checkbox " data - setting = " loop " />
2014-04-22 16:29:14 -04:00
< span >< ? php _e ( 'Loop' ); ?> </span>
2014-03-05 10:06:14 -05:00
</ label >
</ div >
</ div >
</ script >
< script type = " text/html " id = " tmpl-video-details " >
2014-03-22 23:16:14 -04:00
< # var ext, html5types = {
mp4 : wp . media . view . settings . embedMimes . mp4 ,
ogv : wp . media . view . settings . embedMimes . ogv ,
webm : wp . media . view . settings . embedMimes . webm
}; #>
2014-03-19 01:31:15 -04:00
2014-03-08 20:01:14 -05:00
< ? php $video_types = wp_get_video_extensions (); ?>
2014-03-09 00:25:15 -05:00
< div class = " media-embed media-embed-details " >
2014-03-05 10:06:14 -05:00
< div class = " embed-media-settings embed-video-settings " >
< div class = " wp-video-holder " >
2014-03-13 19:39:16 -04:00
< #
2014-12-31 15:41:24 -05:00
var w = ! data . model . width || data . model . width > 640 ? 640 : data . model . width ,
2014-03-13 19:39:16 -04:00
h = ! data . model . height ? 360 : data . model . height ;
if ( data . model . width && w !== data . model . width ) {
h = Math . ceil ( ( h * w ) / data . model . width );
}
#>
2014-03-14 08:20:15 -04:00
2017-11-30 18:11:00 -05:00
< ? php wp_underscore_video_template (); ?>
2014-03-14 08:20:15 -04:00
2014-03-19 01:31:15 -04:00
< # if ( ! _.isEmpty( data.model.src ) ) {
ext = data . model . src . split ( '.' ) . pop ();
if ( html5types [ ext ] ) {
delete html5types [ ext ];
}
#>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
< label for = " video-source " >< ? php _e ( 'URL' ); ?> </label>
< input type = " text " id = " video-source " readonly data - setting = " src " value = " { { data.model.src }} " />
2015-06-27 10:51:26 -04:00
< button type = " button " class = " button-link remove-setting " >< ? php _e ( 'Remove video source' ); ?> </button>
2018-01-14 11:39:47 -05:00
</ div >
2014-03-08 20:01:14 -05:00
< # } #>
2017-11-30 18:11:00 -05:00
< ? php
foreach ( $video_types as $type ) :
2018-08-16 21:51:36 -04:00
?>
2017-11-30 18:11:00 -05:00
< # if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
if ( ! _ . isUndefined ( html5types .< ? php echo $type ; ?> ) ) {
delete html5types .< ? php echo $type ; ?> ;
2014-03-19 01:31:15 -04:00
}
#>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
< label for = " <?php echo $type . '-source'; ?> " >< ? php echo strtoupper ( $type ); ?> </label>
< input type = " text " id = " <?php echo $type . '-source'; ?> " readonly data - setting = " <?php echo $type ; ?> " value = " { { data.model.<?php echo $type ; ?> }} " />
2015-06-27 10:51:26 -04:00
< button type = " button " class = " button-link remove-setting " >< ? php _e ( 'Remove video source' ); ?> </button>
2018-01-14 11:39:47 -05:00
</ div >
2014-03-05 10:06:14 -05:00
< # } #>
< ? php endforeach ?>
</ div >
2014-03-19 01:31:15 -04:00
< # if ( ! _.isEmpty( html5types ) ) { #>
< div class = " setting " >
2014-03-31 01:13:15 -04:00
< span >< ? php _e ( 'Add alternate sources for maximum HTML5 playback:' ); ?> </span>
2014-03-19 01:31:15 -04:00
< div class = " button-large " >
2014-03-22 23:16:14 -04:00
< # _.each( html5types, function (mime, type) { #>
< button class = " button add-media-source " data - mime = " { { mime }} " > {{ type }} </ button >
2014-03-19 01:31:15 -04:00
< # } ) #>
</ div >
</ div >
< # } #>
2014-03-09 00:25:15 -05:00
< # if ( ! _.isEmpty( data.model.poster ) ) { #>
2018-01-14 11:39:47 -05:00
< div class = " setting " >
< label for = " poster-image " >< ? php _e ( 'Poster Image' ); ?> </label>
< input type = " text " id = " poster-image " readonly data - setting = " poster " value = " { { data.model.poster }} " />
2015-06-27 10:51:26 -04:00
< button type = " button " class = " button-link remove-setting " >< ? php _e ( 'Remove poster image' ); ?> </button>
2018-01-14 11:39:47 -05:00
</ div >
2014-03-09 00:25:15 -05:00
< # } #>
2014-03-05 10:06:14 -05:00
< div class = " setting preload " >
< span >< ? php _e ( 'Preload' ); ?> </span>
< div class = " button-group button-large " data - setting = " preload " >
2014-03-20 20:19:16 -04:00
< button class = " button " value = " auto " >< ? php _ex ( 'Auto' , 'auto preload' ); ?> </button>
2014-03-08 20:01:14 -05:00
< button class = " button " value = " metadata " >< ? php _e ( 'Metadata' ); ?> </button>
< button class = " button active " value = " none " >< ? php _e ( 'None' ); ?> </button>
2014-03-05 10:06:14 -05:00
</ div >
</ div >
Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!
Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes #32417, #39993, #39994, #39995.
Built from https://develop.svn.wordpress.org/trunk@40640
git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-11 17:11:44 -04:00
< label class = " setting checkbox-setting autoplay " >
2014-03-05 10:06:14 -05:00
< input type = " checkbox " data - setting = " autoplay " />
2014-04-22 16:29:14 -04:00
< span >< ? php _e ( 'Autoplay' ); ?> </span>
2014-03-05 10:06:14 -05:00
</ label >
< label class = " setting checkbox-setting " >
< input type = " checkbox " data - setting = " loop " />
2014-04-22 16:29:14 -04:00
< span >< ? php _e ( 'Loop' ); ?> </span>
2014-03-05 10:06:14 -05:00
</ label >
2014-03-09 06:32:15 -04:00
2018-01-14 11:39:47 -05:00
< div class = " setting " data - setting = " content " >
2014-03-09 06:32:15 -04:00
< #
var content = '' ;
if ( ! _ . isEmpty ( data . model . content ) ) {
var tracks = jQuery ( data . model . content ) . filter ( 'track' );
_ . each ( tracks . toArray (), function ( track ) {
content += track . outerHTML ; #>
2018-01-14 11:39:47 -05:00
< label for = " video-track " >< ? php _e ( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?> </span>
< input class = " content-track " type = " text " id = " video-track " readonly value = " { { track.outerHTML }} " />
< button type = " button " class = " button-link remove-setting remove-track " >< ? php _ex ( 'Remove video track' , 'media' ); ?> </button>
2014-03-09 06:32:15 -04:00
< # } ); #>
< # } else { #>
2018-01-14 11:39:47 -05:00
< span >< ? php _e ( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?> </span>
2014-03-09 20:19:15 -04:00
< em >< ? php _e ( 'There are no associated subtitles.' ); ?> </em>
2014-03-09 06:32:15 -04:00
< # } #>
< textarea class = " hidden content-setting " > {{ content }} </ textarea >
2018-01-14 11:39:47 -05:00
</ div >
2014-03-05 10:06:14 -05:00
</ div >
</ div >
</ script >
2014-04-01 22:18:15 -04:00
2014-03-05 02:01:14 -05:00
< script type = " text/html " id = " tmpl-editor-gallery " >
2015-02-25 18:13:25 -05:00
< # if ( data.attachments.length ) { #>
2014-04-08 01:28:15 -04:00
< div class = " gallery gallery-columns- { { data.columns }} " >
2014-04-01 22:18:15 -04:00
< # _.each( data.attachments, function( attachment, index ) { #>
< dl class = " gallery-item " >
< dt class = " gallery-icon " >
2014-04-07 17:25:16 -04:00
< # if ( attachment.thumbnail ) { #>
2019-08-20 15:15:52 -04:00
< img src = " { { attachment.thumbnail.url }} " width = " { { attachment.thumbnail.width }} " height = " { { attachment.thumbnail.height }} " alt = " { { attachment.alt }} " />
2014-04-07 17:25:16 -04:00
< # } else { #>
2019-08-20 15:15:52 -04:00
< img src = " { { attachment.url }} " alt = " { { attachment.alt }} " />
2014-04-07 17:25:16 -04:00
< # } #>
2014-04-01 22:18:15 -04:00
</ dt >
2014-06-05 21:50:16 -04:00
< # if ( attachment.caption ) { #>
2014-05-15 17:03:15 -04:00
< dd class = " wp-caption-text gallery-caption " >
2015-10-21 16:38:26 -04:00
{{{ data . verifyHTML ( attachment . caption ) }}}
2014-05-15 17:03:15 -04:00
</ dd >
< # } #>
2014-04-01 22:18:15 -04:00
</ dl >
< # if ( index % data.columns === data.columns - 1 ) { #>
< br style = " clear: both; " >
< # } #>
< # } ); #>
</ div >
< # } else { #>
2014-04-15 20:23:15 -04:00
< div class = " wpview-error " >
2014-04-01 22:18:15 -04:00
< div class = " dashicons dashicons-format-gallery " ></ div >< p >< ? php _e ( 'No items found.' ); ?> </p>
</ div >
< # } #>
2014-03-05 02:01:14 -05:00
</ script >
2014-03-19 03:02:15 -04:00
2014-04-04 11:48:16 -04:00
< script type = " text/html " id = " tmpl-crop-content " >
2016-04-17 08:01:27 -04:00
< img class = " crop-image " src = " { { data.url }} " alt = " <?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?> " >
2014-04-04 11:48:16 -04:00
< div class = " upload-errors " ></ div >
</ script >
2015-07-20 11:57:25 -04:00
< script type = " text/html " id = " tmpl-site-icon-preview " >
< h2 >< ? php _e ( 'Preview' ); ?> </h2>
2016-04-17 08:01:27 -04:00
< strong aria - hidden = " true " >< ? php _e ( 'As a browser icon' ); ?> </strong>
2015-07-20 11:57:25 -04:00
< div class = " favicon-preview " >
2016-07-05 07:32:29 -04:00
< img src = " <?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?> " class = " browser-preview " width = " 182 " height = " " alt = " " />
2015-07-20 11:57:25 -04:00
< div class = " favicon " >
< img id = " preview-favicon " src = " { { data.url }} " alt = " <?php esc_attr_e( 'Preview as a browser icon' ); ?> " />
</ div >
2016-04-17 08:01:27 -04:00
< span class = " browser-title " aria - hidden = " true " >< ? php bloginfo ( 'name' ); ?> </span>
2015-07-20 11:57:25 -04:00
</ div >
2016-04-17 08:01:27 -04:00
< strong aria - hidden = " true " >< ? php _e ( 'As an app icon' ); ?> </strong>
2015-07-20 11:57:25 -04:00
< div class = " app-icon-preview " >
< img id = " preview-app-icon " src = " { { data.url }} " alt = " <?php esc_attr_e( 'Preview as an app icon' ); ?> " />
</ div >
</ script >
2012-12-06 02:10:20 -05:00
< ? php
2013-11-26 02:52:08 -05:00
/**
2014-03-25 04:05:15 -04:00
* Fires when the custom Backbone media templates are printed .
2013-11-26 02:52:08 -05:00
*
* @ since 3.5 . 0
*/
2012-12-06 02:10:20 -05:00
do_action ( 'print_media_templates' );
}