File: /home/dermova/public_html/me/wp-content/plugins/envira-gallery-lite/includes/admin/media-view.php
<?php
/**
* Media View class.
*
* @since 1.0.3
*
* @package Envira_Gallery
* @author Tim Carr
*/
class Envira_Gallery_Media_View {
/**
* Holds the class object.
*
* @since 1.0.0
*
* @var object
*/
public static $instance;
/**
* Path to the file.
*
* @since 1.0.0
*
* @var string
*/
public $file = __FILE__;
/**
* Holds the base class object.
*
* @since 1.0.0
*
* @var object
*/
public $base;
/**
* Primary class constructor.
*
* @since 1.0.0
*/
public function __construct() {
// Base
$this->base = ( class_exists( 'Envira_Gallery' ) ? Envira_Gallery::get_instance() : Envira_Gallery_Lite::get_instance() );
// Modals
add_filter( 'envira_gallery_media_view_strings', array( $this, 'media_view_strings' ) );
add_action( 'print_media_templates', array( $this, 'print_media_templates' ) );
}
/**
* Adds media view (modal) strings
*
* @since 1.0.3
*
* @param array $strings Media View Strings
* @return array Media View Strings
*/
public function media_view_strings( $strings ) {
return $strings;
}
/**
* Outputs backbone.js wp.media compatible templates, which are loaded into the modal
* view
*
* @since 1.0.3
*/
public function print_media_templates() {
// Always output certain print media templates
// Insert Gallery (into Visual / Text Editor)
// Use: wp.media.template( 'envira-selection' )
?>
<script type="text/html" id="tmpl-envira-selection">
<div class="media-frame-title">
<h1>{{data.modal_title}}</h1>
</div>
<div class="media-frame-content">
<div class="attachments-browser envira-gallery envira-gallery-editor">
<!-- Galleries -->
<ul class="attachments">
</ul>
<!-- Sidebar -->
<div class="media-sidebar attachment-info">
</div>
<!-- Search -->
<div class="media-toolbar">
<div class="media-toolbar-secondary">
<span class="spinner"></span>
</div>
<div class="media-toolbar-primary search-form">
<label for="envira-gallery-search" class="screen-reader-text"><?php _e( 'Search', 'envira-gallery' ); ?></label>
<input type="search" placeholder="<?php _e( 'Search', 'envira-gallery' ); ?>" id="envira-gallery-search" class="search" />
</div>
</div>
</div>
</div>
<!-- Footer Bar -->
<div class="media-frame-toolbar">
<div class="media-toolbar">
<div class="media-toolbar-primary search-form">
<button type="button" class="button media-button button-primary button-large media-button-insert" disabled="disabled">
{{data.insert_button_label}}
</button>
</div>
</div>
</div>
</script>
<?php
// Single Selection Item (Gallery or Album)
// Use: wp.media.template( 'envira-selection-item' )
?>
<script type="text/html" id="tmpl-envira-selection-item">
<div class="attachment-preview" data-id="{{ data.id }}">
<div class="thumbnail">
<#
if ( data.thumbnail != '' ) {
#>
<img src="{{ data.thumbnail }}" alt="{{ data.title }}" />
<#
}
#>
<strong>
<span>{{ data.title }}</span>
</strong>
<code>
[envira-{{ data.action }} id="{{ data.id }}"]
</code>
</div>
</div>
<a class="check">
<div class="media-modal-icon"></div>
</a>
</script>
<?php
// Selection Sidebar
// Use: wp.media.template( 'envira-selection-sidebar' )
?>
<script type="text/html" id="tmpl-envira-selection-sidebar">
<!-- Helpful Tips -->
<h3><?php _e( 'Helpful Tips', 'envira-gallery' ); ?></h3>
<strong><?php _e( 'Choosing Your Gallery', 'envira-gallery' ); ?></strong>
<p>
<?php _e( 'To choose your gallery, simply click on one of the boxes to the left. Ctrl / cmd and click to select multiple Galleries. The "Insert Gallery" button will be activated once you have selected a gallery.', 'envira-gallery' ); ?>
</p>
<strong><?php _e( 'Inserting Your Gallery', 'envira-gallery' ); ?></strong>
<p>
<?php _e( 'To insert your gallery into the editor, click on the "Insert Gallery" button below.', 'envira-gallery' ); ?>
</p>
<!-- Insert Options -->
<h3><?php _e( 'Insert Options', 'envira-gallery' ); ?></h3>
<div class="settings">
<!-- Display Title -->
<label class="setting">
<span class="name"><?php _e( 'Display Title', 'envira-gallery' ); ?></span>
<select name="title" size="1">
<option value="0" selected><?php _e( 'No', 'envira-gallery' ); ?></option>
<?php
for( $i = 1; $i <= 6; $i++ ) {
?>
<option value="h<?php echo $i; ?>"><?php echo sprintf( __( 'Yes, as Heading H%s', 'envira-gallery'), $i ); ?></option>
<?php
}
?>
</select>
</label>
<p class="description">
<?php _e( 'Prepends each inserted Gallery with the Gallery Title.', 'envira-gallery' ); ?>
</p>
</div>
</script>
<?php
// Error
// Use: wp.media.template( 'envira-gallery-error' )
?>
<script type="text/html" id="tmpl-envira-gallery-error">
<p>
{{ data.error }}
</p>
</script>
<?php
// Only load other Backbone templates if we're on an Envira CPT.
global $post;
if ( isset( $post ) ) {
$post_id = absint( $post->ID );
} else {
$post_id = 0;
}
// Bail if we're not editing an Envira Gallery
if ( get_post_type( $post_id ) != 'envira' ) {
return;
}
// Single Image Editor
// Use: wp.media.template( 'envira-meta-editor' )
?>
<script type="text/html" id="tmpl-envira-meta-editor">
<div class="edit-media-header">
<button class="left dashicons"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
</div>
<div class="media-frame-title">
<h1><?php _e( 'Edit Metadata', 'envira-gallery' ); ?></h1>
</div>
<div class="media-frame-content">
<div class="attachment-details save-ready">
<!-- Left -->
<div class="attachment-media-view portrait">
<div class="thumbnail thumbnail-image">
<img class="details-image" src="{{ data.src }}" draggable="false" />
</div>
</div>
<!-- Right -->
<div class="attachment-info">
<!-- Settings -->
<div class="settings">
<!-- Attachment ID -->
<input type="hidden" name="id" value="{{ data.id }}" />
<!-- Image Title -->
<label class="setting">
<span class="name"><?php _e( 'Title', 'envira-gallery' ); ?></span>
<input type="text" name="title" value="{{ data.title }}" />
<div class="description">
<?php _e( 'Image titles can take any type of HTML. You can adjust the position of the titles in the main Lightbox settings.', 'envira-gallery' ); ?>
</div>
</label>
<?php
if ( class_exists( 'Envira_Gallery' ) ) {
?>
<!-- Caption -->
<div class="setting">
<span class="name"><?php _e( 'Caption', 'envira-gallery' ); ?></span>
<?php
wp_editor( '', 'caption', array(
'media_buttons' => false,
'wpautop' => false,
'tinymce' => false,
'textarea_name' => 'caption',
'quicktags' => array(
'buttons' => 'strong,em,link,ul,ol,li,close'
),
'editor_height' => 100,
) );
?>
<div class="description">
<?php _e( 'Captions can take any type of HTML, and are displayed when an image is clicked.', 'envira-gallery' ); ?>
</div>
</div>
<?php
}
?>
<!-- Alt Text -->
<label class="setting">
<span class="name"><?php _e( 'Alt Text', 'envira-gallery' ); ?></span>
<input type="text" name="alt" value="{{ data.alt }}" />
<div class="description">
<?php _e( 'Very important for SEO, the Alt Text describes the image.', 'envira-gallery' ); ?>
</div>
</label>
<!-- Link -->
<label class="setting">
<span class="name"><?php _e( 'URL', 'envira-gallery' ); ?></span>
<input type="text" name="link" value="{{ data.link }}" />
<# if ( typeof( data.id ) === 'number' ) { #>
<span class="buttons">
<button class="button button-small media-file"><?php _e( 'Media File', 'envira-gallery' ); ?></button>
<button class="button button-small attachment-page"><?php _e( 'Attachment Page', 'envira-gallery' ); ?></button>
</span>
<# } #>
<span class="description">
<?php _e( 'Enter a hyperlink if you wish to link this image to somewhere other than its full size image.', 'envira-gallery' ); ?>
</span>
</label>
<?php
if ( class_exists( 'Envira_Gallery' ) ) {
?>
<!-- Link in New Window -->
<label class="setting">
<span class="name"><?php _e( 'Open URL in New Window?', 'envira-gallery' ); ?></span>
<input type="checkbox" name="link_new_window" value="1"<# if ( data.link_new_window == '1' ) { #> checked <# } #> />
<span class="description">
<?php _e( 'Opens your image links in a new browser window / tab.', 'envira-gallery' ); ?>
</span>
</label>
<?php
} else {
?>
<label class="setting">
<!-- Upgrade -->
<?php
Envira_Gallery_Notice_Admin::get_instance()->display_inline_notice(
'envira_gallery_edit_metadata',
__( 'Want Captions and more options?', 'envira-gallery' ),
__( 'By upgrading to Envira Pro, you can get access to numerous other features, including: HTML captions, open links in new windows, WooCommerce product integration and so much more!', 'envira-gallery' ),
'warning',
__( 'Click here to Upgrade', 'envira-gallery' ),
Envira_Gallery_Common_Admin::get_instance()->get_upgrade_link(),
false
);
?>
</label>
<?php
}
?>
<!-- Addons can populate the UI here -->
<div class="addons"></div>
</div>
<!-- /.settings -->
<!-- Actions -->
<div class="actions">
<a href="#" class="envira-gallery-meta-submit button media-button button-large button-primary media-button-insert" title="<?php esc_attr_e( 'Save Metadata', 'envira-gallery' ); ?>">
<?php _e( 'Save Metadata', 'envira-gallery' ); ?>
</a>
<!-- Save Spinner -->
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php _e( 'Saved.', 'envira-gallery' ); ?></span>
</span>
</div>
<!-- /.actions -->
</div>
</div>
</div>
</script>
<?php
// Bulk Image Editor
// Use: wp.media.template( 'envira-meta-bulk-editor' )
?>
<script type="text/html" id="tmpl-envira-meta-bulk-editor">
<div class="media-frame-title">
<h1><?php _e( 'Bulk Edit', 'envira-gallery' ); ?></h1>
</div>
<div class="media-frame-content">
<div class="attachment-details save-ready">
<!-- Left -->
<div class="attachment-media-view portrait">
<ul class="attachments envira-bulk-edit">
</ul>
</div>
<!-- Right -->
<div class="attachment-info">
<!-- Settings -->
<div class="settings">
<!-- Image Title -->
<label class="setting">
<span class="name"><?php _e( 'Title', 'envira-gallery' ); ?></span>
<input type="text" name="title" value="" />
<div class="description">
<?php _e( 'Image titles can take any type of HTML. You can adjust the position of the titles in the main Lightbox settings.', 'envira-gallery' ); ?>
</div>
</label>
<!-- Caption -->
<div class="setting">
<span class="name"><?php _e( 'Caption', 'envira-gallery' ); ?></span>
<?php
wp_editor( '', 'caption', array(
'media_buttons' => false,
'wpautop' => false,
'tinymce' => false,
'textarea_name' => 'caption',
'quicktags' => array(
'buttons' => 'strong,em,link,ul,ol,li,close'
),
'editor_height' => 100,
) );
?>
<div class="description">
<?php _e( 'Captions can take any type of HTML, and are displayed when an image is clicked.', 'envira-gallery' ); ?>
</div>
</div>
<!-- Alt Text -->
<label class="setting">
<span class="name"><?php _e( 'Alt Text', 'envira-gallery' ); ?></span>
<input type="text" name="alt" value="" />
<div class="description">
<?php _e( 'Very important for SEO, the Alt Text describes the image.', 'envira-gallery' ); ?>
</div>
</label>
<!-- Link -->
<label class="setting">
<span class="name"><?php _e( 'URL', 'envira-gallery' ); ?></span>
<input type="text" name="link" value="" />
<# if ( typeof( data.id ) === 'number' ) { #>
<span class="buttons">
<button class="button button-small media-file"><?php _e( 'Media File', 'envira-gallery' ); ?></button>
<button class="button button-small attachment-page"><?php _e( 'Attachment Page', 'envira-gallery' ); ?></button>
</span>
<# } #>
<span class="description">
<?php _e( 'Enter a hyperlink if you wish to link this image to somewhere other than its full size image.', 'envira-gallery' ); ?>
</span>
</label>
<!-- Link in New Window -->
<label class="setting">
<span class="name"><?php _e( 'Open URL in New Window?', 'envira-gallery' ); ?></span>
<input type="checkbox" name="link_new_window" value="1" />
<span class="description">
<?php _e( 'Opens your image links in a new browser window / tab.', 'envira-gallery' ); ?>
</span>
</label>
<!-- Addons can populate the UI here -->
<div class="addons"></div>
</div>
<!-- /.settings -->
<!-- Actions -->
<div class="actions">
<a href="#" class="envira-gallery-meta-submit button media-button button-large button-primary media-button-insert" title="<?php esc_attr_e( 'Save Metadata to Items', 'envira-gallery' ); ?>">
<?php _e( 'Save Metadata', 'envira-gallery' ); ?>
</a>
<!-- Save Spinner -->
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php _e( 'Saved.', 'envira-gallery' ); ?></span>
</span>
</div>
<!-- /.actions -->
</div>
</div>
</div>
</script>
<?php
// Bulk Image Editor Image
// Use: wp.media.template( 'envira-meta-bulk-editor-image' )
?>
<script type="text/html" id="tmpl-envira-meta-bulk-editor-image">
<div class="attachment-preview">
<div class="thumbnail">
<div class="centered">
<img src={{ data._thumbnail }} />
</div>
</div>
</div>
</script>
<?php
/**
* Move Images to Gallery
*/
// Selection Sidebar
// Use: wp.media.template( 'envira-meta-move-media-sidebar' )
?>
<script type="text/html" id="tmpl-envira-meta-move-media-sidebar">
<!-- Helpful Tips -->
<h3><?php _e( 'Helpful Tips', 'envira-gallery' ); ?></h3>
<p>
<?php _e( 'Select the Gallery to move the selected images to by clicking on one of the boxes to the left.', 'envira-gallery' ); ?>
</p>
<p>
<?php _e( 'Once done, click the Move button, and the selected images will be moved to the chosen Gallery.', 'envira-gallery' ); ?>
</p>
</script>
<?php
/**
* Insert from Third Party Sources
*/
// Search
// Use: wp.media.template( 'envira-gallery-search-bar' )
?>
<script type="text/html" id="tmpl-envira-gallery-search-bar">
<div class="media-toolbar">
<div class="media-toolbar-secondary">
<span class="spinner"></span>
</div>
<div class="media-toolbar-primary search-form">
<label for="envira-gallery-search" class="screen-reader-text"><?php _e( 'Search', 'envira-gallery' ); ?></label>
<input type="search" placeholder="<?php _e( 'Search', 'envira-gallery' ); ?>" id="envira-gallery-search" class="search" />
</div>
</div>
</script>
<?php
// Folders and Items
// Use: wp.media.template( 'envira-gallery-items' )
?>
<script type="text/html" id="tmpl-envira-gallery-items">
<ul class="attachments envira-gallery-attachments"></ul>
</script>
<?php
// Single Folder or Image (Item)
// Use: wp.media.template( 'envira-gallery-item' )
?>
<script type="text/html" id="tmpl-envira-gallery-item">
<# if ( ! data.is_dir ) { #>
<div class="attachment-preview js--select-attachment type-image subtype-<# data.mime_type #>" data-id="{{ data.id }}" data-is-dir="{{ data.is_dir }}">
<div class="thumbnail">
<div class="centered">
<img src="{{ data.thumbnail }}" draggable="false" alt="{{ data.title }}" />
</div>
</div>
</div>
<button type="button" class="button-link check" tabindex="-1">
<span class="media-modal-icon"></span>
</button>
<# } else { #>
<div class="attachment-preview" data-id="{{ data.id }}" data-is-dir="{{ data.is_dir }}">
<div class="thumbnail">
<span class="dashicons dashicons-portfolio"></span>
<span>{{ data.title }}</span>
</div>
</div>
<# } #>
</script>
<?php
}
/**
* Returns the singleton instance of the class.
*
* @since 1.0.0
*
* @return object The Envira_Gallery_Media_View object.
*/
public static function get_instance() {
if ( ! isset( self::$instance ) && ! ( self::$instance instanceof Envira_Gallery_Media_View ) ) {
self::$instance = new Envira_Gallery_Media_View();
}
return self::$instance;
}
}
// Load the media class.
$envira_gallery_media_view = Envira_Gallery_Media_View::get_instance();