<?php
/**
 * Shortcode class.
 *
 * @since 1.0.0
 *
 * @package Envira_Gallery
 * @author  Envira Gallery Team
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Envira Gallery Shortcode
 *
 * @since 1.0.0
 */
class Envira_Gallery_Shortcode {

	/**
	 * 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;

	/**
	 * Holds the gallery data.
	 *
	 * @since 1.0.0
	 *
	 * @var array
	 */
	public $data;

	/**
	 * Holds gallery IDs for init firing checks.
	 *
	 * @since 1.0.0
	 *
	 * @var array
	 */
	public $done = [];

	/**
	 * Iterator for galleries on the page.
	 *
	 * @since 1.0.0
	 *
	 * @var int
	 */
	public $counter = 1;

	/**
	 * Holds image URLs for indexing.
	 *
	 * @since 1.0.0
	 *
	 * @var array
	 */
	public $index = [];

	/**
	 * Helper for gallery data
	 *
	 * @var array
	 */
	public $gallery_data = [];

	/**
	 * Holds Common Class
	 *
	 * @var object
	 */
	public $common;

	/**
	 * Mobile check
	 *
	 * @var boolean
	 */
	public $is_mobile;

	/**
	 * Allowed Html
	 *
	 * @var array
	 */
	public $wp_kses_allowed_html = [
		'a'      => [
			'href'                => [],
			'target'              => [],
			'class'               => [],
			'title'               => [],
			'data-status'         => [],
			'data-envira-tooltip' => [],
			'data-id'             => [],
		],
		'br'     => [],
		'img'    => [
			'src'   => [],
			'class' => [],
			'alt'   => [],
		],
		'div'    => [
			'class' => [],
		],
		'li'     => [
			'id'                              => [],
			'class'                           => [],
			'data-envira-gallery-image'       => [],
			'data-envira-gallery-image-model' => [],
		],
		'em'     => [],
		'span'   => [
			'class' => [],
		],
		'strong' => [],
	];

	/**
	 * Primary class constructor.
	 *
	 * @since 1.0.0
	 */
	public function __construct() {

		// Load the base class object.
		$this->base      = Envira_Gallery_Lite::get_instance();
		$this->common    = Envira_Gallery_Common::get_instance();
		$this->is_mobile = envira_lite_mobile_detect()->isMobile();

		// Register main gallery style.
		wp_register_style( $this->base->plugin_slug . '-style', plugins_url( 'assets/css/envira.css', $this->base->file ), [], $this->base->version );
		wp_register_style( $this->base->plugin_slug . '-fancybox', plugins_url( 'assets/css/fancybox.css', $this->base->file ), [], $this->base->version );
		wp_register_style( $this->base->plugin_slug . '-lazyload', plugins_url( 'assets/css/responsivelyLazy.css', $this->base->file ), [], $this->base->version );
		wp_register_style( $this->base->plugin_slug . '-jgallery', plugins_url( 'assets/css/justifiedGallery.css', $this->base->file ), [], $this->base->version );

		// Register main gallery script.
		wp_register_script( $this->base->plugin_slug . '-script', plugins_url( 'assets/js/min/envira-min.js', $this->base->file ), [ 'jquery', 'jquery-masonry' ], $this->base->version, true );

		// Load hooks and filters.
		add_shortcode( 'envira-gallery', [ $this, 'shortcode' ] );
		add_filter( 'widget_text', 'do_shortcode' );

		add_filter( 'style_loader_tag', [ $this, 'add_stylesheet_property_attribute' ] );
	}

	/**
	 * Creates the shortcode for the plugin.
	 *
	 * @since 1.0.0
	 *
	 * @global object $post The current post object.
	 *
	 * @param array $atts Array of shortcode attributes.
	 * @return string     The gallery output.
	 */
	public function shortcode( $atts ) {

		if ( is_admin() ) {
			return;
		}
		global $post;

		// If no attributes have been passed, the gallery should be pulled from the current post.
		$gallery_id = false;
		if ( empty( $atts ) ) {
			$gallery_id = $post->ID;
			$data       = is_preview() ? $this->base->_get_gallery( $gallery_id ) : $this->base->get_gallery( $gallery_id );
		} elseif ( isset( $atts['id'] ) ) {
			$gallery_id = (int) $atts['id'];
			$data       = is_preview() ? $this->base->_get_gallery( $gallery_id ) : $this->base->get_gallery( $gallery_id );
		} elseif ( isset( $atts['slug'] ) ) {
			$gallery_id = $atts['slug'];
			$data       = is_preview() ? $this->base->_get_gallery_by_slug( $gallery_id ) : $this->base->get_gallery_by_slug( $gallery_id );
		} else {
			// A custom attribute must have been passed. Allow it to be filtered to grab data from a custom source.
			$data       = apply_filters( 'envira_gallery_custom_gallery_data', false, $atts, $post );
			$gallery_id = $data['config']['id'];
		}

		// Change the gallery order, if specified.
		$data = $this->maybe_sort_gallery( $data, $gallery_id );

		// Limit the number of images returned, if specified.
		// [envira-gallery id="123" limit="10"] would only display 10 images.
		if ( isset( $atts['limit'] ) && is_numeric( $atts['limit'] ) ) {
			$images          = $data['gallery'];
			$images          = array_slice( $data['gallery'], 0, absint( $atts['limit'] ), true );
			$data['gallery'] = $images;
		}

		// Allow the data to be filtered before it is stored and used to create the gallery output.
		$data = apply_filters( 'envira_gallery_pre_data', $data, $gallery_id );

		// If there is no data to output or the gallery is inactive, do nothing.
		if ( ! $data || empty( $data['gallery'] ) || isset( $data['status'] ) && 'inactive' === $data['status'] && ! is_preview() ) {
			return;
		}

		$this->gallery_data = $data;

		// Get rid of any external plugins trying to jack up our stuff where a gallery is present.
		$this->plugin_humility();

		// Prepare variables.
		$this->data[ $data['id'] ]  = $this->gallery_data;
		$this->index[ $data['id'] ] = [];
		$gallery                    = '';
		$i                          = 1;

		// If this is a feed view, customize the output and return early.
		if ( is_feed() ) {
			return $this->do_feed_output( $data );
		}

		$lazy_loading_delay = isset( $this->gallery_data['config']['lazy_loading_delay'] ) ? intval( $this->gallery_data['config']['lazy_loading_delay'] ) : 500;

		// Load scripts and styles.
		wp_enqueue_style( $this->base->plugin_slug . '-style' );
		wp_enqueue_style( $this->base->plugin_slug . '-lazyload' );
		wp_enqueue_style( $this->base->plugin_slug . '-fancybox' );
		wp_enqueue_style( $this->base->plugin_slug . '-jgallery' );
		wp_enqueue_script( 'jquery-masonry' );
		wp_enqueue_script( $this->base->plugin_slug . '-script' );
		// If lazy load is active, load the lazy load script.
		if ( $this->get_config( 'lazy_loading', $data ) === 1 ) {
			wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load', [ 'true' ] );
			wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load_initial', [ 'false' ] );
			wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load_delay', [ (string) $lazy_loading_delay ] );
		}

		// Load custom gallery themes if necessary.
		if ( 'base' !== $this->get_config( 'gallery_theme', $this->gallery_data ) && $this->get_config( 'columns', $this->gallery_data ) > 0 ) {
			// if columns is zero, then it's automattic which means we do not load gallery themes because it will mess up the new javascript layout.
			$this->load_gallery_theme( $this->get_config( 'gallery_theme', $this->gallery_data ) );
		}

		// Load custom lightbox themes if necessary.
		if ( 'base' !== $this->get_config( 'lightbox_theme', $this->gallery_data ) ) {
			$this->load_lightbox_theme( $this->get_config( 'lightbox_theme', $this->gallery_data ) );
		}

		// Load gallery init code in the footer.
		add_action( 'wp_footer', [ $this, 'gallery_init' ], 1000 );

		// Run a hook before the gallery output begins but after scripts and inits have been set.
		do_action( 'envira_gallery_before_output', $this->gallery_data );

		// Apply a filter before starting the gallery HTML.
		$gallery = apply_filters( 'envira_gallery_output_start', $gallery, $this->gallery_data );

		// Build out the gallery HTML.
		$gallery    .= '<div id="envira-gallery-wrap-' . sanitize_html_class( $this->gallery_data['id'] ) . '" class="' . $this->get_gallery_classes( $this->gallery_data ) . '" itemscope itemtype="https://schema.org/ImageGallery">';
			$gallery = apply_filters( 'envira_gallery_output_before_container', $gallery, $this->gallery_data );

		// Description.
		if ( isset( $this->gallery_data['config']['description_position'] ) && 'above' === $this->gallery_data['config']['description_position'] ) {
			$gallery = $this->description( $gallery, $this->gallery_data );
		}

			$opacity_insert = false;
		if ( $this->get_config( 'columns', $this->gallery_data ) === 0 ) {
			$opacity_insert = ' style="opacity: 0.0" ';
		}

			// add justified CSS?
			$extra_css               = 'envira-gallery-justified-public';
			$row_height              = false;
			$justified_gallery_theme = false;
		if ( $this->get_config( 'columns', $this->gallery_data ) > 0 ) {
			$extra_css = false;
		} else {
			$row_height              = $this->get_config( 'justified_row_height', $this->gallery_data );
			$justified_gallery_theme = $this->get_config( 'justified_gallery_theme', $this->gallery_data );
		}

			$gallery .= '<div' . $opacity_insert . ' data-row-height="' . $row_height . '" data-gallery-theme="' . $justified_gallery_theme . '" id="envira-gallery-' . sanitize_html_class( $this->gallery_data['id'] ) . '" class="envira-gallery-public ' . $extra_css . ' envira-gallery-' . sanitize_html_class( $this->get_config( 'columns', $this->gallery_data ) ) . '-columns envira-clear' . ( $this->get_config( 'isotope', $this->gallery_data ) ? ' enviratope' : '' ) . ( $this->get_config( 'css_animations', $this->gallery_data ) ? ' envira-gallery-css-animations' : '' ) . '" data-envira-columns="' . $this->get_config( 'columns', $this->gallery_data ) . '">';

				// Start image loop.
		foreach ( $data['gallery'] as $id => $item ) {

			// Add the gallery item to the markup.
			$gallery = $this->generate_gallery_item_markup( $gallery, $this->gallery_data, $item, $id, $i );

			// Increment the iterator.
			++$i;

		}
				// End image loop.

			$gallery .= '</div>';
			// Description.
		if ( isset( $this->gallery_data['config']['description_position'] ) && 'below' === $this->gallery_data['config']['description_position'] ) {
			$gallery = $this->description( $gallery, $this->gallery_data );
		}

			$gallery = apply_filters( 'envira_gallery_output_after_container', $gallery, $this->gallery_data );

		$gallery .= '</div>';
		$gallery  = apply_filters( 'envira_gallery_output_end', $gallery, $this->gallery_data );

		// Increment the counter.
		++$this->counter;

		// Remove any contextual filters so they don't affect other galleries on the page.
		if ( $this->get_config( 'mobile', $this->gallery_data ) ) {
			remove_filter( 'envira_gallery_output_image_attr', [ $this, 'mobile_image' ], 999, 4 );
		}

		// Add no JS fallback support.
		$no_js    = '<noscript>';
		$no_js   .= $this->get_indexable_images( $this->gallery_data['id'] );
		$no_js   .= '</noscript>';
		$gallery .= $no_js;

		// Return the gallery HTML.
		return apply_filters( 'envira_gallery_output', $gallery, $this->gallery_data );
	}


