register_content_controls(); $this->register_style_controls(); } private function register_content_controls(): void { /* ── Gallery Items ───────────────────────────── */ $this->start_controls_section( 'section_gallery', [ 'label' => __( 'Gallery', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'image', [ 'label' => __( 'Image', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ], ] ); $repeater->add_control( 'caption', [ 'label' => __( 'Caption', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::TEXT, 'dynamic' => [ 'active' => true ], ] ); $repeater->add_control( 'category', [ 'label' => __( 'Category', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'General', 'admore-widgets-suite' ), 'description' => __( 'Used for filter tabs.', 'admore-widgets-suite' ), ] ); $repeater->add_control( 'video_url', [ 'label' => __( 'Video URL (optional)', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::URL, 'description' => __( 'YouTube or Vimeo URL. If set, image becomes the poster.', 'admore-widgets-suite' ), ] ); $repeater->add_control( 'link', [ 'label' => __( 'Custom Link (optional)', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::URL, 'description' => __( 'Overrides lightbox for this item.', 'admore-widgets-suite' ), ] ); $this->add_control( 'gallery_items', [ 'label' => __( 'Gallery Items', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => self::get_default_items(), 'title_field' => '<# if (image.url) { #><# } #>{{{ caption || category }}}', ] ); $this->end_controls_section(); /* ── Layout ──────────────────────────────────── */ $this->start_controls_section( 'section_layout', [ 'label' => __( 'Layout', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'layout', [ 'label' => __( 'Layout', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'masonry', 'options' => [ 'grid' => __( 'Grid', 'admore-widgets-suite' ), 'masonry' => __( 'Masonry', 'admore-widgets-suite' ), 'justified' => __( 'Justified', 'admore-widgets-suite' ), ], ] ); $this->add_control( 'justified_height', [ 'label' => __( 'Row Height', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 100, 'max' => 400 ] ], 'default' => [ 'size' => 200 ], 'condition' => [ 'layout' => 'justified' ], ] ); $this->add_group_control( \Elementor\Group_Control_Image_Size::get_type(), [ 'name' => 'image_size', 'default' => 'large', 'separator' => 'before', ] ); $this->add_control( 'random_order', [ 'label' => __( 'Random Order', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'return_value' => 'yes', 'separator' => 'before', ] ); $this->add_responsive_control( 'columns', [ 'label' => __( 'Columns', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => '3', 'options' => [ '1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5', '6' => '6' ], ] ); $this->add_responsive_control( 'gap', [ 'label' => __( 'Gap', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 40 ] ], 'default' => [ 'size' => 12 ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-grid' => 'gap: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'aspect_ratio', [ 'label' => __( 'Aspect Ratio', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'auto', 'options' => [ 'auto' => __( 'Auto (Masonry)', 'admore-widgets-suite' ), '1/1' => '1:1', '4/3' => '4:3', '16/9' => '16:9', '3/4' => '3:4', ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-item img' => 'aspect-ratio: {{VALUE}};', ], 'condition' => [ 'layout' => 'grid' ], ] ); $this->end_controls_section(); /* ── Filter ──────────────────────────────────── */ $this->start_controls_section( 'section_filter', [ 'label' => __( 'Filter', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'show_filter', [ 'label' => __( 'Show Filter Tabs', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', ] ); $this->add_control( 'all_label', [ 'label' => __( '"All" Label', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'All', 'admore-widgets-suite' ), 'condition' => [ 'show_filter' => 'yes' ], ] ); $this->add_control( 'filter_animation', [ 'label' => __( 'Filter Animation', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'fade', 'options' => [ 'fade' => __( 'Fade', 'admore-widgets-suite' ), 'scale' => __( 'Scale', 'admore-widgets-suite' ), 'slide' => __( 'Slide Up', 'admore-widgets-suite' ), ], 'condition' => [ 'show_filter' => 'yes' ], ] ); $this->end_controls_section(); /* ── Lightbox ────────────────────────────────── */ $this->start_controls_section( 'section_lightbox', [ 'label' => __( 'Lightbox', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'lightbox', [ 'label' => __( 'Enable Lightbox', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', ] ); $this->end_controls_section(); /* ── Load More ───────────────────────────────── */ $this->start_controls_section( 'section_loadmore', [ 'label' => __( 'Load More', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'load_more', [ 'label' => __( 'Enable Load More', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'return_value' => 'yes', ] ); $this->add_control( 'initial_count', [ 'label' => __( 'Initial Items', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::NUMBER, 'default' => 6, 'min' => 1, 'condition' => [ 'load_more' => 'yes' ], ] ); $this->add_control( 'load_more_count', [ 'label' => __( 'Items per Load', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::NUMBER, 'default' => 3, 'min' => 1, 'condition' => [ 'load_more' => 'yes' ], ] ); $this->add_control( 'load_more_text', [ 'label' => __( 'Button Text', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'Load More', 'admore-widgets-suite' ), 'condition' => [ 'load_more' => 'yes' ], ] ); $this->end_controls_section(); /* ── Overlay ─────────────────────────────────── */ $this->start_controls_section( 'section_overlay', [ 'label' => __( 'Overlay & Hover', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'hover_effect', [ 'label' => __( 'Hover Effect', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'zoom', 'options' => [ 'none' => __( 'None', 'admore-widgets-suite' ), 'zoom' => __( 'Zoom', 'admore-widgets-suite' ), 'fade' => __( 'Fade', 'admore-widgets-suite' ), 'blur' => __( 'Blur', 'admore-widgets-suite' ), 'tilt' => __( 'Tilt', 'admore-widgets-suite' ), ], ] ); $this->add_control( 'show_caption', [ 'label' => __( 'Show Caption on Hover', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'default' => 'yes', 'return_value' => 'yes', ] ); $this->add_control( 'caption_animation', [ 'label' => __( 'Caption Animation', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'fade-up', 'options' => [ 'fade' => __( 'Fade', 'admore-widgets-suite' ), 'fade-up' => __( 'Fade Up', 'admore-widgets-suite' ), 'fade-down' => __( 'Fade Down', 'admore-widgets-suite' ), 'zoom' => __( 'Zoom In', 'admore-widgets-suite' ), ], 'condition' => [ 'show_caption' => 'yes' ], ] ); $this->add_control( 'lightbox_icon', [ 'label' => __( 'Lightbox Icon', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::ICONS, 'default' => [ 'value' => '', 'library' => '' ], 'condition' => [ 'lightbox' => 'yes' ], ] ); $this->add_control( 'hover_transition', [ 'label' => __( 'Transition Duration (ms)', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => [ 'ms' ], 'range' => [ 'ms' => [ 'min' => 100, 'max' => 1000, 'step' => 50 ] ], 'default' => [ 'size' => 350, 'unit' => 'ms' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-item img' => 'transition-duration: {{SIZE}}ms;', '{{WRAPPER}} .eppro-gallery-overlay' => 'transition-duration: {{SIZE}}ms;', ], ] ); $this->end_controls_section(); } // ── Style controls ─────────────────────────────────────────────────────── private function register_style_controls(): void { /* ── Filter Tabs Style ───────────────────────── */ $this->start_controls_section( 'section_style_filter', [ 'label' => __( 'Filter Tabs', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_STYLE, 'condition' => [ 'show_filter' => 'yes' ], ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'filter_typo', 'selector' => '{{WRAPPER}} .eppro-gallery-filter-btn', ] ); $this->add_control( 'filter_color', [ 'label' => __( 'Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn' => 'color: {{VALUE}};' ], ] ); $this->add_control( 'filter_bg', [ 'label' => __( 'Background', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn' => 'background-color: {{VALUE}};' ], ] ); $this->add_control( 'filter_hover_color', [ 'label' => __( 'Hover Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn:hover' => 'color: {{VALUE}};' ], ] ); $this->add_control( 'filter_hover_bg', [ 'label' => __( 'Hover Background', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn:hover' => 'background-color: {{VALUE}};' ], ] ); $this->add_control( 'filter_active_color', [ 'label' => __( 'Active Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => EPPRO_Elementor_Helper::brand_color(), 'separator' => 'before', 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn.active' => 'color: {{VALUE}}; border-color: {{VALUE}};' ], ] ); $this->add_control( 'filter_active_bg', [ 'label' => __( 'Active Background', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn.active' => 'background-color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'filter_padding', [ 'label' => __( 'Padding', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em' ], 'separator' => 'before', 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_control( 'filter_border_radius', [ 'label' => __( 'Border Radius', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'default' => [ 'size' => 4 ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filter-btn' => 'border-radius: {{SIZE}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'filter_gap', [ 'label' => __( 'Gap Between Tabs', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 30 ] ], 'default' => [ 'size' => 8 ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-filters' => 'gap: {{SIZE}}{{UNIT}};' ], ] ); $this->end_controls_section(); /* ── Overlay Style ───────────────────────────── */ $this->start_controls_section( 'section_style_overlay', [ 'label' => __( 'Overlay', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'overlay_type', [ 'label' => __( 'Overlay Type', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'solid', 'options' => [ 'solid' => __( 'Solid Color', 'admore-widgets-suite' ), 'gradient' => __( 'Gradient', 'admore-widgets-suite' ), ], ] ); $this->add_control( 'overlay_bg', [ 'label' => __( 'Overlay Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => 'rgba(0,0,0,.5)', 'selectors' => [ '{{WRAPPER}} .eppro-gallery-overlay' => 'background: {{VALUE}};' ], 'condition' => [ 'overlay_type' => 'solid' ], ] ); $this->add_control( 'overlay_gradient_from', [ 'label' => __( 'Gradient From', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => 'rgba(0,0,0,0)', 'condition' => [ 'overlay_type' => 'gradient' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-overlay' => '--eppro-gallery-grad-from: {{VALUE}};', ], ] ); $this->add_control( 'overlay_gradient_to', [ 'label' => __( 'Gradient To', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => 'rgba(0,0,0,.7)', 'condition' => [ 'overlay_type' => 'gradient' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-overlay' => '--eppro-gallery-grad-to: {{VALUE}};', ], ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'caption_typo', 'label' => __( 'Caption Typography', 'admore-widgets-suite' ), 'selector' => '{{WRAPPER}} .eppro-gallery-caption', ] ); $this->add_control( 'caption_color', [ 'label' => __( 'Caption Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .eppro-gallery-caption' => 'color: {{VALUE}};' ], ] ); $this->end_controls_section(); /* ── Item Style ──────────────────────────────── */ $this->start_controls_section( 'section_style_item', [ 'label' => __( 'Item', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'item_radius', [ 'label' => __( 'Border Radius', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [ 'name' => 'item_shadow', 'selector' => '{{WRAPPER}} .eppro-gallery-item', ] ); $this->end_controls_section(); /* ── Load More Button Style ──────────────────── */ $this->start_controls_section( 'section_style_loadmore', [ 'label' => __( 'Load More Button', 'admore-widgets-suite' ), 'tab' => \Elementor\Controls_Manager::TAB_STYLE, 'condition' => [ 'load_more' => 'yes' ], ] ); $this->add_control( 'loadmore_bg', [ 'label' => __( 'Background', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => EPPRO_Elementor_Helper::brand_color(), 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore' => 'background-color: {{VALUE}};' ], ] ); $this->add_control( 'loadmore_color', [ 'label' => __( 'Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore' => 'color: {{VALUE}};' ], ] ); $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [ 'name' => 'loadmore_typo', 'selector' => '{{WRAPPER}} .eppro-gallery-loadmore', ] ); $this->add_control( 'loadmore_hover_bg', [ 'label' => __( 'Hover Background', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore:hover' => 'background-color: {{VALUE}};' ], ] ); $this->add_control( 'loadmore_hover_color', [ 'label' => __( 'Hover Text Color', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore:hover' => 'color: {{VALUE}};' ], ] ); $this->add_responsive_control( 'loadmore_radius', [ 'label' => __( 'Border Radius', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->add_responsive_control( 'loadmore_padding', [ 'label' => __( 'Padding', 'admore-widgets-suite' ), 'type' => \Elementor\Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em' ], 'selectors' => [ '{{WRAPPER}} .eppro-gallery-loadmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], ] ); $this->end_controls_section(); // Entrance animation — inherited from base $this->eppro_register_entrance_animation_controls(); } // ========================================================================= // Defaults // ========================================================================= private static function get_default_items(): array { $placeholder = \Elementor\Utils::get_placeholder_image_src(); return [ [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 1', 'admore-widgets-suite' ), 'category' => 'Category 1', ], [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 2', 'admore-widgets-suite' ), 'category' => 'Category 1', ], [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 3', 'admore-widgets-suite' ), 'category' => 'Category 2', ], [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 4', 'admore-widgets-suite' ), 'category' => 'Category 2', ], [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 5', 'admore-widgets-suite' ), 'category' => 'Category 1', ], [ 'image' => [ 'url' => $placeholder ], 'caption' => __( 'Gallery Item 6', 'admore-widgets-suite' ), 'category' => 'Category 2', ], ]; } // ========================================================================= // Render // ========================================================================= protected function render(): void { $s = $this->get_settings_for_display(); $items = $s['gallery_items'] ?? []; if ( empty( $items ) ) { if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) { echo '

' . esc_html__( 'Gallery Pro', 'admore-widgets-suite' ) . '

' . esc_html__( 'Add gallery items in the Content tab to display images.', 'admore-widgets-suite' ) . '

'; } return; } // Random order if ( 'yes' === ( $s['random_order'] ?? '' ) ) { shuffle( $items ); } $layout = sanitize_key( $s['layout'] ?? 'masonry' ); $cols = intval( $s['columns'] ?? 3 ); $hover = sanitize_key( $s['hover_effect'] ?? 'zoom' ); $show_filter = 'yes' === ( $s['show_filter'] ?? '' ); $show_cap = 'yes' === ( $s['show_caption'] ?? '' ); $lightbox = 'yes' === ( $s['lightbox'] ?? '' ); $load_more = 'yes' === ( $s['load_more'] ?? '' ); $init_count = max( 1, intval( $s['initial_count'] ?? 6 ) ); $per_load = max( 1, intval( $s['load_more_count'] ?? 3 ) ); $filter_anim = sanitize_key( $s['filter_animation'] ?? 'fade' ); $justified_h = intval( $s['justified_height']['size'] ?? 200 ); $image_size = $s['image_size_size'] ?? 'large'; // Build categories list $categories = []; foreach ( $items as $item ) { $cat = trim( $item['category'] ?? '' ); if ( $cat && ! in_array( $cat, $categories, true ) ) { $categories[] = $cat; } } $wrap_data = wp_json_encode( [ 'layout' => $layout, 'columns' => $cols, 'lightbox' => $lightbox, 'loadMore' => $load_more, 'initCount' => $init_count, 'perLoad' => $per_load, 'filterAnim' => $filter_anim, 'justifiedHeight'=> $justified_h, ], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); $grid_style = '--eppro-gallery-cols:' . intval( $cols ) . ';'; if ( 'justified' === $layout ) { $grid_style .= '--eppro-justified-height:' . $justified_h . 'px;'; } ?>