File Content: poolax-gallery.php <?php use \Elementor\Widget_Base; use \Elementor\Controls_Manager; use \Elementor\Group_Control_Typography; use \Elementor\Repeater; use \Elementor\Utils; use \Elementor\Group_Control_Border; /** * * Gallery Widget . * */ class Poolax_Gallery extends Widget_Base { public function get_name() { return 'poolaxgallery'; } public function get_title() { return __( 'Gallery', 'poolax' ); } public function get_icon() { return 'th-icon'; } public function get_categories() { return [ 'poolax' ]; } protected function register_controls() { $this->start_controls_section( 'counter_section', [ 'label' => __( 'Gallery', 'poolax' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'layout_style', [ 'label' => __( 'Layout Style', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => '1', 'options' => [ 'col' => __( 'Style One', 'poolax' ), '2' => __( 'Style Two', 'poolax' ), '3' => __( 'Style Three', 'poolax' ), '4' => __( 'Style Four', 'poolax' ), '5' => __( 'Style Five', 'poolax' ), '6' => __( 'Style Six', 'poolax' ), ], ] ); $this->add_control( 'gallery', [ 'label' => esc_html__( 'Add Gallery Slider', 'poolax' ), 'type' => \Elementor\Controls_Manager::GALLERY, 'default' => [], 'condition' => [ 'layout_style' => ['5', '6'] ], ] ); $this->add_control( 'column_desk', [ 'label' => __( 'Desktop Column Item', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => 'col-xl-3', 'options' => [ 'col-xl-12' => __( 'Show Item 1', 'poolax' ), 'col-xl-6' => __( 'Show Item 2', 'poolax' ), 'col-xl-4' => __( 'Show Item 3', 'poolax' ), 'col-xl-3' => __( 'Show Item 4', 'poolax' ), 'col-xl-2' => __( 'Show Item 6', 'poolax' ), 'col-xl-1' => __( 'Show Item 12', 'poolax' ), ], 'condition' => [ 'layout_style' => ['6'] ], ] ); $this->add_control( 'column_laptop', [ 'label' => __( 'Laptop Column Item', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => 'col-lg-4', 'options' => [ 'col-lg-12' => __( 'Show Item 1', 'poolax' ), 'col-lg-6' => __( 'Show Item 2', 'poolax' ), 'col-lg-4' => __( 'Show Item 3', 'poolax' ), 'col-lg-3' => __( 'Show Item 4', 'poolax' ), 'col-lg-2' => __( 'Show Item 6', 'poolax' ), 'col-lg-1' => __( 'Show Item 12', 'poolax' ), ], 'condition' => [ 'layout_style' => ['6'] ], ] ); $this->add_control( 'column_tablet', [ 'label' => __( 'Tablet Column Item', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => 'col-sm-6', 'options' => [ 'col-sm-12' => __( 'Show Item 1', 'poolax' ), 'col-sm-6' => __( 'Show Item 2', 'poolax' ), 'col-sm-4' => __( 'Show Item 3', 'poolax' ), 'col-sm-3' => __( 'Show Item 4', 'poolax' ), 'col-sm-2' => __( 'Show Item 6', 'poolax' ), 'col-sm-1' => __( 'Show Item 12', 'poolax' ), ], 'condition' => [ 'layout_style' => ['6'] ], ] ); $this->add_control( 'column_mobile', [ 'label' => __( 'Mobile Column Item', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => 'col-12', 'options' => [ 'col-12' => __( 'Show Item 1', 'poolax' ), 'col-6' => __( 'Show Item 2', 'poolax' ), 'col-4' => __( 'Show Item 3', 'poolax' ), 'col-3' => __( 'Show Item 4', 'poolax' ), 'col-2' => __( 'Show Item 6', 'poolax' ), 'col-1' => __( 'Show Item 12', 'poolax' ), ], 'condition' => [ 'layout_style' => ['6'] ], ] ); poolax_media_fields($this, 'shape', 'Choose Shape', ['1']); $repeater = new Repeater(); poolax_media_fields($repeater, 'image', 'Choose Image'); poolax_general_fields($repeater, 'subtitle', 'Subtitle', 'TEXT', 'Residential'); poolax_general_fields($repeater, 'title', 'Title', 'TEXTAREA', 'Pool Water Cleaning'); poolax_url_fields($repeater, 'button_url', 'Button URL'); $this->add_control( 'gallery_list', [ 'label' => __( 'Gallery Lists', 'poolax' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'title' => __( 'Pool Water Cleaning', 'poolax' ), ], ], 'condition' => [ 'layout_style' => ['1', '2', '3'] ], ] ); $repeater = new Repeater(); poolax_media_fields($repeater, 'image', 'Choose Image'); poolax_general_fields($repeater, 'title', 'Title', 'TEXTAREA2', 'Pool Water Cleaning'); poolax_general_fields($repeater, 'desc', 'Description', 'TEXTAREA', ''); $this->add_control( 'gallery_list2', [ 'label' => __( 'Gallery Lists', 'poolax' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'title' => __( 'Pool Water Cleaning', 'poolax' ), ], ], 'condition' => [ 'layout_style' => ['4'] ], ] ); $this->end_controls_section(); //--------------------------------------- //Style Section Start //--------------------------------------- //-------Subtitle Style------- poolax_common_style_fields( $this, 'subtitle', 'Subtitle', '{{WRAPPER}} .th-sub', ['1', '2', '3'] ); //-------Title Style------- poolax_common_style_fields( $this, 'title', 'Title', '{{WRAPPER}} .box-title a, {{WRAPPER}} .box-title', ['1', '2', '3', '4'] ); poolax_common_style_fields( $this, 'desc', 'Description', '{{WRAPPER}} .gallery-text', ['4']); } protected function render() { $settings = $this->get_settings_for_display(); if( $settings['layout_style'] == '2' ){ echo '<div class="row th-carousel project-slider-2" id="ProjectSlide2" data-slide-show="1" data-xl-slide-show="1" data-lg-slide-show="1" data-md-slide-show="1" data-sm-slide-show="1" data-xs-slide-show="1" data-center-mode="true" data-xl-center-mode="true">'; foreach( $settings['gallery_list'] as $data ){ echo '<div class="col-xl-4 col-xxl-3">'; echo '<div class="project-item">'; echo '<div class="project-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['image']['url'] ), )); echo '</div>'; echo '<div class="project-content">'; echo '<div class="media-left">'; if(!empty($data['subtitle'])){ echo '<p class="project-subtitle th-sub">'.wp_kses_post($data['subtitle']).'</p>'; } if(!empty($data['title'])){ echo '<h4 class="box-title"><a href="'.esc_url( $data['button_url']['url'] ).'">'.wp_kses_post($data['title']).'</a></h4>'; } echo '<a href="'.esc_url( $data['image']['url'] ).'" class="icon-btn popup-image"><i class="far fa-plus"></i></a>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '3' ){ echo '<div class="row gallery-row filter-active">'; foreach( $settings['gallery_list'] as $data ){ echo '<div class="col-md-6 col-xxl-auto filter-item">'; echo '<div class="gallery-card">'; echo '<div class="gallery-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['image']['url'] ), )); echo '</div>'; echo '<div class="gallery-content">'; echo '<div class="media-left">'; if(!empty($data['subtitle'])){ echo '<span class="gallery-subtitle th-sub">'.wp_kses_post($data['subtitle']).'</span>'; } if(!empty($data['title'])){ echo '<h4 class="box-title"><a href="'.esc_url( $data['button_url']['url'] ).'">'.wp_kses_post($data['title']).'</a></h4>'; } echo '<a href="'.esc_url( $data['image']['url'] ).'" class="icon-btn popup-image"><i class="far fa-plus"></i></a>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '4' ){ echo '<div class="gallery-box_wrapp">'; foreach( $settings['gallery_list2'] as $data ){ echo '<div class="gallery-box">'; echo '<div class="gallery-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['image']['url'] ), )); echo '</div>'; echo '<div class="gallery-content">'; if(!empty($data['title'])){ echo '<h2 class="box-title">'.wp_kses_post($data['title']).'</h2>'; } if(!empty($data['desc'])){ echo '<p class="gallery-text th-sub">'.wp_kses_post($data['desc']).'</p>'; } echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '5' ){ echo '<div class="row th-carousel gallery-slider-2" id="gallerySlide4" data-slide-show="1" data-xl-slide-show="1" data-lg-slide-show="1" data-md-slide-show="1" data-sm-slide-show="1" data-xs-slide-show="1" data-center-mode="true" data-xl-center-mode="true" data-autoplay="false" data-adaptive-height="true">'; foreach ( $settings['gallery'] as $data ){ echo '<div class="col-xl-4 col-xxl-3">'; echo '<div class="gallery-item">'; echo '<div class="gallery-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['url'] ), ) ); echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '6' ){ $desk = $settings['column_desk']; $laptop = $settings['column_laptop']; $tablet = $settings['column_tablet']; $mobile = $settings['column_mobile']; echo '<div class="row g-3 g-md-4 gallery-slider-2" id="gallerySlide4">'; foreach ( $settings['gallery'] as $data ){ echo '<div class="'.$desk .' '. $laptop .' '. $tablet .' '. $mobile.'">'; echo '<div class="gallery-card">'; echo '<div class="gallery-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['url'] ), ) ); echo '</div>'; echo '<div class="gallery-content">'; echo '<div class="media-left">'; echo '<a href="'.esc_url( $data['url'] ).'" class="icon-btn popup-image"><i class="far fa-plus"></i></a>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }else{ echo '<div class="row th-carousel number-dots project-slider-1" id="projectSlider1" data-slide-show="1" data-xl-slide-show="1" data-lg-slide-show="1" data-md-slide-show="1" data-sm-slide-show="1" data-xs-slide-show="1" data-center-mode="true" data-xl-center-mode="true" data-dots="true" data-xl-dots="true" data-ml-dots="true" data-lg-dots="true" data-md-dots="true" >'; foreach( $settings['gallery_list'] as $data ){ echo '<div class="col-lg-4 col-xl-3">'; echo '<div class="project-card">'; echo '<div class="project-img">'; echo poolax_img_tag( array( 'url' => esc_url( $data['image']['url'] ), )); echo '</div>'; echo '<div class="project-content" data-bg-src="'.esc_url($settings['shape']['url']).'">'; if(!empty($data['subtitle'])){ echo '<p class="project-subtitle th-sub">'.wp_kses_post($data['subtitle']).'</p>'; } if(!empty($data['title'])){ echo '<h4 class="box-title"><a href="'.esc_url( $data['button_url']['url'] ).'">'.wp_kses_post($data['title']).'</a></h4>'; } echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; } } } Submit