	/**
	 * Outputs an individual gallery item in the grid
	 *
	 * @since 1.4.2.1
	 *
	 * @param    string $gallery    Gallery HTML.
	 * @param    array  $data       Gallery Config.
	 * @param    array  $item       Gallery Item (Image).
	 * @param    int    $id         Gallery Image ID.
	 * @param    int    $i          Index.
	 * @return   string              Gallery HTML.
	 */
	public function generate_gallery_item_markup( $gallery, $data, $item, $id, $i ) {

		// Get some config values that we'll reuse for each image.
		$padding             = absint( round( $this->get_config( 'gutter', $data ) / 2 ) );
		$html5_attribute     = ( ( $this->get_config( 'html5', $data ) === '1' ) ? 'data-envirabox-group' : 'rel' );
		$thumbnail_start_url = get_bloginfo( 'url' ) . '/' . get_bloginfo( 'url' );

		// Skip over images that are pending (ignore if in Preview mode).
		if ( isset( $item['status'] ) && 'pending' === $item['status'] && ! is_preview() ) {
			return $gallery;
		}

		$item = apply_filters( 'envira_gallery_output_item_data', $item, $id, $data, $i );

		// Get image and image retina URLs
		// These calls will generate thumbnails as necessary for us.
		$imagesrc         = $this->get_image_src( $id, $item, $data );
		$image_src_retina = apply_filters( 'envira_gallery_output_item_src_retina', $this->get_image_src( $id, $item, $data, false, true ), $item, $id, $data, $i, $this->is_mobile );
		$placeholder      = wp_get_attachment_image_src( $id, 'medium' ); // $placeholder is null because $id is 0 for instagram?
		// Filter output before starting this gallery item.
		$gallery = apply_filters( 'envira_gallery_output_before_item', $gallery, $id, $item, $data, $i );

		// Maybe change the item's link if it is an image and we have an image size defined for the Lightbox.
		$item = $this->maybe_change_link( $id, $item, $data );

		// Non-ASCII filenames fail when FILTER_VALIDATE_URL is applied to them when saving a gallery to generate thumbs.
		// This resulted in the blog URL being prepended to the URL, therefore breaking the thumbnail URL.
		// This reverts that change for the few edge cases where this happened.
		if ( ! empty( $item['thumb'] ) && strpos( $item['thumb'], $thumbnail_start_url ) !== false ) {
			$item['thumb'] = str_replace( $thumbnail_start_url, get_bloginfo( 'url' ) . '/', $item['thumb'] );
		} elseif ( ! isset( $item['thumb'] ) ) {
			// this must be at least defined.
			$item['thumb'] = false;
		}

		$output = '<div id="envira-gallery-item-' . sanitize_html_class( $id ) . '" class="' . $this->get_gallery_item_classes( $item, $i, $data ) . '" style="padding-left: ' . $padding . 'px; padding-bottom: ' . $this->get_config( 'margin', $data ) . 'px; padding-right: ' . $padding . 'px;" ' . apply_filters( 'envira_gallery_output_item_attr', '', $id, $item, $data, $i ) . ' itemscope itemtype="https://schema.org/ImageObject">';

		$output .= '<div class="envira-gallery-item-inner">';
		$output  = apply_filters( 'envira_gallery_output_before_link', $output, $id, $item, $data, $i );

		// Top Left box.

		$css_class = false; // no css classes yet.
		$css_class = apply_filters( 'envira_gallery_output_dynamic_position_css', $css_class, $output, $id, $item, $data, $i, 'top-left' );

		$output .= '<div class="envira-gallery-position-overlay ' . $css_class . ' envira-gallery-top-left">';
		$output  = apply_filters( 'envira_gallery_output_dynamic_position', $output, $id, $item, $data, $i, 'top-left' );
		$output .= '</div>';

		// Top Right box.

		$css_class = false; // no css classes yet.
		$css_class = apply_filters( 'envira_gallery_output_dynamic_position_css', $css_class, $output, $id, $item, $data, $i, 'top-right' );

		$output .= '<div class="envira-gallery-position-overlay ' . $css_class . ' envira-gallery-top-right">';
		$output  = apply_filters( 'envira_gallery_output_dynamic_position', $output, $id, $item, $data, $i, 'top-right' );
		$output .= '</div>';

		// Bottom Left box.

		$css_class = false; // no css classes yet.
		$css_class = apply_filters( 'envira_gallery_output_dynamic_position_css', $css_class, $output, $id, $item, $data, $i, 'bottom-left' );

		$output .= '<div class="envira-gallery-position-overlay ' . $css_class . ' envira-gallery-bottom-left">';
		$output  = apply_filters( 'envira_gallery_output_dynamic_position', $output, $id, $item, $data, $i, 'bottom-left' );
		$output .= '</div>';

		// Bottom Right box.
		$css_class = false; // no css classes yet.
		$css_class = apply_filters( 'envira_gallery_output_dynamic_position_css', $css_class, $output, $id, $item, $data, $i, 'bottom-right' );

		$output .= '<div class="envira-gallery-position-overlay ' . $css_class . ' envira-gallery-bottom-right">';
		$output  = apply_filters( 'envira_gallery_output_dynamic_position', $output, $id, $item, $data, $i, 'bottom-right' );
		$output .= '</div>';

		$title = esc_html( wp_strip_all_tags( htmlspecialchars( $item['title'], ENT_QUOTES, 'UTF-8' ) ) );
		$title = htmlentities( $title, ENT_QUOTES, 'UTF-8' );

		// Caption.
		// Lite doesn't support captions, so we fallback to the title.
		$caption = $title;

		// Determine if we create a link.
		// If the user has disabled lightbox, there should not be a link.
		// "Turn off the lightbox then the image shouldn't be clicked".
		$create_link = ! empty( $item['link'] ) && (
			( $this->get_config( 'gallery_link_enabled', $data ) || $this->get_config( 'lightbox_enabled', $data ) )
		) ? true : false;

		// Filter the ability to create a link.
		$create_link = apply_filters( 'envira_gallery_create_link', $create_link, $data, $id, $item, $i, $this->is_mobile );

		if ( $create_link ) {
			$output .= '<a href="' . esc_url( $item['link'] ) . '" class="' . ( ( isset( $item['link_new_window'] ) && true === boolval( $item['link_new_window'] ) ) ? '' : 'envira-gallery-' . sanitize_html_class( $data['id'] ) . ' ' ) . 'envira-gallery-link" ' . $html5_attribute . '="enviragallery' . sanitize_html_class( $data['id'] ) . '" title="' . $title . '" data-envira-caption="' . $caption . '" data-envira-retina="' . ( isset( $item['lightbox_retina_image'] ) ? $item['lightbox_retina_image'] : '' ) . '" data-thumbnail="' . esc_url( $item['thumb'] ) . '"' . ( ( isset( $item['link_new_window'] ) && true === boolval( $item['link_new_window'] ) ) ? ' target="_blank"' : '' ) . ' ' . apply_filters( 'envira_gallery_output_link_attr', '', $id, $item, $data, $i ) . ' itemprop="contentUrl">';
		}

		$output = apply_filters( 'envira_gallery_output_before_image', $output, $id, $item, $data, $i );

		$gallery_theme = intval( $this->get_config( 'columns', $data ) ) === 0 ? ' envira-' . $this->get_config( 'justified_gallery_theme', $data ) : '';

		// Build the image and allow filtering.
		// How we build the html depends on the lazy load script.
		// Check if user has lazy loading on - if so, we add the css class.
		$envira_lazy_load = intval( $this->get_config( 'lazy_loading', $data ) ) === 1 ? 'envira-lazy' : '';

		// Determine/confirm the width/height of the image.
		// $placeholder should hold it but not for instagram.
		if ( 'mobile' === $this->is_mobile && ! $this->get_config( 'mobile', $data ) ) { // if the user is viewing on mobile AND user unchecked 'Create Mobile Gallery Images?' in mobile tab.
			$output_src = $item['src'];
		} elseif ( $this->get_config( 'crop', $data ) ) { // the user has selected the image to be cropped.
			$output_src = $imagesrc;
		} elseif ( $this->get_config( 'image_size', $data ) && $imagesrc ) { // use the image being provided thanks to the user selecting a unique image size.
			$output_src = $imagesrc;
		} elseif ( ! empty( $item['width'] ) ) {
			$output_src = $item['src'];
		} elseif ( ! empty( $placeholder[0] ) ) {
			$output_src = $placeholder[0];
		} else {
			$output_src = false;
		}

		if ( $this->get_config( 'crop', $data ) && $this->get_config( 'crop_width', $data ) && $this->get_config( 'image_size', $data ) !== 'full' ) {
			$output_width = $this->get_config( 'crop_width', $data );
		} elseif ( intval( $this->get_config( 'columns', $data ) ) !== 0 && $this->get_config( 'image_size', $data ) && $this->get_config( 'image_size', $data ) !== 'full' && $this->get_config( 'crop_width', $data ) && $this->get_config( 'crop_height', $data ) ) {
			$output_width = $this->get_config( 'crop_width', $data );
		} elseif ( ! empty( $item['width'] ) ) {
			$output_width = $item['width'];
		} elseif ( ! empty( $placeholder[1] ) ) {
			$output_width = $placeholder[1];
		} else {
			$output_width = false;
		}

		if ( $this->get_config( 'crop', $data ) && $this->get_config( 'crop_width', $data ) && $this->get_config( 'image_size', $data ) !== 'full' ) {
			$output_height = $this->get_config( 'crop_height', $data );
		} elseif ( intval( $this->get_config( 'columns', $data ) ) !== 0 && $this->get_config( 'image_size', $data ) && $this->get_config( 'image_size', $data ) !== 'full' && $this->get_config( 'crop_width', $data ) && $this->get_config( 'crop_height', $data ) ) {
			$output_height = $this->get_config( 'crop_height', $data );
		} elseif ( ! empty( $item['height'] ) ) {
			$output_height = $item['height'];
		} elseif ( ! empty( $placeholder[2] ) ) {
			$output_height = $placeholder[2];
		} else {
			$output_height = false;
		}

		if ( intval( $this->get_config( 'columns', $data ) ) === 0 ) {

			// Automatic.

			$output_item = '<img id="envira-gallery-image-' . sanitize_html_class( $id ) . '" class="envira-gallery-image envira-gallery-image-' . $i . $gallery_theme . ' ' . $envira_lazy_load . '" data-envira-index="' . $i . '" src="' . esc_url( $output_src ) . '"' . ( $this->get_config( 'dimensions', $data ) ? ' width="' . $this->get_config( 'crop_width', $data ) . '" height="' . $this->get_config( 'crop_height', $data ) . '"' : '' ) . ' data-envira-src="' . esc_url( $output_src ) . '" data-envira-gallery-id="' . $data['id'] . '" data-envira-item-id="' . $id . '" data-envira-caption="' . $caption . '" alt="' . esc_attr( $item['alt'] ) . '" title="' . wp_strip_all_tags( htmlspecialchars( $item['title'] ) ) . '" ' . apply_filters( 'envira_gallery_output_image_attr', '', $id, $item, $data, $i ) . ' itemprop="thumbnailUrl" data-envira-srcset="' . esc_url( $output_src ) . ' 400w,' . esc_url( $output_src ) . ' 2x" data-envira-width="' . $output_width . '" data-envira-height="' . $output_height . '" srcset="' . ( ( $envira_lazy_load ) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : esc_url( $image_src_retina ) . ' 2x' ) . '" data-safe-src="' . ( ( $envira_lazy_load ) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : esc_url( $output_src ) ) . '" />';

		} else {

			// Legacy.

			$output_item = false;

			if ( $envira_lazy_load ) {

				if ( $output_height > 0 && $output_width > 0 ) {
					$padding_bottom = ( $output_height / $output_width ) * 100;
				} else {
					// this shouldn't be happening, but this avoids a debug message.
					$padding_bottom = 100;
				}
				$output_item .= '<div class="envira-lazy" data-test-width="' . $output_width . '" data-test-height="' . $output_height . '" style="padding-bottom:' . $padding_bottom . '%;">';

			}

			$output_item .= '<img id="envira-gallery-image-' . sanitize_html_class( $id ) . '" class="envira-gallery-image envira-gallery-image-' . $i . $gallery_theme . '" data-envira-index="' . $i . '" src="' . esc_url( $output_src ) . '"' . ( $this->get_config( 'dimensions', $data ) ? ' width="' . $this->get_config( 'crop_width', $data ) . '" height="' . $this->get_config( 'crop_height', $data ) . '"' : '' ) . ' data-envira-src="' . esc_url( $output_src ) . '" data-envira-gallery-id="' . $data['id'] . '" data-envira-item-id="' . $id . '" data-envira-caption="' . $caption . '" alt="' . esc_attr( $item['alt'] ) . '" title="' . wp_strip_all_tags( htmlspecialchars( $title ) ) . '" ' . apply_filters( 'envira_gallery_output_image_attr', '', $id, $item, $data, $i ) . ' itemprop="thumbnailUrl" data-envira-srcset="' . esc_url( $output_src ) . ' 400w,' . esc_url( $output_src ) . ' 2x" srcset="' . ( ( $envira_lazy_load ) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : esc_url( $image_src_retina ) . ' 2x' ) . '" />';

			if ( $envira_lazy_load ) {

				$output_item .= '</div>';

			}
		}

				$output_item = apply_filters( 'envira_gallery_output_image', $output_item, $id, $item, $data, $i );

				// Add image to output.
				$output .= $output_item;
				$output  = apply_filters( 'envira_gallery_output_after_image', $output, $id, $item, $data, $i );

		if ( $create_link ) {
			$output .= '</a>';
		}

			$output  = apply_filters( 'envira_gallery_output_after_link', $output, $id, $item, $data, $i );
			$output .= '</div>';

		$output .= '</div>';
		$output  = apply_filters( 'envira_gallery_output_single_item', $output, $id, $item, $data, $i );

		// Append the image to the gallery output.
		$gallery .= $output;

		// Filter the output before returning.
		$gallery = apply_filters( 'envira_gallery_output_after_item', $gallery, $id, $item, $data, $i );

		return $gallery;
	}

