✏️ Editing: gallery-slide.php Writable

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Border;

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

class Nighty_Elementor_Gallery_Slide extends Widget_Base {

public function get_name() {
		return 'nighty_elementor_gallery_slide';
	}

public function get_title() {
		return esc_html__( 'Gallery Slide', 'nighty' );
	}

public function get_icon() {
		return ' eicon-slider-album';
	}

public function get_categories() {
		return [ 'nighty' ];
	}

public function get_script_depends() {
		wp_enqueue_style( 'fancybox', get_template_directory_uri().'/assets/libs/fancybox/fancybox.css' );
		wp_enqueue_script( 'fancybox', get_template_directory_uri().'/assets/libs/fancybox/fancybox.umd.js', array('jquery'), false, true );

return [ 'nighty-elementor-gallery-slide' ];
	}
	
	// Add Your Controll In This Function
	protected function register_controls() {

$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
			]
		);

$this->add_control(
				'template',
				[
					'label' => esc_html__( 'Template', 'nighty' ),
					'type' => Controls_Manager::SELECT,
					'default' => 'template1',
					'options' => [
						'template1' => esc_html__('Template 1', 'nighty'),
						'template2' => esc_html__('Template 2', 'nighty'),
					]
				]
			);
			
			$this->add_control(
				'icon',
				[
					'label' => esc_html__( 'Icon', 'nighty' ),
					'type' => \Elementor\Controls_Manager::ICONS,
					'default' => [
						'value' => 'fab fa-instagram',
						'library' => 'all',
					],		
				]
			);

