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; ?>
$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, )); ?>
<?php echo esc_attr( $alt ); ?>
'true' ] ); ?>
register( new Nighty_Elementor_Gallery_Slide() );