	/**
	 * Adds a srcset attribute to an image if wp_get_attachment_image_srcset() exists in WordPress (4.4.+)
	 *
	 * This provides responsive compatibility and allows browsers to choose which image to download
	 *
	 * @since 1.4.0.3
	 *
	 * @param string $atts   Image Attributes.
	 * @param int    $id     ID.
	 * @param array  $item   Image.
	 * @param array  $data   Gallery Config.
	 * @param int    $i      Image Index.
	 * @return string           Image Attributes.
	 */
	public function add_image_srcset_attributes( $atts, $id, $item, $data, $i ) {

		// Check if wp_get_attachment_image_srcset() exists.
		if ( ! function_exists( 'wp_get_attachment_image_srcset' ) ) {
			return $atts;
		}

		// Check if item is a Media Library item.
		if ( ! is_numeric( $id ) ) {
			return $atts;
		}

		// Check if the gallery has cropping enabled. If so, don't apply srcset attribute, as it'll output.
		// images that don't conform to the user's requirements.
		if ( $this->get_config( 'crop', $data ) ) {
			return $atts;
		}

		// Iterate through WordPress' registered sizes to find the largest available size.
		// that doesn't exceed this Galleries image dimensions.
		$sizes     = get_intermediate_image_sizes();
		$max_width = 0;
		foreach ( $sizes as $size ) {
			// Get the width.
			$width = get_option( $size . '_size_w' );

			// Check if the width is smaller or equal to the gallery image width option.
			if ( $width <= $this->get_config( 'crop_width', $data ) && $width > $max_width ) {
				// This size can be used in the srcset.
				$max_width = $width;
				$max_size  = $size;
			}
		}

		// If no size meets our criteria, bail.
		if ( ! isset( $max_size ) ) {
			return $atts;
		}

		// Add the srcset and sizes based on $max_size.
		$atts .= ' srcset="' . wp_get_attachment_image_srcset( $id, $max_size ) . '"';
		$atts .= ' sizes="' . wp_calculate_image_sizes( [ $this->get_config( 'crop_width', $data ), $this->get_config( 'crop_height', $data ) ], $item['src'] ) . '"';

		// Return.
		return $atts;
	}

	/**
	 * Add the 'property' tag to stylesheets enqueued in the body.
	 *
	 * @param string $tag Stylesheet Tag.
	 * @since 1.4.1.1
	 */
	public function add_stylesheet_property_attribute( $tag ) {

		// If the <link> stylesheet is any Envira-based stylesheet, add the property attribute.
		if ( strpos( $tag, "id='envira-" ) !== false ) {
			$tag = str_replace( '/>', 'property="stylesheet" />', $tag );
		}

		return $tag;
	}

	/**
	 * Maybe sort the gallery images, if specified in the config
	 *
	 * Note: To ensure backward compat with the previous 'random' config
	 * key, the sorting parameter is still stored in the 'random' config
	 * key.
	 *
	 * @since 1.3.8
	 *
	 * @param   array $data       Gallery Config.
	 * @param   int   $gallery_id Gallery ID.
	 * @return  array               Gallery Config.
	 */
	public function maybe_sort_gallery( $data, $gallery_id ) {

		// Get sorting method.
		$sorting_method    = (string) $this->get_config( 'random', $data );
		$sorting_direction = $this->get_config( 'sorting_direction', $data );

		// Sort images based on method.
		switch ( $sorting_method ) {
			/**
			* Random.
			* - Again, by design, to ensure backward compat when upgrading from 1.3.7.x or older.
			* where we had a 'random' key = 0 or 1. Sorting was introduced in 1.3.8.
			*/
			case '1':
				// Shuffle keys.
				$keys = array_keys( $data['gallery'] );
				shuffle( $keys );

				// Rebuild array in new order.
				$new = [];
				foreach ( $keys as $key ) {
					$new[ $key ] = $data['gallery'][ $key ];
				}

				// Assign back to gallery.
				$data['gallery'] = $new;
				break;

			/**
			* Image Meta.
			*/
			case 'src':
			case 'title':
			case 'caption':
			case 'alt':
			case 'link':
				// Get metadata.
				$keys = [];
				foreach ( $data['gallery'] as $id => $item ) {
					$keys[ $id ] = wp_strip_all_tags( $item[ $sorting_method ] );
				}

				// Sort titles / captions.
				if ( 'ASC' === $sorting_direction ) {
					asort( $keys );
				} else {
					arsort( $keys );
				}

				// Iterate through sorted items, rebuilding gallery.
				$new = [];
				foreach ( $keys as $key => $title ) {
					$new[ $key ] = $data['gallery'][ $key ];
				}

				// Assign back to gallery.
				$data['gallery'] = $new;
				break;

			/**
			* Published Date.
			*/
			case 'date':
				// Get published date for each.
				$keys = [];
				foreach ( $data['gallery'] as $id => $item ) {
					// If the attachment isn't in the Media Library, we can't get a post date - assume now.
					$attachment = get_post( $id );
					if ( ! is_numeric( $id ) || ( false === $attachment ) ) {
						$keys[ $id ] = gmdate( 'Y-m-d H:i:s' );
					} else {
						$keys[ $id ] = $attachment->post_date;
					}
				}

				// Sort titles / captions.
				if ( 'ASC' === $sorting_direction ) {
					asort( $keys );
				} else {
					arsort( $keys );
				}

				// Iterate through sorted items, rebuilding gallery.
				$new = [];
				foreach ( $keys as $key => $title ) {
					$new[ $key ] = $data['gallery'][ $key ];
				}

				// Assign back to gallery.
				$data['gallery'] = $new;
				break;

			/**
			* None.
			* - Do nothing.
			*/
			case '0':
			case '':
				break;

			/**
			* If developers have added their own sort options, let them run them here
			*/
			default:
				$data = apply_filters( 'envira_gallery_sort_gallery', $data, $sorting_method, $gallery_id );
				break;

		}

		return $data;
	}