$this->add_control(
				'image_gallery',
				[
					'label' => esc_html__( 'Add Images', 'nighty' ),
					'type' => Controls_Manager::GALLERY,
					'show_label' => false,
					'dynamic' => [
						'active' => true,
					],
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Image_Size::get_type(),
				[
					'name' => 'medium', // Usage: `{name}_size` and `{name}_custom_dimension`
					'exclude' => [ 'custom' ],
					'default' => 'medium',
					'separator' => 'none',
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_additional_options',
			[
				'label' => esc_html__( 'Additional Options', 'nighty' ),
			]
		);

$this->add_control(
				'margin_items',
				[
					'label'   => esc_html__( 'Margin Right Items', 'nighty' ),
					'type'    => Controls_Manager::NUMBER,
					'default' => 30,
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'margin_items_v2',
				[
					'label'   => esc_html__( 'Margin Right Items', 'nighty' ),
					'type'    => Controls_Manager::NUMBER,
					'default' => 0,
					'condition' => [
						'template' => 'template2',
					],
				]
			);

$this->add_control(
				'item_number',
				[
					'label'       => esc_html__( 'Item Number', 'nighty' ),
					'type'        => Controls_Manager::NUMBER,
					'description' => esc_html__( 'Number Item', 'nighty' ),
					'default'     => 5,
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'item_number_v2',
				[
					'label'       => esc_html__( 'Item Number', 'nighty' ),
					'type'        => Controls_Manager::NUMBER,
					'description' => esc_html__( 'Number Item', 'nighty' ),
					'default'     => 6,
					'condition' => [
						'template' => 'template2',
					],
				]
			);

$this->add_control(
				'slides_to_scroll',
				[
					'label'       => esc_html__( 'Slides to Scroll', 'nighty' ),
					'type'        => Controls_Manager::NUMBER,
					'description' => esc_html__( 'Set how many slides are scrolled per swipe.', 'nighty' ),
					'default'     => 1,
				]
			);

$this->add_control(
				'pause_on_hover',
				[
					'label'   => esc_html__( 'Pause on Hover', 'nighty' ),
					'type'    => Controls_Manager::SWITCHER,
					'default' => 'yes',
					'options' => [
						'yes' => esc_html__( 'Yes', 'nighty' ),
						'no'  => esc_html__( 'No', 'nighty' ),
					],
					'frontend_available' => true,
				]
			);

$this->add_control(
				'infinite',
				[
					'label'   => esc_html__( 'Infinite Loop', 'nighty' ),
					'type'    => Controls_Manager::SWITCHER,
					'default' => 'yes',
					'options' => [
						'yes' => esc_html__( 'Yes', 'nighty' ),
						'no'  => esc_html__( 'No', 'nighty' ),
					],
					'frontend_available' => true,
				]
			);

$this->add_control(
				'autoplay',
				[
					'label'   => esc_html__( 'Autoplay', 'nighty' ),
					'type'    => Controls_Manager::SWITCHER,
					'default' => 'yes',
					'options' => [
						'yes' => esc_html__( 'Yes', 'nighty' ),
						'no'  => esc_html__( 'No', 'nighty' ),
					],
					'frontend_available' => true,
				]
			);

$this->add_control(
				'autoplay_speed',
				[
					'label'     => esc_html__( 'Autoplay Speed', 'nighty' ),
					'type'      => Controls_Manager::NUMBER,
					'default'   => 3000,
					'step'      => 500,
					'condition' => [
						'autoplay' => 'yes',
					],
					'frontend_available' => true,
				]
			);

$this->add_control(
				'smartspeed',
				[
					'label'   => esc_html__( 'Smart Speed', 'nighty' ),
					'type'    => Controls_Manager::NUMBER,
					'default' => 3000,
				]
			);

$this->add_control(
				'nav_control',
				[
					'label'   => esc_html__( 'Show Nav', 'nighty' ),
					'type'    => Controls_Manager::SWITCHER,
					'default' => 'yes',
					'options' => [
						'yes' => esc_html__( 'Yes', 'nighty' ),
						'no'  => esc_html__( 'No', 'nighty' ),
					],
					'frontend_available' => true,
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->end_controls_section();

//SECTION TAB STYLE General
		$this->start_controls_section(
			'section_general_style',
			[
				'label' => esc_html__( 'General', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
			]
		);

$this->add_responsive_control(
				'icon_box_size',
				[
					'label' => esc_html__( 'Icon Size', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%' ],
					'range' => [
						'px' => [
							'min' => 10,
							'max' => 100,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-stage-outer .owl-stage .owl-item .gallery-box .list-gallery .icon-box i' => 'font-size: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'icon_box_color',
				[
					'label' => esc_html__( 'Icon Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-stage-outer .owl-stage .owl-item .gallery-box .list-gallery .icon-box i' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'image_overlay_hover',
				[
					'label' => esc_html__( 'Overlay Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-stage-outer .gallery-box .gallery-fancybox:before' => 'background-color: {{VALUE}}',
					],
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->add_control(
				'image_overlay_hover_opacity',
				[
					'label' => esc_html__( 'Overlay Opacity', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px'],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 1,
							'step' => 0.01,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-stage-outer .gallery-box .gallery-fancybox:before' => 'opacity: {{SIZE}};',
					],
					'condition' => [
						'template' => 'template1',
					],
				]
			);

$this->end_controls_section();
		
		//SECTION TAB STYLE NAV
		$this->start_controls_section(
			'section_nav',
			[
				'label' 	=> esc_html__( 'Nav', 'nighty' ),
				'tab' 		=> Controls_Manager::TAB_STYLE,
				'condition' => [
					'nav_control' => 'yes',
					'template' => 'template1',
				],
			]
		);

$this->add_responsive_control(
				'nav_size',
				[
					'label' 		=> esc_html__( 'Nav Size', 'nighty' ),
					'type' 			=> Controls_Manager::SLIDER,
					'size_units' 	=> [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' 	=> 0,
							'max' 	=> 300,
							'step' 	=> 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'icon_size',
				[
					'label' 		=> esc_html__( 'Icon Size', 'nighty' ),
					'type' 			=> Controls_Manager::SLIDER,
					'size_units' 	=> [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' 	=> 0,
							'max' 	=> 100,
							'step' 	=> 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav button i' => 'font-size: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'icon_spacing',
				[
					'label' 		=> esc_html__( 'Icon Spacing', 'nighty' ),
					'type' 			=> Controls_Manager::SLIDER,
					'size_units' 	=> [ 'px' , '%', 'em', 'rem'],
					'range' => [
						'px' => [
							'min' 	=> 0,
							'max' 	=> 100,
							'step' 	=> 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' 	=> [
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav' => 'gap: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_responsive_control(
				'border_radius_nav',
				array(
					'label'      => esc_html__( 'Border Radius', 'nighty' ),
					'type'       => Controls_Manager::DIMENSIONS,
					'size_units' => array( 'px', '%' ),
					'selectors'  => array(
						'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					),
				)
			);

$this->start_controls_tabs( 'tabs_nav_style' );

$this->start_controls_tab(
		            'tab_nav',
		            [
		                'label' => esc_html__( 'Normal', 'nighty' ),
		            ]
		        );

$this->add_control(
						'nav_color',
						[
							'label'     => esc_html__( 'Icon Color', 'nighty' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav button i' => 'color : {{VALUE}};',		
							],
						]
					);

$this->add_control(
						'nav_bg',
						[
							'label'     => esc_html__( 'Background Color', 'nighty' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav' => 'background-color : {{VALUE}};',
							],
						]
					);

$this->end_controls_tab();

$this->start_controls_tab(
		            'tab_hover',
		            [
		                'label' => esc_html__( 'Hover', 'nighty' ),
		            ]
		        );
		        	$this->add_control(
						'nav_color_hover',
						[
							'label'     => esc_html__( 'Icon Color', 'nighty' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav button:hover i' => 'color : {{VALUE}};',		
							],
						]
					);

$this->add_control(
						'nav_bg_hover',
						[
							'label'     => esc_html__( 'Background Color', 'nighty' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => [
								'{{WRAPPER}} .ova-gallery-slide .gallery-slide .owl-nav:hover' => 'background-color : {{VALUE}};',
							],
						]
					);

$this->end_controls_tab();
			$this->end_controls_tabs();

$this->end_controls_section();
		// END SECTION TAB STYLE NAV

}

// Render Template Here
	protected function render() {
		$settings = $this->get_settings();

// image gallery
		$template     = $settings['template'];
		$image_gallery = $settings['image_gallery'];
		$data_gallery  = array();

// data option for slide
		$data_options['template'] = $template;

if( $template == 'template1' ){
			$data_options['items']      = $settings['item_number'];
			$data_options['margin']     = $settings['margin_items'];
		}

if( $template == 'template2' ){
			$data_options['items']      = $settings['item_number_v2'];
			$data_options['margin']     = $settings['margin_items_v2'];
		}

$data_options['slideBy']            = $settings['slides_to_scroll'];
		$data_options['autoplayHoverPause'] = $settings['pause_on_hover'] === 'yes' ? true : false;
		$data_options['loop']               = $settings['infinite'] === 'yes' ? true : false;
		$data_options['autoplay']           = $settings['autoplay'] === 'yes' ? true : false;
		$data_options['autoplayTimeout']    = $settings['autoplay_speed'];
		$data_options['smartSpeed']         = $settings['smartspeed'];
		$data_options['nav']                = $settings['nav_control'] === 'yes' ? true : false;
		$data_options['rtl']				= is_rtl() ? true: false;

<?php if ( !empty($image_gallery) ) : ?>

<?php foreach ( $image_gallery as $k => $image ) {

$image_id 		= $image['id'];

$url 	  		= $image['url'] ;
	                        $thumbnail_url  = wp_get_attachment_image_src( $image_id, $settings['medium_size'] )[0];

$alt 			= get_post_meta($image_id, '_wp_attachment_image_alt', true) ? get_post_meta($image_id, '_wp_attachment_image_alt', true) : esc_html__('Gallery Slide','nighty');

$caption        = wp_get_attachment_caption( $image_id );
	                        
	                        if ( $caption == '') {
	                        	$caption = $alt;
	                        }

array_push( $data_gallery , array(
			                    'src'       => $url,
			                    'caption'   => $caption,
			                    'thumb'     => $thumbnail_url,
			                ));
	                        
						?>
							<div class="gallery-box ">
	                            
	                            <a class="gallery-fancybox" data-index="<?php echo esc_attr( $k ); ?>" href="javascript:;">
									<div class="list-gallery">
		                                
										<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $alt ); ?>">

</div>
								</a>

</div>

<?php } ?>
						
					</div>

</div>

<?php endif; ?>

<?php
	}
}
$widgets_manager->register( new Nighty_Elementor_Gallery_Slide() );

🔐 Sid Gifari File Manager Pro