: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
<option value="<?php echo esc_attr( $size ); ?>">
<?php echo esc_html( $label ); ?>
<?php // Template for the Playlists settings, used for example in the sidebar. ?>
<script type="text/html" id="tmpl-playlist-settings">
<h2><?php _e( 'Playlist Settings' ); ?></h2>
<# var emptyModel = _.isEmpty( data.model ),
isVideo = 'video' === data.controller.get('library').props.get('type'); #>
<input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
<label for="playlist-settings-show-list" class="checkbox-label-inline">
<?php _e( 'Show Video List' ); ?>
<?php _e( 'Show Tracklist' ); ?>
<input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
<label for="playlist-settings-show-artist" class="checkbox-label-inline">
<?php _e( 'Show Artist Name in Tracklist' ); ?>
<input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
<label for="playlist-settings-show-images" class="checkbox-label-inline">
<?php _e( 'Show Images' ); ?>
<?php // Template for the "Insert from URL" layout. ?>
<script type="text/html" id="tmpl-embed-link-settings">
<span class="setting link-text">
<label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label>
<input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
<div class="embed-container" style="display: none;">
<div class="embed-preview"></div>
<?php // Template for the "Insert from URL" image preview and details. ?>
<script type="text/html" id="tmpl-embed-image-settings">
<div class="wp-clearfix">
<img src="{{ data.model.url }}" draggable="false" alt="" />
<span class="setting alt-text has-description">
<label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
/** This filter is documented in wp-admin/includes/media.php */
if ( ! apply_filters( 'disable_captions', '' ) ) :
<span class="setting caption">
<label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label>
<textarea id="embed-image-settings-caption" data-setting="caption"></textarea>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Align' ); ?></legend>
<span class="setting align">
<span class="button-group button-large" data-setting="align">
<button class="button" value="left">
<?php esc_html_e( 'Left' ); ?>
<button class="button" value="center">
<?php esc_html_e( 'Center' ); ?>
<button class="button" value="right">
<?php esc_html_e( 'Right' ); ?>
<button class="button active" value="none">
<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Link To' ); ?></legend>
<span class="setting link-to">
<span class="button-group button-large" data-setting="link">
<button class="button" value="file">
<?php esc_html_e( 'Image URL' ); ?>
<button class="button" value="custom">
<?php esc_html_e( 'Custom URL' ); ?>
<button class="button active" value="none">
<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
<label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
<input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
<?php // Template for the Image details, used for example in the editor. ?>
<script type="text/html" id="tmpl-image-details">
<div class="media-embed">
<div class="embed-media-settings">
<div class="column-settings">
<span class="setting alt-text has-description">
<label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
/** This filter is documented in wp-admin/includes/media.php */
if ( ! apply_filters( 'disable_captions', '' ) ) :
<span class="setting caption">
<label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
<textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
<h2><?php _e( 'Display Settings' ); ?></h2>
<fieldset class="setting-group">
<legend class="legend-inline"><?php _e( 'Align' ); ?></legend>
<span class="setting align">
<span class="button-group button-large" data-setting="align">
<button class="button" value="left">
<?php esc_html_e( 'Left' ); ?>
<button class="button" value="center">
<?php esc_html_e( 'Center' ); ?>
<button class="button" value="right">
<?php esc_html_e( 'Right' ); ?>
<button class="button active" value="none">
<?php echo esc_html_x( 'None', 'Alignment option' ); ?>
<# if ( data.attachment ) { #>
<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
<span class="setting size">
<label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
<select id="image-details-size" class="size" name="size"
<# if ( data.userSettings ) { #>
data-user-setting="imgsize"
/** This filter is documented in wp-admin/includes/media.php */
'image_size_names_choose',
'thumbnail' => __( 'Thumbnail' ),
'medium' => __( 'Medium' ),
'large' => __( 'Large' ),
'full' => __( 'Full Size' ),
foreach ( $sizes as $value => $name ) :
var size = data.sizes['<?php echo esc_js( $value ); ?>'];
<option value="<?php echo esc_attr( $value ); ?>">
<?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }}
<option value="<?php echo esc_attr( 'custom' ); ?>">
<?php _e( 'Custom Size' ); ?>
<div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
<span class="custom-size-setting">
<label for="image-details-size-width"><?php _e( 'Width' ); ?></label>
<input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
<span class="sep" aria-hidden="true">×</span>
<span class="custom-size-setting">
<label for="image-details-size-height"><?php _e( 'Height' ); ?></label>
<input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
<p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p>
<span class="setting link-to">
<label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label>
<select id="image-details-link-to" data-setting="link">
<# if ( data.attachment ) { #>
<?php esc_html_e( 'Media File' ); ?>
<?php esc_html_e( 'Attachment Page' ); ?>
<?php esc_html_e( 'Image URL' ); ?>
<?php esc_html_e( 'Custom URL' ); ?>
<?php echo esc_html_x( 'None', 'Media item link option' ); ?>
<label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
<input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
<div class="advanced-section">
<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
<div class="advanced-settings hidden">
<div class="advanced-image">
<span class="setting title-text">
<label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label>
<input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
<span class="setting extra-classes">
<label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label>
<input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
<div class="advanced-link">
<span class="setting link-target">
<input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
<label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label>
<span class="setting link-rel">
<label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label>
<input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
<span class="setting link-class-name">
<label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label>
<input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
<div class="column-image">
<img src="{{ data.model.url }}" draggable="false" alt="" />
<# if ( data.attachment && window.imageEdit ) { #>
<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' ); ?>" />
<?php // Template for the Image Editor layout. ?>
<script type="text/html" id="tmpl-image-editor">
<div id="media-head-{{ data.id }}"></div>
<div id="image-editor-{{ data.id }}"></div>
<?php // Template for an embedded Audio details. ?>
<script type="text/html" id="tmpl-audio-details">
<# var ext, html5types = {
mp3: wp.media.view.settings.embedMimes.mp3,
ogg: wp.media.view.settings.embedMimes.ogg
<?php $audio_types = wp_get_audio_extensions(); ?>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-audio-settings">
<?php wp_underscore_audio_template(); ?>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
<label for="audio-details-source" class="name"><?php _e( 'URL' ); ?></label>
<input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
foreach ( $audio_types as $type ) :
<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
delete html5types.<?php echo $type; ?>;
<label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
<input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
<# if ( ! _.isEmpty( html5types ) ) { #>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
<span class="button-large">
<# _.each( html5types, function (mime, type) { #>
<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Preload' ); ?></legend>
<span class="setting preload">
<span class="button-group button-large" data-setting="preload">
<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
<span class="setting-group">
<span class="setting checkbox-setting autoplay">
<input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
<label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
<span class="setting checkbox-setting">
<input type="checkbox" id="audio-details-loop" data-setting="loop" />
<label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
<?php // Template for an embedded Video details. ?>
<script type="text/html" id="tmpl-video-details">
<# var ext, html5types = {
mp4: wp.media.view.settings.embedMimes.mp4,
ogv: wp.media.view.settings.embedMimes.ogv,
webm: wp.media.view.settings.embedMimes.webm
<?php $video_types = wp_get_video_extensions(); ?>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-video-settings">
<div class="wp-video-holder">
var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
h = ! data.model.height ? 360 : data.model.height;
if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width );
<?php wp_underscore_video_template(); ?>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
<label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label>
<input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
foreach ( $video_types as $type ) :
<# if ( ! _.isEmpty( data.model.<?php echo $type; ?> ) ) {
if ( ! _.isUndefined( html5types.<?php echo $type; ?> ) ) {
delete html5types.<?php echo $type; ?>;
<label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
<input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
<# if ( ! _.isEmpty( html5types ) ) { #>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
<span class="button-large">
<# _.each( html5types, function (mime, type) { #>
<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
<# if ( ! _.isEmpty( data.model.poster ) ) { #>
<label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label>
<input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
<fieldset class="setting-group">
<legend class="name"><?php _e( 'Preload' ); ?></legend>
<span class="setting preload">
<span class="button-group button-large" data-setting="preload">
<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
<button class="button active" value="none"><?php _ex( 'None', 'Preload value' ); ?></button>
<span class="setting-group">
<span class="setting checkbox-setting autoplay">
<input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
<label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
<span class="setting checkbox-setting">
<input type="checkbox" id="video-details-loop" data-setting="loop" />
<label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
<span class="setting" data-setting="content">
if ( ! _.isEmpty( data.model.content ) ) {
var tracks = jQuery( data.model.content ).filter( 'track' );
_.each( tracks.toArray(), function( track, index ) {
content += track.outerHTML; #>
<label for="video-details-track-{{ index }}" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
<input class="content-track" type="text" id="video-details-track-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" />
<span class="description" id="video-details-track-desc-{{ index }}">
/* translators: 1: "srclang" HTML attribute, 2: "label" HTML attribute, 3: "kind" HTML attribute. */
__( 'The %1$s, %2$s, and %3$s values can be edited to set the video track language and kind.' ),
<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button><br />
<span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
<em><?php _e( 'There are no associated subtitles.' ); ?></em>