	/**
	 * Builds HTML for the Gallery Description
	 *
	 * @since 1.3.0.2
	 *
	 * @param string $gallery Gallery HTML.
	 * @param array  $data Data.
	 * @return string Gallery HTML.
	 */
	public function description( $gallery, $data ) {

		$gallery    .= '<div class="envira-gallery-description envira-gallery-description-above" style="padding-bottom: ' . $this->get_config( 'margin', $data ) . 'px;">';
			$gallery = apply_filters( 'envira_gallery_output_before_description', $gallery, $data );

			// Get description.
			$description = $data['config']['description'];

			// If the WP_Embed class is available, use that to parse the content using registered oEmbed providers.
		if ( isset( $GLOBALS['wp_embed'] ) ) {
			$description = $GLOBALS['wp_embed']->autoembed( $description );
		}

			// Get the description and apply most of the filters that apply_filters( 'the_content' ) would use
			// We don't use apply_filters( 'the_content' ) as this would result in a nested loop and a failure.
			$description = wptexturize( $description );
			$description = convert_smilies( $description );
			$description = wpautop( $description );
			$description = prepend_attachment( $description );

			// Requires WordPress 4.4+.
		if ( function_exists( 'wp_make_content_images_responsive' ) ) {
			$description = wp_filter_content_tags( $description );
		}

			// Append the description to the gallery output.
			$gallery .= $description;

			// Filter the gallery HTML.
			$gallery = apply_filters( 'envira_gallery_output_after_description', $gallery, $data );
		$gallery    .= '</div>';

		return $gallery;
	}


	/**
	 * Outputs the gallery init script in the footer.
	 *
	 * @since 1.0.0
	 */
	public function gallery_init() {

		// envira_galleries stores all Fancybox instances.
		// envira_isotopes stores all Isotope instances.
		// envira_isotopes_config stores Isotope configs for each Gallery.
		?>

		<script type="text/javascript">
			<?php ob_start(); ?>

			var envira_galleries = [],
				envira_gallery_images = [],
				envira_isotopes = [],
				envira_isotopes_config = [];

			jQuery(document).ready(function($){

				<?php
				do_action( 'envira_gallery_api_start_global' );
				foreach ( $this->data as $data ) {
					// Prevent multiple init scripts for the same gallery ID.
					if ( in_array( $data['id'], $this->done, true ) ) {
						continue;
					}
					$this->done[] = $data['id'];

					do_action( 'envira_gallery_api_start', $data );

					// Define container.
					?>
					var envira_container_<?php echo intval( $data['id'] ); ?> = '';

				function envira_album_lazy_load_image( $id ) {

					<?php if ( $this->get_config( 'lazy_loading', $data ) ) { ?>

				var responsivelyLazy = window.responsivelyLazy;

					responsivelyLazy.run('#envira-gallery-'+ $id);

					<?php } else { ?>
						/* to do: enable ENVIRA DEBUG to display this and other errors */
						/* console.log ('load_images was pinged, but lazy load turned off'); */
					<?php } ?>

				}

					<?php if ( intval( $this->get_config( 'columns', $data ) ) === 0 ) : ?>

						<?php

						// if the user has selected a custom theme, only output the needed JS.
						$gallery_theme = $this->get_config( 'justified_gallery_theme', $data );

						// in some cases, previous gallery using the old automattic layout aren't showing a row height, so just in case...
						$justified_row_height = $this->get_config( 'justified_row_height', $data ) ? $this->get_config( 'justified_row_height', $data ) : 150;

						?>

						$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').enviraJustifiedGallery({
							rowHeight : <?php echo esc_js( $justified_row_height ); ?>,
							maxRowHeight: -1,
							waitThumbnailsLoad: true,
							selector: '> div > div',
							lastRow: 'nojustify',
							border: 0,
							margins: <?php echo $this->get_config( 'justified_margins', $data ) ? intval( $this->get_config( 'justified_margins', $data ) ) : 1; ?>,

						});

						$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').justifiedGallery().on('jg.complete', function (e) {

							envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
							$(window).scroll(function(event){
								envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
							});

						});

