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' ) . '