Elementor Simple Gallery

				
					<?php
/**
 * Plugin Name: Elementor Simple Gallery
 * Description: Lightweight Elementor gallery widget using native responsive images and a vanilla JS lightbox (no JS image loading).
 * Version: 1.0
 * Author: Tyler Ager
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/*--------------------------------------------------------------
# Register Widget
--------------------------------------------------------------*/
add_action( 'elementor/widgets/register', function( $widgets_manager ) {

	class Elementor_Simple_Gallery_Widget extends \Elementor\Widget_Base {

		public function get_name() { return 'simple_gallery'; }
		public function get_title() { return __( 'Simple Gallery', 'elementor' ); }
		public function get_icon() { return 'eicon-gallery-grid'; }
		public function get_categories() { return [ 'basic' ]; }

		protected function register_controls() {

			$this->start_controls_section( 'content_section', [
				'label' => __( 'Gallery', 'elementor' ),
				'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
			]);

			$this->add_control( 'gallery', [
				'label' => __( 'Add Images', 'elementor' ),
				'type'  => \Elementor\Controls_Manager::GALLERY,
			]);

			$this->add_responsive_control( 'columns', [
				'label'   => __( 'Columns', 'elementor' ),
				'type'    => \Elementor\Controls_Manager::NUMBER,
				'min'     => 1,
				'max'     => 6,
				'default' => 2,
			]);

			$this->add_control( 'gap', [
				'label'   => __( 'Gap (px)', 'elementor' ),
				'type'    => \Elementor\Controls_Manager::NUMBER,
				'default' => 10,
			]);

			$this->add_control( 'border_radius', [
				'label'   => __( 'Border Radius (px)', 'elementor' ),
				'type'    => \Elementor\Controls_Manager::NUMBER,
				'default' => 0,
			]);

			$this->add_control( 'aspect_ratio', [
				'label'   => __( 'Aspect Ratio', 'elementor' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => '1/1',
				'options' => [
					'1/1'  => 'Square 1:1',
					'4/3'  => 'Landscape 4:3',
					'3/2'  => 'Landscape 3:2',
					'16/9' => 'Widescreen 16:9',
					'2/3'  => 'Portrait 2:3',
					'3/4'  => 'Portrait 3:4',
					'9/16' => 'Tall 9:16',
					'auto' => 'Auto (use original)',
				],
			]);

			$image_sizes = get_intermediate_image_sizes();
			$options = array_combine( $image_sizes, $image_sizes );
			$options['full'] = __( 'Full Size', 'elementor' );

			$this->add_control( 'thumb_size', [
				'label'   => __( 'Thumbnail Size', 'elementor' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => 'medium',
				'options' => $options,
			]);

			$this->end_controls_section();
		}

		public function render_plain_content() {
			$this->render();
		}

		protected function render() {
			$s = $this->get_settings_for_display();
			$imgs = $s['gallery'];
			if ( empty( $imgs ) ) return;

			$cols       = max( 1, (int) $s['columns'] );
			$gap        = (int) $s['gap'];
			$radius     = (int) $s['border_radius'];
			$ratio      = esc_attr( $s['aspect_ratio'] );
			$thumb_size = ! empty( $s['thumb_size'] ) ? $s['thumb_size'] : 'medium';

			$cols_desktop = max( 1, (int) ( $s['columns'] ?? 2 ) );
			$cols_tablet  = max( 1, (int) ( $s['columns_tablet'] ?? 2 ) );
			$cols_mobile  = max( 1, (int) ( $s['columns_mobile'] ?? 1 ) );

			$container_factor_desktop = apply_filters( 'ta_simple_gallery_container_factor_desktop', 0.5 );
			$container_factor_tablet  = apply_filters( 'ta_simple_gallery_container_factor_tablet', 0.8 );
			$container_factor_mobile  = apply_filters( 'ta_simple_gallery_container_factor_mobile', 1.0 );

			$vw_desktop = round( (100 * $container_factor_desktop) / $cols_desktop, 2 );
			$vw_tablet  = round( (100 * $container_factor_tablet) / $cols_tablet, 2 );
			$vw_mobile  = round( (100 * $container_factor_mobile) / $cols_mobile, 2 );

			$sizes_attr = sprintf(
				'(max-width: 600px) %svw, (max-width: 1024px) %svw, %svw',
				$vw_mobile,
				$vw_tablet,
				$vw_desktop
			);

			echo '<div class="simple-gallery" style="--cols:' . $cols . ';--gap:' . $gap . 'px;--radius:' . $radius . 'px;--ratio:' . $ratio . ';">';

			$i = 0;
			foreach ( $imgs as $img ) {
				$i++;
				$id   = $img['id'];
				$full = wp_get_attachment_image_url( $id, 'full' );
				$alt  = esc_attr( get_post_meta( $id, '_wp_attachment_image_alt', true ) );

				$src    = wp_get_attachment_image_url( $id, $thumb_size );
				$srcset = wp_get_attachment_image_srcset( $id, $thumb_size );

				echo '<figure data-full="' . esc_url( $full ) . '" data-index="' . $i . '">';
				echo '<img decoding="async" src="' . esc_url( $src ) . '" srcset="' . esc_attr( $srcset ) . '" sizes="' . esc_attr( $sizes_attr ) . '" alt="' . $alt . '" loading="lazy">';
				echo '</figure>';
			}

			echo '
				<div class="lightbox" id="ta-lightbox">
					<span class="nav prev" role="button">&#10094;</span>
					<img decoding="async" class="lightbox-image" src="" alt="">
					<span class="nav next" role="button">&#10095;</span>
					<span class="close" role="button">✕</span>
				</div>
			</div>';
		}
	}

	$widgets_manager->register( new Elementor_Simple_Gallery_Widget() );
});

/*--------------------------------------------------------------
# Conditional Asset Loading
--------------------------------------------------------------*/

add_action( 'elementor/frontend/after_render', function( $widget ) {
	if ( $widget->get_name() === 'simple_gallery' ) {
		if ( ! defined( 'TA_SIMPLE_GALLERY_LOADED' ) ) {
			define( 'TA_SIMPLE_GALLERY_LOADED', true );
			ta_simple_gallery_enqueue_assets();
		}
	}
}, 10, 1 );

add_action( 'elementor/editor/after_enqueue_scripts', 'ta_simple_gallery_enqueue_assets' );
add_action( 'elementor/preview/enqueue_styles', 'ta_simple_gallery_enqueue_assets' );

function ta_simple_gallery_enqueue_assets() {
	$plugin_url = plugin_dir_url( __FILE__ );

	wp_enqueue_style(
		'simple-gallery',
		$plugin_url . 'assets/simple-gallery.css',
		[],
		'2.4.3'
	);

	wp_enqueue_script(
		'simple-gallery',
		$plugin_url . 'assets/simple-gallery.js',
		[],
		'2.4.3',
		true
	);
}