protected function _register_controls()
{
$this->start_controls_section('section_image', ['label' => __('Image', 'elementor')]);
$this->add_control('image', ['label' => __('Choose Image', 'elementor'), 'type' => Controls_Manager::MEDIA, 'default' => ['url' => Utils::get_placeholder_image_src()]]);
$this->add_group_control(Group_Control_Image_Size::get_type(), ['name' => 'image', 'label' => __('Image Size', 'elementor'), 'default' => 'large']);
$this->add_responsive_control('align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right']], 'default' => 'center', 'selectors' => ['{{WRAPPER}}' => 'text-align: {{VALUE}};']]);
$this->add_control('caption', ['label' => __('Caption', 'elementor'), 'type' => Controls_Manager::TEXT, 'default' => '', 'placeholder' => __('Enter your caption about the image', 'elementor'), 'title' => __('Input image caption here', 'elementor')]);
$this->add_control('link_to', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => ['none' => __('None', 'elementor'), 'file' => __('Media File', 'elementor'), 'custom' => __('Custom URL', 'elementor')]]);
$this->add_control('link', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::URL, 'placeholder' => __('http://your-link.com', 'elementor'), 'condition' => ['link_to' => 'custom'], 'show_label' => false]);
$this->add_control('view', ['label' => __('View', 'elementor'), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional']);
$this->end_controls_section();
$this->start_controls_section('section_style_image', ['label' => __('Image', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('space', ['label' => __('Size (%)', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 100, 'unit' => '%'], 'size_units' => ['%'], 'range' => ['%' => ['min' => 1, 'max' => 100]], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'max-width: {{SIZE}}{{UNIT}};']]);
$this->add_control('opacity', ['label' => __('Opacity (%)', 'elementor'), 'type' => Controls_Manager::SLIDER, 'default' => ['size' => 1], 'range' => ['px' => ['max' => 1, 'min' => 0.1, 'step' => 0.01]], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'opacity: {{SIZE}};']]);
$this->add_control('hover_animation', ['label' => __('Hover Animation', 'elementor'), 'type' => Controls_Manager::HOVER_ANIMATION]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'image_border', 'label' => __('Image Border', 'elementor'), 'selector' => '{{WRAPPER}} .elementor-image img']);
$this->add_control('image_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .elementor-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'image_box_shadow', 'selector' => '{{WRAPPER}} .elementor-image img']);
$this->end_controls_section();
$this->start_controls_section('section_style_caption', ['label' => __('Caption', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('caption_align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right'], 'justify' => ['title' => __('Justified', 'elementor'), 'icon' => 'align-justify']], 'default' => '', 'selectors' => ['{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};']]);
$this->add_control('text_color', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .widget-image-caption' => 'color: {{VALUE}};'], 'scheme' => ['type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3]]);
$this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'caption_typography', 'selector' => '{{WRAPPER}} .widget-image-caption', 'scheme' => Scheme_Typography::TYPOGRAPHY_3]);
$this->end_controls_section();
}
protected function _register_controls()
{
$this->start_controls_section('section_gallery', ['label' => __('Image Gallery', 'elementor')]);
$this->add_control('wp_gallery', ['label' => __('Add Images', 'elementor'), 'type' => Controls_Manager::GALLERY]);
$this->add_group_control(Group_Control_Image_Size::get_type(), ['name' => 'thumbnail', 'exclude' => ['custom']]);
$gallery_columns = range(1, 10);
$gallery_columns = array_combine($gallery_columns, $gallery_columns);
$this->add_control('gallery_columns', ['label' => __('Columns', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 4, 'options' => $gallery_columns]);
$this->add_control('gallery_link', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'file', 'options' => ['file' => __('Media File', 'elementor'), 'attachment' => __('Attachment Page', 'elementor'), 'none' => __('None', 'elementor')]]);
$this->add_control('gallery_rand', ['label' => __('Ordering', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['' => __('Default', 'elementor'), 'rand' => __('Random', 'elementor')], 'default' => '']);
$this->add_control('view', ['label' => __('View', 'elementor'), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional']);
$this->end_controls_section();
$this->start_controls_section('section_gallery_images', ['label' => __('Images', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('image_spacing', ['label' => __('Spacing', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['' => __('Default', 'elementor'), 'custom' => __('Custom', 'elementor')], 'prefix_class' => 'gallery-spacing-', 'default' => '']);
$columns_margin = is_rtl() ? '0 0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}};' : '0 -{{SIZE}}{{UNIT}} -{{SIZE}}{{UNIT}} 0;';
$columns_padding = is_rtl() ? '0 0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};' : '0 {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}} 0;';
$this->add_control('image_spacing_custom', ['label' => __('Image Spacing', 'elementor'), 'type' => Controls_Manager::SLIDER, 'show_label' => false, 'range' => ['px' => ['max' => 100]], 'default' => ['size' => 15], 'selectors' => ['{{WRAPPER}} .gallery-item' => 'padding:' . $columns_padding, '{{WRAPPER}} .gallery' => 'margin: ' . $columns_margin], 'condition' => ['image_spacing' => 'custom']]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'image_border', 'label' => __('Image Border', 'elementor'), 'selector' => '{{WRAPPER}} .gallery-item img']);
$this->add_control('image_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .gallery-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->end_controls_section();
$this->start_controls_section('section_caption', ['label' => __('Caption', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('gallery_display_caption', ['label' => __('Display', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => ['' => __('Show', 'elementor'), 'none' => __('Hide', 'elementor')], 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'display: {{VALUE}};']]);
$this->add_control('align', ['label' => __('Alignment', 'elementor'), 'type' => Controls_Manager::CHOOSE, 'options' => ['left' => ['title' => __('Left', 'elementor'), 'icon' => 'align-left'], 'center' => ['title' => __('Center', 'elementor'), 'icon' => 'align-center'], 'right' => ['title' => __('Right', 'elementor'), 'icon' => 'align-right'], 'justify' => ['title' => __('Justified', 'elementor'), 'icon' => 'align-justify']], 'default' => 'center', 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'text-align: {{VALUE}};'], 'condition' => ['gallery_display_caption' => '']]);
$this->add_control('text_color', ['label' => __('Text Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => ['{{WRAPPER}} .gallery-item .gallery-caption' => 'color: {{VALUE}};'], 'condition' => ['gallery_display_caption' => '']]);
$this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'typography', 'label' => __('Typography', 'elementor'), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} .gallery-item .gallery-caption', 'condition' => ['gallery_display_caption' => '']]);
$this->end_controls_section();
}
protected function _register_controls()
{
$this->start_controls_section('section_image_carousel', ['label' => __('Image Carousel', 'elementor')]);
$this->add_control('carousel', ['label' => __('Add Images', 'elementor'), 'type' => Controls_Manager::GALLERY, 'default' => []]);
$this->add_group_control(Group_Control_Image_Size::get_type(), ['name' => 'thumbnail']);
$slides_to_show = range(1, 10);
$slides_to_show = array_combine($slides_to_show, $slides_to_show);
$this->add_control('slides_to_show', ['label' => __('Slides to Show', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '3', 'options' => $slides_to_show]);
$this->add_control('slides_to_scroll', ['label' => __('Slides to Scroll', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => '2', 'options' => $slides_to_show, 'condition' => ['slides_to_show!' => '1']]);
$this->add_control('image_stretch', ['label' => __('Image Stretch', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'no', 'options' => ['no' => __('No', 'elementor'), 'yes' => __('Yes', 'elementor')]]);
$this->add_control('navigation', ['label' => __('Navigation', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'both', 'options' => ['both' => __('Arrows and Dots', 'elementor'), 'arrows' => __('Arrows', 'elementor'), 'dots' => __('Dots', 'elementor'), 'none' => __('None', 'elementor')]]);
$this->add_control('link_to', ['label' => __('Link to', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => ['none' => __('None', 'elementor'), 'file' => __('Media File', 'elementor'), 'custom' => __('Custom URL', 'elementor')]]);
$this->add_control('link', ['label' => 'Link to', 'type' => Controls_Manager::URL, 'placeholder' => __('http://your-link.com', 'elementor'), 'condition' => ['link_to' => 'custom'], 'show_label' => false]);
$this->add_control('view', ['label' => __('View', 'elementor'), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional']);
$this->end_controls_section();
$this->start_controls_section('section_additional_options', ['label' => __('Additional Options', 'elementor')]);
$this->add_control('pause_on_hover', ['label' => __('Pause on Hover', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => ['yes' => __('Yes', 'elementor'), 'no' => __('No', 'elementor')]]);
$this->add_control('autoplay', ['label' => __('Autoplay', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => ['yes' => __('Yes', 'elementor'), 'no' => __('No', 'elementor')]]);
$this->add_control('autoplay_speed', ['label' => __('Autoplay Speed', 'elementor'), 'type' => Controls_Manager::NUMBER, 'default' => 5000]);
$this->add_control('infinite', ['label' => __('Infinite Loop', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'yes', 'options' => ['yes' => __('Yes', 'elementor'), 'no' => __('No', 'elementor')]]);
$this->add_control('effect', ['label' => __('Effect', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => ['slide' => __('Slide', 'elementor'), 'fade' => __('Fade', 'elementor')], 'condition' => ['slides_to_show' => '1']]);
$this->add_control('speed', ['label' => __('Animation Speed', 'elementor'), 'type' => Controls_Manager::NUMBER, 'default' => 500]);
$this->add_control('direction', ['label' => __('Direction', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'ltr', 'options' => ['ltr' => __('Left', 'elementor'), 'rtl' => __('Right', 'elementor')]]);
$this->end_controls_section();
$this->start_controls_section('section_style_navigation', ['label' => __('Navigation', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => ['navigation' => ['arrows', 'dots', 'both']]]);
$this->add_control('heading_style_arrows', ['label' => __('Arrows', 'elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => ['navigation' => ['arrows', 'both']]]);
$this->add_control('arrows_position', ['label' => __('Arrows Position', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'inside', 'options' => ['inside' => __('Inside', 'elementor'), 'outside' => __('Outside', 'elementor')], 'condition' => ['navigation' => ['arrows', 'both']]]);
$this->add_control('arrows_size', ['label' => __('Arrows Size', 'elementor'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['min' => 20, 'max' => 60]], 'selectors' => ['{{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-prev:before, {{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-next:before' => 'font-size: {{SIZE}}{{UNIT}};'], 'condition' => ['navigation' => ['arrows', 'both']]]);
$this->add_control('arrows_color', ['label' => __('Arrows Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-prev:before, {{WRAPPER}} .elementor-image-carousel-wrapper .slick-slider .slick-next:before' => 'color: {{VALUE}};'], 'condition' => ['navigation' => ['arrows', 'both']]]);
$this->add_control('heading_style_dots', ['label' => __('Dots', 'elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => ['navigation' => ['dots', 'both']]]);
$this->add_control('dots_position', ['label' => __('Dots Position', 'elementor'), 'type' => Controls_Manager::SELECT, 'default' => 'outside', 'options' => ['outside' => __('Outside', 'elementor'), 'inside' => __('Inside', 'elementor')], 'condition' => ['navigation' => ['dots', 'both']]]);
$this->add_control('dots_size', ['label' => __('Dots Size', 'elementor'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['min' => 5, 'max' => 10]], 'selectors' => ['{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-dots li button:before' => 'font-size: {{SIZE}}{{UNIT}};'], 'condition' => ['navigation' => ['dots', 'both']]]);
$this->add_control('dots_color', ['label' => __('Dots Color', 'elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-dots li button:before' => 'color: {{VALUE}};'], 'condition' => ['navigation' => ['dots', 'both']]]);
$this->end_controls_section();
$this->start_controls_section('section_style_image', ['label' => __('Image', 'elementor'), 'tab' => Controls_Manager::TAB_STYLE]);
$this->add_control('image_spacing', ['label' => __('Spacing', 'elementor'), 'type' => Controls_Manager::SELECT, 'options' => ['' => __('Default', 'elementor'), 'custom' => __('Custom', 'elementor')], 'default' => '', 'condition' => ['slides_to_show!' => '1']]);
$this->add_control('image_spacing_custom', ['label' => __('Image Spacing', 'elementor'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['max' => 100]], 'default' => ['size' => 20], 'show_label' => false, 'selectors' => ['{{WRAPPER}} .slick-list' => 'margin-left: -{{SIZE}}{{UNIT}};', '{{WRAPPER}} .slick-slide .slick-slide-inner' => 'padding-left: {{SIZE}}{{UNIT}};'], 'condition' => ['image_spacing' => 'custom', 'slides_to_show!' => '1']]);
$this->add_group_control(Group_Control_Border::get_type(), ['name' => 'image_border', 'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-slide-image']);
$this->add_control('image_border_radius', ['label' => __('Border Radius', 'elementor'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => ['{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .slick-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]);
$this->end_controls_section();
}