						$( document ).on( "envira_pagination_ajax_load_completed", function() {
							$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').justifiedGallery().on('jg.complete', function (e) {

								envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
								$(window).scroll(function(event){
									envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
								});

							});
						});

						<?php if ( 'js-desaturate' === $gallery_theme || 'js-threshold' === $gallery_theme || 'js-blur' === $gallery_theme || 'js-vintage' === $gallery_theme ) : ?>

						$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').on('jg.complete', function (e) {
							if( navigator.userAgent.match(/msie/i) || $.browser.msie || navigator.appVersion.indexOf('Trident/') > 0 ) {
								$('#envira-gallery-<?php echo intval( $data['id'] ); ?> img').each(function() {
									var keep_id = $(this).attr('id');
									$(this).attr('id', keep_id + '-effects' );
									$(this).wrap('<div class="effect-wrapper" style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({'position': 'absolute', 'opacity' : 0, 'z-index' : 1 }).attr('id', keep_id).insertBefore(this);
									<?php

									switch ( $gallery_theme ) {
										case 'js-desaturate':
											echo 'this.src = jg_effect_desaturate($(this).attr("src"));';
											break;
										case 'js-threshold':
											echo 'this.src = jg_effect_threshold(this.src);';
											break;
										case 'js-blur':
											echo 'this.src = jg_effect_blur(this.src);';
											break;
										case 'js-vintage':
											echo 'jg_effect_vintage( this );';
											break;
									}

									?>
								});
								$('#envira-gallery-<?php echo intval( $data['id'] ); ?> img').hover(
									function() {
										$(this).stop().animate({opacity: 1}, 200);
									},
									function() {
										$(this).stop().animate({opacity: 0}, 200);
									}
								);
							}
							else {

								$('#envira-gallery-<?php echo intval( $data['id'] ); ?> img').hover(
									function() {
										$(this).removeClass('envira-<?php echo esc_attr( $gallery_theme ); ?>');
									},
									function() {
										$(this).addClass('envira-<?php echo esc_attr( $gallery_theme ); ?>');
									}
								);
							}


						});

						<?php endif; ?>

						$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').css('opacity', '1');

					<?php endif; ?>

					<?php
					// Isotope: Start.
					if ( intval( $this->get_config( 'columns', $data ) ) > 0 && $this->get_config( 'isotope', $data ) ) {
						// Define config for this Isotope Gallery.
						?>
						envira_isotopes_config['<?php echo intval( $data['id'] ); ?>'] = {
							<?php do_action( 'envira_gallery_api_enviratope_config', $data ); ?>
							itemSelector: '.envira-gallery-item',
								masonry: {
									columnWidth: '.envira-gallery-item'
								}
						};
						<?php
						// Initialize Isotope.
						?>
						envira_isotopes['<?php echo intval( $data['id'] ); ?>'] = envira_container_<?php echo intval( $data['id'] ); ?>
																	= $('#envira-gallery-<?php echo intval( $data['id'] ); ?>').masonry(envira_isotopes_config['<?php echo intval( $data['id'] ); ?>']);

						$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').on( 'layoutComplete',
						function( event, laidOutItems ) {
							envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
							$(window).scroll(function(event){
								envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
							});
						}
						);

						$( document ).on( "envira_pagination_ajax_load_completed", function() {
							$('#envira-gallery-<?php echo intval( $data['id'] ); ?>').on( 'layoutComplete',
							function( event, laidOutItems ) {
								envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
								$(window).scroll(function(event){
									envira_album_lazy_load_image(<?php echo intval( $data['id'] ); ?>);
								});
							}
							);
						});

						<?php
						// Re-layout Isotope when each image loads.
						?>
						envira_isotopes['<?php echo intval( $data['id'] ); ?>'].enviraImagesLoaded()
							.done(function() {
								envira_isotopes['<?php echo intval( $data['id'] ); ?>'].masonry('layout');
							})
							.progress(function() {
								envira_isotopes['<?php echo intval( $data['id'] ); ?>'].masonry('layout');
							});
						<?php
						do_action( 'envira_gallery_api_enviratope', $data );
					}
					// Isotope: End.

					// CSS Animations: Start.
					if ( $this->get_config( 'css_animations', $data ) ) {
						$opacity = $this->get_config( 'css_opacity', $data );

						// Defaults Addon Gallery may not have been saved since opacity introduction, so force a value if one doesn't exist.
						if ( empty( $opacity ) ) {
							$opacity = 100;
						}

						// Reduce to factor of 1.
						$opacity = ( $opacity / 100 );
						?>
						envira_container_<?php echo intval( $data['id'] ); ?> = $('#envira-gallery-<?php echo intval( $data['id'] ); ?>').enviraImagesLoaded( function() {
							$('.envira-gallery-item img').fadeTo( 'slow', <?php echo intval( $opacity ); ?> );
						});
						<?php
					}
					// CSS Animations: End.

					// Fancybox: Start.
					if ( $this->get_config( 'lightbox_enabled', $data ) ) {
						// By default, we'll use the images in the Gallery DOM to populate the lightbox.
						// However, Addons (e.g. Pagination) may require us to give access to all images
						// in a Gallery, not just the paginated subset on screen.
						// Those Addons can populate this array now which will tell envirabox which images to use.
						$lightbox_images = apply_filters( 'envira_gallery_lightbox_images', false, $data );
						$title_fb1       = apply_filters( 'envira_gallery_title_display', $this->get_config( 'title_display', $data ), $data );
						if ( 'float_wrap' === $title_fb1 || 'float' === $title_fb1 ) {
							$title_fb1 = 'float';
						}

						?>
						envira_gallery_options = {
							// All of these options are for Envira Lite with Fancybox 1 to try and match Fancybox 2.
							padding: <?php echo in_array( $this->get_config( 'lightbox_theme', $data ), [ 'base_dark' ], true ) ? '4' : '15'; ?>,
							cyclic: true,
							titlePosition: '<?php echo esc_js( $title_fb1 ); ?>',
							// End options for Envira Lite with Fancybox 1.

							<?php do_action( 'envira_gallery_api_config', $data ); // Depreciated. ?>
							<?php do_action( 'envira_gallery_api_envirabox_config', $data ); ?>
							<?php if ( ! $this->get_config( 'keyboard', $data ) ) : ?>
							keys: 0,
							<?php endif; ?>
							margin: <?php echo intval( apply_filters( 'envirabox_margin', 60, $data ) ); ?>,
							arrows: <?php echo in_array( $this->get_config( 'lightbox_theme', $data ), [ 'base_dark' ], true ) ? 'true' : esc_attr( $this->get_config( 'arrows', $data ) ); ?>,
							aspectRatio: <?php echo esc_js( apply_filters( 'envirabox_aspect', $this->get_config( 'aspect', $data ), $data ) ); ?>,
							loop: <?php echo esc_js( apply_filters( 'envirabox_loop', $this->get_config( 'loop', $data ), $data ) ); ?>,
							mouseWheel: <?php echo esc_js( apply_filters( 'mousewheel', $this->get_config( 'mousewheel', $data ), $data ) ); ?>,
							preload: 1,

							<?php
							/* Get open and transition effects */
							$lightbox_open_close_effect = apply_filters( 'lightbox_open_close_effect', $this->get_config( 'lightbox_open_close_effect', $data ), $data );
							$lightbox_transition_effect = apply_filters( 'effect', $this->get_config( 'effect', $data ), $data );

							/* Get standard effects */
							$lightbox_standard_effects = $this->common->get_transition_effects_values();

							/* If open/close is standard, use openEffect, closeEffect */
							if ( in_array( $lightbox_open_close_effect, $lightbox_standard_effects, true ) ) {
								?>
								openEffect: '<?php echo esc_attr( $lightbox_open_close_effect ); ?>',
								closeEffect: '<?php echo esc_attr( $lightbox_open_close_effect ); ?>',
								<?php
							} else {

								// easing effects have been depreciated, and will default back to 'swing'.
								?>
								openEffect: 'elastic', // FancyBox default is fade, should be elastic for the openEffect/closeEffect functions
								closeEffect: 'elastic',
								openEasing: 'swing', // <?php echo ( 'Swing' === $lightbox_open_close_effect ? 'swing' : 'easeIn' ); ?>',
								closeEasing: 'swing', // <?php echo ( 'Swing' === $lightbox_open_close_effect ? 'swing' : 'easeOut' ); ?>',
								openSpeed: <?php echo intval( apply_filters( 'envirabox_open_speed', 500, $data ) ); ?>,
								closeSpeed: <?php echo intval( apply_filters( 'envirabox_close_speed', 500, $data ) ); ?>,
								<?php
							}

							/* If transition effect is standard, use nextEffect, prevEffect */
							if ( in_array( $lightbox_transition_effect, $lightbox_standard_effects, true ) ) {
								?>
								nextEffect: '<?php echo esc_attr( $lightbox_transition_effect ); ?>',
								prevEffect: '<?php echo esc_attr( $lightbox_transition_effect ); ?>',
								<?php
							} else {

								// easing effects have been depreciated, and will default back to 'swing'.
								?>
								nextEasing: 'swing', // '<?php echo ( 'Swing' === $lightbox_transition_effect ? 'swing' : 'easeIn' ); ?>',
								prevEasing: 'swing', // '<?php echo ( 'Swing' === $lightbox_transition_effect ? 'swing' : 'easeOut' ); ?>',
								nextSpeed: <?php echo intval( apply_filters( 'envirabox_next_speed', 600, $data ) ); ?>,
								prevSpeed: <?php echo intval( apply_filters( 'envirabox_prev_speed', 600, $data ) ); ?>,
								<?php
							}
							?>
							tpl: {
								wrap     : '<?php echo $this->get_lightbox_template( $data ); // @codingStandardsIgnoreLine - Markup escapped via function ?>',
								image    : '<img class="envirabox-image" src="{href}" alt="" data-envira-title="" data-envira-caption="" data-envira-index="" data-envira-data="" />',
								iframe   : '<iframe id="envirabox-frame{rnd}" name="envirabox-frame{rnd}" class="envirabox-iframe" frameborder="0" vspace="0" hspace="0" allowtransparency="true" wekitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
								error    : '<p class="envirabox-error"><?php echo esc_attr__( 'The requested content cannot be loaded.<br/>Please try again later.</p>', 'envira-gallery-lite' ); ?>',
								closeBtn : '<a title="<?php echo esc_attr__( 'Close', 'envira-gallery-lite' ); ?>" class="envirabox-item envirabox-close" href="#"></a>',
								next     : '<a title="<?php echo esc_attr__( 'Next', 'envira-gallery-lite' ); ?>" class="envirabox-nav envirabox-next envirabox-arrows-<?php echo esc_attr( $this->get_config( 'arrows_position', $data ) ); ?>" href="#"><span></span></a>',
								prev     : '<a title="<?php echo esc_attr__( 'Previous', 'envira-gallery-lite' ); ?>" class="envirabox-nav envirabox-prev envirabox-arrows-<?php echo esc_attr( $this->get_config( 'arrows_position', $data ) ); ?>" href="#"><span></span></a>'
								<?php do_action( 'envira_gallery_api_templates', $data ); ?>
							},
							helpers: {
								<?php
								do_action( 'envira_gallery_api_helper_config', $data );
								// Grab title display.
								$title_display = $this->get_config( 'title_display', $data );
								if ( 'float_wrap' === $title_display ) {
									$title_display = 'float';
								}
								?>
								title: {
									<?php do_action( 'envira_gallery_api_title_config', $data ); ?>
									type: '<?php echo esc_attr( $title_display ); ?>'
								},
								<?php if ( $this->get_config( 'thumbnails', $data ) ) : ?>
								thumbs: {
									width: <?php echo esc_attr( $this->get_config( 'thumbnails_width', $data ) ); ?>,
									height: <?php echo esc_attr( $this->get_config( 'thumbnails_height', $data ) ); ?>,
									source: function(current) {
										if ( typeof current.element == 'undefined' ) {
											return current.thumbnail;
										} else {
											return $(current.element).data('thumbnail');
										}
									},
									<?php if ( in_array( $this->get_config( 'lightbox_theme', $data ), [ 'base_dark' ], true ) ) : ?>
									dynamicMargin: true,
									<?php endif; ?>
									position: '
									<?php
									echo in_array( $this->get_config( 'lightbox_theme', $data ), [ 'base_dark' ], true )
													? 'bottom'
													: esc_attr( $this->get_config( 'thumbnails_position', $data ) );
									?>
													'
								},
								<?php endif; ?>
								<?php if ( $this->get_config( 'toolbar', $data ) && ! in_array( $this->get_config( 'lightbox_theme', $data ), [ 'base_dark' ], true ) ) : ?>
								buttons: {
									tpl: '<?php echo $this->get_toolbar_template( $data ); // @codingStandardsIgnoreLine ?>',
									position: '<?php echo esc_attr( $this->get_config( 'toolbar_position', $data ) ); ?>',
									padding: '<?php echo ( ( 'bottom' === $this->get_config( 'toolbar_position', $data ) && $this->get_config( 'thumbnails', $data ) && $this->get_config( 'thumbnails_position', $data ) === 'bottom' ) ? true : false ); ?>'
								},
								<?php endif; ?>
							},
							<?php do_action( 'envira_gallery_api_config_callback', $data ); ?>
							beforeLoad: function(){

								<?php

								if ( ! $lightbox_images ) {

									?>
								this.title = $(this.element).attr('data-envira-caption');
									<?php

								} else {

									?>
								this.title = this.group[ this.index ].caption;
									<?php

								}

								?>

								<?php do_action( 'envira_gallery_api_before_load', $data ); ?>
							},
							afterLoad: function(){
								$('envirabox-overlay-fixed').on({
									'touchmove' : function(e){
										e.preventDefault();
									}
								});

								<?php do_action( 'envira_gallery_api_after_load', $data ); ?>
							},
							beforeShow: function(){
								$(window).on({
									'resize.envirabox' : function(){
										$.envirabox.update();
									}
								});

								<?php
								// Set data attributes on the lightbox image, based on either.
								// the image in the DOM or (if $lightbox_images defined) the image.
								// from $lightbox_images.
								?>
								if ( typeof this.element === 'undefined' ) {
									<?php
									// Using $lightbox_images.
									?>
									var gallery_id = this.group[ this.index ].gallery_id;
									var gallery_item_id = this.group[ this.index ].id;
									var alt = this.group[ this.index ].alt;
									var title = this.group[ this.index ].title;
									var caption = this.group[ this.index ].caption;
									var index = this.index;
								} else {
									<?php
									// Using image from DOM.
									// Get a bunch of data attributes from clicked image link.
									?>
									var gallery_id = this.element.find('img').data('envira-gallery-id');
									var gallery_item_id = this.element.find('img').data('envira-item-id');
									var alt = this.element.find('img').attr('alt');
									var title = this.element.find('img').parent().attr('title');
									var caption = this.element.find('img').parent().data('envira-caption');
									var retina_image = this.element.find('img').parent().data('envira-retina');
									var index = this.element.find('img').data('envira-index');
								}

								<?php
								// Set alt, data-envira-title, data-envira-caption and data-envira-index attributes on Lightbox image.
								?>
								this.inner.find('img').attr('alt', alt)
													.attr('data-envira-gallery-id', gallery_id)
													.attr('data-envira-item-id', gallery_item_id)
													.attr('data-envira-title', title)
													.attr('data-envira-caption', caption)
													.attr('data-envira-index', index);

								<?php
								// Set retina image srcset if specified.
								?>
								if ( typeof retina_image !== 'undefined' && retina_image !== '' ) {
									this.inner.find('img').attr('srcset', retina_image + ' 2x');
								}

								<?php do_action( 'envira_gallery_api_before_show', $data ); ?>
							},
							onStart: function(){
																$('#envirabox-wrap, #envirabox-wrap #envirabox-left, #envirabox-wrap #envirabox-right').swipe( {
									excludedElements:"label, button, input, select, textarea, .noSwipe",
									swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
										if (direction === 'left') {
											$.envirabox.next(direction);
										} else if (direction === 'right') {
											$.envirabox.prev(direction);
										} else if (direction === 'up') {
											$.envirabox.close();
										}
									}
								} );
								<?php

								// If title helper = float_wrap, add a CSS class so we can disable word-wrap.
								if ( $this->get_config( 'title_display', $data ) === 'float_wrap' ) {
									?>
									if ( typeof this.helpers.title !== 'undefined' ) {
										if ( ! $( 'div.envirabox-title' ).hasClass( 'envirabox-title-text-wrap' ) ) {
											$( 'div.envirabox-title' ).addClass( 'envirabox-title-text-wrap' );
										}
									}
									<?php
								}

								do_action( 'envira_gallery_api_after_show', $data );
								?>
							},
							beforeClose: function(){
								<?php do_action( 'envira_gallery_api_before_close', $data ); ?>
							},
							afterClose: function(){
								$(window).off('resize.envirabox');
								<?php do_action( 'envira_gallery_api_after_close', $data ); ?>
							},
							onUpdate: function(){
								<?php
								if ( $this->get_config( 'toolbar', $data ) ) :
									?>
								var envira_buttons_<?php echo intval( $data['id'] ); ?> = $('#envirabox-buttons li').map(function(){
									return $(this).width();
								}).get(),
									envira_buttons_total_<?php echo intval( $data['id'] ); ?> = 0;
								$.each(envira_buttons_<?php echo intval( $data['id'] ); ?>, function(i, val){
									envira_buttons_total_<?php echo intval( $data['id'] ); ?> += parseInt(val, 10);
								});

								envira_buttons_total_<?php echo intval( $data['id'] ); ?> += 1;

								$('#envirabox-buttons ul').width(envira_buttons_total_<?php echo intval( $data['id'] ); ?>);
								$('#envirabox-buttons').width(envira_buttons_total_<?php echo intval( $data['id'] ); ?>).css('left', ($(window).width() - envira_buttons_total_<?php echo intval( $data['id'] ); ?>)/2);
								<?php endif; ?>

								<?php do_action( 'envira_gallery_api_on_update', $data ); ?>
							},
							onCancel: function(){
								<?php do_action( 'envira_gallery_api_on_cancel', $data ); ?>
							},
							onPlayStart: function(){
								<?php do_action( 'envira_gallery_api_on_play_start', $data ); ?>
							},
							onPlayEnd: function(){
								<?php do_action( 'envira_gallery_api_on_play_end', $data ); ?>
							}
						};
						<?php

						if ( ! $lightbox_images ) {
							// No lightbox images specified, so use images from DOM.
							?>
							envira_galleries['<?php echo intval( $data['id'] ); ?>'] = $('.envira-gallery-<?php echo intval( $data['id'] ); ?>').envirabox( envira_gallery_options );
							<?php

						} else {
							// Use images from $lightbox_images.
							add_filter( 'envira_minify_strip_double_forward_slashes', '__return_false' );
							?>
							envira_gallery_images[<?php echo intval( $data['id'] ); ?>] = [];
							<?php
							// Build a JS array of all images.
							$count = 0;
							foreach ( $lightbox_images as $image_id => $image ) {
								// If no image ID exists, skip.
								if ( empty( $image_id ) ) {
									continue;
								}

								$title = wp_strip_all_tags( htmlspecialchars( $image['title'], ENT_QUOTES, 'UTF-8' ) );
								$title = htmlentities( $title, ENT_QUOTES, 'UTF-8' );

								?>
								envira_gallery_images[<?php echo intval( $data['id'] ); ?>].push({
									href: '<?php echo esc_url( $image['src'] ); ?>',
									gallery_id: <?php echo intval( $data['id'] ); ?>,
									id: <?php echo intval( $image_id ); ?>,
									alt: '<?php echo esc_attr( addslashes( str_replace( "\n", '<br />', $image['alt'] ) ) ); ?>',
									caption: '<?php echo esc_html( $title ); ?>',
									title: '<?php echo esc_html( $title ); ?>',
									index: <?php echo intval( $count ); ?>,
									thumbnail: '<?php echo ( isset( $image['thumb'] ) ? esc_js( $image['thumb'] ) : '' ); ?>'
									<?php do_action( 'envira_gallery_api_lightbox_image_attributes', $image, $image_id, $lightbox_images, $data ); ?>
								});
								<?php
								++$count;
							}

							// Open envirabox when an image is clicked, telling envirabox which images are available to it.
							?>
							envira_galleries['<?php echo intval( $data['id'] ); ?>'] = $('.envira-gallery-<?php echo intval( $data['id'] ); ?>').envirabox( envira_gallery_options, envira_gallery_images[<?php echo intval( $data['id'] ); ?>] );
							$('#envira-gallery-wrap-<?php echo intval( $data['id'] ); ?>').on('click', 'a.envira-gallery-link', function(e) {
								e.preventDefault();
								e.stopPropagation();
								$.envirabox.close();
								if ( $('#envira-gallery-wrap-<?php echo intval( $data['id'] ); ?> div.envira-pagination').length > 0 ) { /* this exists, perhaps pagination doesn't display nav because it's only one page? */
									var envirabox_page = ( $('#envira-gallery-wrap-<?php echo intval( $data['id'] ); ?> div.envira-pagination').data('page') - 1 );
								} else {
									var envirabox_page = 0;
								}

								if ( $('#envira-gallery-wrap-<?php echo intval( $data['id'] ); ?> div.envira-pagination').length > 0 ) { /* this exists, perhaps pagination doesn't display nav because it's only one page? */
									var envirabox_per_page = $('#envira-gallery-wrap-<?php echo intval( $data['id'] ); ?> div.envira-pagination').data('per-page');
								} else {
									var envirabox_per_page = $('.envira-gallery-image').length;
								}

								var envirabox_index = ( Number($('img', $(this)).data('envira-index')) - 1 );
								envira_gallery_options.index = ((envirabox_page * envirabox_per_page) + envirabox_index);
								envira_galleries['<?php echo intval( $data['id'] ); ?>'] = $.envirabox( envira_gallery_images[<?php echo intval( $data['id'] ); ?>], envira_gallery_options );
							});
							<?php
						}

						do_action( 'envira_gallery_api_lightbox', $data );
						// Fancybox: End.
					}

					do_action( 'envira_gallery_api_end', $data );
				} // foreach

				do_action( 'envira_gallery_api_end_global', $this->data );

				?>
			});

			<?php

			if ( defined( 'SCRIPT_DEBUG' ) && ! SCRIPT_DEBUG ) {

				// Minify before outputting to improve page load time.
				echo $this->minify( ob_get_clean() ); // @codingStandardsIgnoreLine

			} else {

				echo ob_get_clean(); // @codingStandardsIgnoreLine

			}

			?>
		</script>
		<?php
	}

	/**
	 * Loads a custom gallery display theme.
	 *
	 * @since 1.0.0
	 *
	 * @param string $theme The custom theme slug to load.
	 */
	public function load_gallery_theme( $theme ) {

		// Loop through the available themes and enqueue the one called.
		foreach ( $this->common->get_gallery_themes() as $array => $data ) {
			if ( $theme !== $data['value'] ) {
				continue;
			}
			if ( file_exists( plugin_dir_path( $data['file'] ) . 'themes/' . $theme . '/style.css' ) ) {
				wp_enqueue_style( $this->base->plugin_slug . $theme . '-theme', plugins_url( 'themes/' . $theme . '/style.css', $data['file'] ), [ $this->base->plugin_slug . '-style' ], $this->base->version );
			} else {
				wp_enqueue_style( $this->base->plugin_slug . $theme . '-theme', plugins_url( 'themes/' . $theme . '/css/style.css', $data['file'] ), [ $this->base->plugin_slug . '-style' ], $this->base->version );
			}
			break;
		}
	}

	/**
	 * Loads a custom gallery lightbox theme.
	 *
	 * @since 1.0.0
	 *
	 * @param string $theme The custom theme slug to load.
	 */
	public function load_lightbox_theme( $theme ) {

		// Loop through the available themes and enqueue the one called.
		foreach ( $this->common->get_lightbox_themes() as $array => $data ) {
			if ( $theme !== $data['value'] ) {
				continue;
			}

			if ( file_exists( plugin_dir_path( $data['file'] ) . 'themes/' . $theme . '/style.css' ) ) {
				wp_enqueue_style( $this->base->plugin_slug . $theme . '-theme', plugins_url( 'themes/' . $theme . '/style.css', $data['file'] ), [ $this->base->plugin_slug . '-style' ], $this->base->version );
			} else {
				wp_enqueue_style( $this->base->plugin_slug . $theme . '-theme', plugins_url( 'themes/' . $theme . '/css/style.css', $data['file'] ), [ $this->base->plugin_slug . '-style' ], $this->base->version );
			}
			break;
		}
	}

	/**
	 * Helper method for adding custom gallery classes.
	 *
	 * @since 1.0.0
	 *
	 * @param array $data The gallery data to use for retrieval.
	 * @return string     String of space separated gallery classes.
	 */
	public function get_gallery_classes( $data ) {

		// Set default class.
		$classes   = [];
		$classes[] = 'envira-gallery-wrap';

		// Add custom class based on data provided.
		$classes[] = 'envira-gallery-theme-' . $this->get_config( 'gallery_theme', $data );
		$classes[] = 'envira-lightbox-theme-' . $this->get_config( 'lightbox_theme', $data );

		// If we have custom classes defined for this gallery, output them now.
		foreach ( (array) $this->get_config( 'classes', $data ) as $class ) {
			$classes[] = sanitize_html_class( wp_unslash( $class ) );
		}

		// If the gallery has RTL support, add a class for it.
		if ( $this->get_config( 'rtl', $data ) ) {
			$classes[] = 'envira-gallery-rtl';
		}

		// Allow filtering of classes and then return what's left.
		$classes = apply_filters( 'envira_gallery_output_classes', $classes, $data );
		return trim( implode( ' ', array_map( 'trim', array_map( 'sanitize_html_class', array_unique( $classes ) ) ) ) );
	}

	/**
	 * Helper method for adding custom gallery classes.
	 *
	 * @since 1.0.4
	 *
	 * @param array $item Array of item data.
	 * @param int   $i      The current position in the gallery.
	 * @param array $data The gallery data to use for retrieval.
	 * @return string     String of space separated gallery item classes.
	 */
	public function get_gallery_item_classes( $item, $i, $data ) {

		// Set default class.
		$classes   = [];
		$classes[] = 'envira-gallery-item';
		$classes[] = 'enviratope-item';
		$classes[] = 'envira-gallery-item-' . $i;

		// If lazy load exists, add that.
		if ( isset( $data['config']['lazy_loading'] ) && $data['config']['lazy_loading'] ) {
			$classes[] = 'envira-lazy-load';
		}

		// Allow filtering of classes and then return what's left.
		$classes = apply_filters( 'envira_gallery_output_item_classes', $classes, $item, $i, $data );
		return trim( implode( ' ', array_map( 'trim', array_map( 'sanitize_html_class', array_unique( $classes ) ) ) ) );
	}

	/**
	 * Changes the link attribute of an image, if the Lightbox config
	 * requires a different sized image to be displayed.
	 *
	 * @since 1.3.6
	 *
	 * @param int   $id      The image attachment ID to use.
	 * @param array $item  Gallery item data.
	 * @param array $data  The gallery data to use for retrieval.
	 * @return array       Image array
	 */
	public function maybe_change_link( $id, $item, $data ) {

		// Check gallery config.
		$image_size = $this->get_config( 'lightbox_image_size', $data );

		// check if the url is a valid image if not return it.
		if ( ! $this->is_image( $item['link'] ) ) {
			return $item;
		}

		// Return if we are serving a full size image.
		if ( 'default' === $image_size || 'full_width' === $image_size ) {
			return $item;
		}

		// Get media library attachment at requested size.
		$image = wp_get_attachment_image_src( $id, $image_size );

		if ( ! is_array( $image ) ) {
			return $item;
		}

		// Inject new image size into $item.
		$item['link'] = $image[0];

		// Return.
		return $item;
	}

	/**
	 * Helper method to retrieve the proper image src attribute based on gallery settings.
	 *
	 * @since 1.0.0
	 *
	 * @param int   $id            The image attachment ID to use.
	 * @param array $item          Gallery item data.
	 * @param array $data          The gallery data to use for retrieval.
	 * @param bool  $mobile        Whether or not to retrieve the mobile image.
	 * @param bool  $retina        Whether to return a retina sized image.
	 * @return string              The proper image src attribute for the image.
	 */
	public function get_image_src( $id, $item, $data, $mobile = false, $retina = false ) {

		// Define variable.
		$src = false;

		// If this image is an instagram, we grab the src and don't use the $id.
		// otherwise using the $id refers to a postID in the database and has been known.
		// at times to pull up the wrong thumbnail instead of the instagram one.

		$instagram = false;

		if ( ! empty( $item['src'] ) && strpos( $item['src'], 'cdninstagram' ) !== false ) :
			// using 'cdninstagram' because it seems all urls contain it - but be watchful in the future.
			$instagram = true;
			$src       = $item['src'];
			$image     = $item['src'];
		endif;

		$image_size = $this->get_config( 'image_size', $data );

		if ( ! $src ) :

			// Check if this Gallery uses a WordPress defined image size.
			if ( 'default' !== $image_size && ! $retina ) {
				// If image size is envira_gallery_random, get a random image size.
				if ( 'envira_gallery_random' === $image_size ) {

					// Get random image sizes that have been chosen for this Gallery.
					$image_sizes_random = (array) $this->get_config( 'image_sizes_random', $data );

					if ( count( $image_sizes_random ) === 0 ) {
						// The user didn't choose any image sizes - use them all.
						$wordpress_image_sizes           = $this->common->get_image_sizes( true );
						$wordpress_image_size_random_key = array_rand( $wordpress_image_sizes, 1 );
						$image_size                      = $wordpress_image_sizes[ $wordpress_image_size_random_key ]['value'];
					} else {
						$wordpress_image_size_random_key = array_rand( $image_sizes_random, 1 );
						$image_size                      = $image_sizes_random[ $wordpress_image_size_random_key ];
					}

					// Get the random WordPress defined image size.
					$src = wp_get_attachment_image_src( $id, $image_size );
				} else {
					// Get the requested WordPress defined image size.
					$src = wp_get_attachment_image_src( $id, $image_size );
				}
			} elseif ( ! $retina ) {

					$isize = $this->find_clostest_size( $data ) !== '' ? $this->find_clostest_size( $data ) : 'full';
					$isize = ( 'full' === $image_size ) ? 'full' : $isize;
					$src   = apply_filters( 'envira_gallery_retina_image_src', wp_get_attachment_image_src( $id, $isize ), $id, $item, $data, $this->is_mobile );

			} else {
				$src = apply_filters( 'envira_gallery_retina_image_src', wp_get_attachment_image_src( $id, 'full' ), $id, $item, $data, $this->is_mobile );
			}

		endif;

		// Check if this returned an image.
		if ( ! $src ) {
			// Fallback to the $item's image source.
			$image = $item['src'];
		} elseif ( ! $instagram ) {
			$image = $src[0];
		}

		// If we still don't have an image at this point, something went wrong.
		if ( ! isset( $image ) ) {
			return apply_filters( 'envira_gallery_no_image_src', $item['link'], $id, $item, $data );
		}

		// Prep our indexable images.
		if ( $image && ! $this->is_mobile ) {
			$this->index[ $data['id'] ][ $id ] = [
				'src' => $image,
				'alt' => ! empty( $item['alt'] ) ? $item['alt'] : '',
			];
		}

		// If the current layout is justified/automatic.
		// if the image size is a WordPress size and we're not requesting a retina image we don't need to resize or crop anything.
		if ( 'default' !== $image_size && ! $retina ) {
			return apply_filters( 'envira_gallery_image_src', $image, $id, $item, $data );
		}

		// If the image size is default (i.e. the user has input their own custom dimensions in the Gallery),
		// we may need to resize the image now
		// This is safe to call every time, as resize_image() will check if the image already exists, preventing thumbnails
		// from being generated every single time.
		$type = $this->is_mobile ? 'mobile' : 'crop'; // 'crop' is misleading here - it's the key that stores the thumbnail width + height
		$args = [
			'position' => 'c',
			'width'    => $this->get_config( $type . '_width', $data ),
			'height'   => $this->get_config( $type . '_height', $data ),
			'quality'  => 100,
			'retina'   => $retina,
		];

		// If we're requesting a retina image, and the gallery uses a registered WordPress image size,
		// we need use the width and height of that registered WordPress image size - not the gallery's
		// image width and height, which are hidden settings.
		if ( 'full' !== $image_size && ( 'default' !== $image_size && $retina ) ) {
			// Find WordPress registered image size.
			$wordpress_image_sizes = $this->common->get_image_sizes( true ); // true = WordPress only image sizes (excludes random).

			foreach ( $wordpress_image_sizes as $size ) {
				if ( $size['value'] !== $image_size ) {
					continue;
				}

				// Define the $args so at least they exist.
				$args['width']  = false;
				$args['height'] = false;

				// We found the image size. Use its dimensions.
				if ( ! empty( $size['width'] ) ) {
					$args['width'] = $size['width'];
				}
				if ( ! empty( $size['height'] ) ) {
					$args['height'] = $size['height'];
				}
				break;

			}
		}

		// Filter.
		$args          = apply_filters( 'envira_gallery_crop_image_args', $args );
		$resized_image = $this->common->resize_image( $image, $args['width'], $args['height'], $this->get_config( 'crop', $data ), $args['position'], $args['quality'], $args['retina'], $data );

		// If there is an error, possibly output error message and return the default image src.
		if ( is_wp_error( $resized_image ) ) {
			// If WP_DEBUG is enabled, and we're logged in, output an error to the user.
			if ( defined( 'WP_DEBUG' ) && WP_DEBUG && is_user_logged_in() ) {
				echo '<pre>Envira: Error occured resizing image (these messages are only displayed to logged in WordPress users):<br />';
				echo 'Error: ' . esc_html( $resized_image->get_error_message() ) . '<br />';
				echo 'Image: ' . esc_html( $image ) . '<br />';
				echo 'Args: ' . var_export( $args, true ) . '</pre>'; // @codingStandardsIgnoreLine
			}

			// Return the non-cropped image as a fallback.
			return apply_filters( 'envira_gallery_image_src', $image, $id, $item, $data );
		} else {
			return apply_filters( 'envira_gallery_image_src', $resized_image, $id, $item, $data );
		}
	}

	/**
	 * Helper Method to find closest size
	 *
	 * @param array $data Gallery Data.
	 * @return string
	 */
	public function find_clostest_size( $data ) {

		$image_sizes = $this->get_image_sizes();
		$dimensions  = $this->get_config( 'dimensions', $data );
		$width       = $this->get_config( 'crop_width', $data );
		$height      = $this->get_config( 'crop_height', $data );
		$match       = false;

		usort( $image_sizes, [ $this, 'usort_callback' ] );

		foreach ( $image_sizes as $num ) {

			$num['width']  = (int) $num['width'];
			$num['height'] = (int) $num['height'];

			// skip over sizes that are smaller.
			if ( $num['height'] < $height || $num['width'] < $width ) {
				continue;
			}
			if ( $num['width'] > $width && $num['height'] > $height ) {

				if ( false === $match ) {

					$match = true;
					$size  = $num['name'];

					return $size;
				}
			}
		}
		return '';
	}

	/**
	 * Helper function for usort and php 5.3 >.
	 *
	 * @access public
	 * @param mixed $a First sort.
	 * @param mixed $b Second sort.
	 * @return int
	 */
	public function usort_callback( $a, $b ) {

		return intval( $a['width'] ) - intval( $b['width'] );
	}

	/**
	 * Helper Method to get image sizes.
	 *
	 * @access public
	 * @return array
	 */
	public function get_image_sizes() {

		global $_wp_additional_image_sizes;

		$sizes = [];
		foreach ( get_intermediate_image_sizes() as $_size ) {

			if ( in_array( $_size, [ 'thumbnail', 'medium', 'medium_large', 'large' ], true ) ) {

				if ( (bool) get_option( "{$_size}_crop" ) === true ) {

					continue;

				}
				$sizes[ $_size ]['name']   = $_size;
				$sizes[ $_size ]['width']  = get_option( "{$_size}_size_w" );
				$sizes[ $_size ]['height'] = get_option( "{$_size}_size_h" );
				$sizes[ $_size ]['crop']   = (bool) get_option( "{$_size}_crop" );

			} elseif ( isset( $_wp_additional_image_sizes[ $_size ] ) ) {

				if ( true === $_wp_additional_image_sizes[ $_size ]['crop'] ) {

					continue;

				}

				$sizes[ $_size ] = [
					'name'   => $_size,
					'width'  => $_wp_additional_image_sizes[ $_size ]['width'],
					'height' => $_wp_additional_image_sizes[ $_size ]['height'],
					'crop'   => $_wp_additional_image_sizes[ $_size ]['crop'],
				];
			}
		}
		return $sizes;
	}


	/**
	 * Helper method to retrieve the proper gallery toolbar template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $data Array of gallery data.
	 * @return string     String template for the gallery toolbar.
	 */
	public function get_toolbar_template( $data ) {

		// Build out the custom template based on options chosen.
		$template         = '<div id="envirabox-buttons">';
			$template    .= '<ul>';
				$template = apply_filters( 'envira_gallery_toolbar_start', $template, $data );

				// Prev.
				$template .= '<li><a class="btnPrev" title="' . __( 'Previous', 'envira-gallery-lite' ) . '" href="javascript:;"></a></li>';
				$template  = apply_filters( 'envira_gallery_toolbar_after_prev', $template, $data );

				// Next.
				$template .= '<li><a class="btnNext" title="' . __( 'Next', 'envira-gallery-lite' ) . '" href="javascript:;"></a></li>';
				$template  = apply_filters( 'envira_gallery_toolbar_after_next', $template, $data );

				// Title.
		if ( $this->get_config( 'toolbar_title', $data ) ) {
			$template .= '<li id="envirabox-buttons-title"><span>' . $this->get_config( 'title', $data ) . '</span></li>';
			$template  = apply_filters( 'envira_gallery_toolbar_after_title', $template, $data );
		}

				// Close.
				$template .= '<li><a class="btnClose" title="' . __( 'Close', 'envira-gallery-lite' ) . '" href="javascript:;"></a></li>';
				$template  = apply_filters( 'envira_gallery_toolbar_after_close', $template, $data );

				$template = apply_filters( 'envira_gallery_toolbar_end', $template, $data );
			$template    .= '</ul>';
		$template        .= '</div>';

		// Return the template, filters applied and all.
		return apply_filters( 'envira_gallery_toolbar', $template, $data );
	}

	/**
	 * Helper method to retrieve the gallery lightbox template.
	 *
	 * @since 1.3.1.4
	 *
	 * @param array $data Array of gallery data.
	 * @return string String template for the gallery lightbox.
	 */
	public function get_lightbox_template( $data ) {

		// Build out the lightbox template.
		$envirabox_wrap_css_classes = apply_filters( 'envirabox_wrap_css_classes', 'envirabox-wrap', $data );

		$envirabox_theme = apply_filters( 'envirabox_theme', 'envirabox-theme-' . $this->get_config( 'lightbox_theme', $data ), $data );

		$template = '<div class="' . $envirabox_wrap_css_classes . '" tabIndex="-1"><div class="envirabox-skin ' . $envirabox_theme . '"><div class="envirabox-outer"><div class="envirabox-inner">';

		// Top Left box.
		$template .= '<div class="envirabox-position-overlay envira-gallery-top-left">';
		$template  = apply_filters( 'envirabox_output_dynamic_position', $template, $data, 'top-left' );
		$template .= '</div>';

		// Top Right box.
		$template .= '<div class="envirabox-position-overlay envira-gallery-top-right">';
		$template  = apply_filters( 'envirabox_output_dynamic_position', $template, $data, 'top-right' );
		$template .= '</div>';

		// Bottom Left box.
		$template .= '<div class="envirabox-position-overlay envira-gallery-bottom-left">';
		$template  = apply_filters( 'envirabox_output_dynamic_position', $template, $data, 'bottom-left' );
		$template .= '</div>';

		// Bottom Right box.
		$template .= '<div class="envirabox-position-overlay envira-gallery-bottom-right">';
		$template  = apply_filters( 'envirabox_output_dynamic_position', $template, $data, 'bottom-right' );
		$template .= '</div>';

		$template .= '</div></div></div></div>';

		// Return the template, filters applied.
		return apply_filters( 'envira_gallery_lightbox_template', str_replace( "\n", '', $template ), $data );
	}

	/**
	 * Helper method for retrieving config values.
	 *
	 * @since 1.0.0
	 *
	 * @param string $key The config key to retrieve.
	 * @param array  $data The gallery data to use for retrieval.
	 * @return string     Key value on success, default if not set.
	 */
	public function get_config( $key, $data ) {

		return isset( $data['config'][ $key ] ) ? $data['config'][ $key ] : $this->common->get_config_default( $key );
	}

	/**
	 * Helper method to minify a string of data.
	 *
	 * @since 1.0.4
	 *
	 * @param string  $string_data String of data to minify.
	 * @param boolean $strip_double_forward_slashes stirpe forward slashes.
	 *
	 * @return string $string Minified string of data.
	 */
	public function minify( $string_data, $strip_double_forward_slashes = true ) {

		// Added a switch for stripping double forwardslashes.
		// This can be disabled when using URLs in JS, to ensure http:// doesn't get removed.
		// All other comment removal and minification will take place.
		$strip_double_forward_slashes = apply_filters( 'envira_minify_strip_double_forward_slashes', $strip_double_forward_slashes );

		if ( $strip_double_forward_slashes ) {
			$clean = preg_replace( '/((?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:\/\/.*))/', '', $string_data );
		} else {
			// Use less aggressive method.
			$clean = preg_replace( '!/\*.*?\*/!s', '', $string_data );
			$clean = preg_replace( '/\n\s*\n/', "\n", $clean );
		}

		$clean = str_replace( [ "\r\n", "\r", "\t", "\n", '  ', '    ', '     ' ], '', $clean );

		return apply_filters( 'envira_gallery_minified_string', $clean, $string_data );
	}

	/**
	 * I'm sure some plugins mean well, but they go a bit too far trying to reduce
	 * conflicts without thinking of the consequences.
	 *
	 * 1. Prevents Foobox from completely borking envirabox as if Foobox rules the world.
	 *
	 * @since 1.0.0
	 */
	public function plugin_humility() {

		if ( class_exists( 'fooboxV2' ) ) {
			remove_action( 'wp_footer', [ $GLOBALS['foobox'], 'disable_other_lightboxes' ], 200 );
		}

		if ( function_exists( 'is_plugin_active' ) && is_plugin_active( 'enable-media-replace/enable-media-replace.php' ) ) {
			add_action( 'enable-media-replace-upload-done', [ $this, 'emr_clear_envira_cache' ], 10, 3 );
		}
	}

	/**
	 * Specific function that clears gallery cache when a photo gets replaced by other third-party plugins.
	 *
	 * @since 1.8.4.0
	 *
	 * @param string $target_url Target URL.
	 * @param string $source_url Source URL.
	 * @param int    $post_id Post ID.
	 */
	public function emr_clear_envira_cache( $target_url = false, $source_url = false, $post_id = false ) {

		$has_gallery = get_post_meta( $post_id, '_eg_has_gallery', true );

		if ( function_exists( 'flush_gallery_caches' ) && count( $has_gallery ) > 0 ) :

			foreach ( $has_gallery as $gallery_id ) {
				flush_gallery_caches( $gallery_id );
			}

		endif;
	}

	/**
	 * Outputs only the first image of the gallery inside a regular <div> tag
	 * to avoid styling issues with feeds.
	 *
	 * @since 1.0.5
	 *
	 * @param array $data      Array of gallery data.
	 * @return string $gallery Custom gallery output for feeds.
	 */
	public function do_feed_output( $data ) {

		$gallery = '<div class="envira-gallery-feed-output">';
		foreach ( $data['gallery'] as $id => $item ) {
			// Skip over images that are pending (ignore if in Preview mode).
			if ( isset( $item['status'] ) && 'pending' === $item['status'] && ! is_preview() ) {
				continue;
			}

			$imagesrc = $this->get_image_src( $id, $item, $data );
			$gallery .= '<img class="envira-gallery-feed-image" src="' . esc_url( $imagesrc ) . '" title="' . trim( esc_html( $item['title'] ) ) . '" alt="' . trim( esc_html( $item['alt'] ) ) . '" />';
			break;
		}
		$gallery .= '</div>';

		return apply_filters( 'envira_gallery_feed_output', $gallery, $data );
	}

	/**
	 * Returns a set of indexable image links to allow SEO indexing for preloaded images.
	 *
	 * @since 1.0.0
	 *
	 * @param mixed $id       The slider ID to target.
	 * @return string $images String of indexable image HTML.
	 */
	public function get_indexable_images( $id ) {

		// If there are no images, don't do anything.
		$images = '';
		$i      = 1;
		if ( empty( $this->index[ $id ] ) ) {
			return $images;
		}

		foreach ( (array) $this->index[ $id ] as $attach_id => $data ) {
			$images .= '<img src="' . esc_url( $data['src'] ) . '" alt="' . esc_attr( $data['alt'] ) . '" />';
			++$i;
		}

		return apply_filters( 'envira_gallery_indexable_images', $images, $this->index, $id );
	}

	/**
	 * Helper Method to check if url is an image.
	 *
	 * @access public
	 * @param mixed $url Url of unknown.
	 * @return boolean
	 */
	public function is_image( $url ) {

		$p = strrpos( $url, '.' );

		if ( false === $p ) {

			return false;

		}

		$extension = strtolower( trim( substr( $url, $p ) ) );

		$img_extensions = [ '.gif', '.jpg', '.jpeg', '.png', '.tiff', '.tif', '.webp' ];

		if ( in_array( $extension, $img_extensions, true ) ) {

			return true;

		}

		return false;
	}

	/**
	 * Returns the singleton instance of the class.
	 *
	 * @since 1.0.0
	 *
	 * @return object The Envira_Gallery_Shortcode object.
	 */
	public static function get_instance() {

		if ( ! isset( self::$instance ) && ! ( self::$instance instanceof Envira_Gallery_Shortcode ) ) {
			self::$instance = new Envira_Gallery_Shortcode();
		}

		return self::$instance;
	}
}

// Load the shortcode class.
$envira_gallery_shortcode = Envira_Gallery_Shortcode::get_instance();
