Widget_Image::_register_controls()
Register image widget controls.
Description
Adds different input fields to allow the user to change and customize the widget settings.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Source
includes/widgets/image.php
* @access public * * @return array Widget categories. */ public function get_categories() { return [ 'basic' ]; } /** * Register image widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 * @access protected */ 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, 'dynamic' => [ 'active' => true, ], 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `image_size` and `image_custom_dimension`. 'default' => 'large', 'separator' => 'none', ] ); $this->add_responsive_control( 'align', [ 'label' => __( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], ], 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'caption', [ 'label' => __( 'Caption', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'placeholder' => __( 'Enter your image caption', '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, 'dynamic' => [ 'active' => true, ], 'placeholder' => __( 'https://your-link.com', 'elementor' ), 'condition' => [ 'link_to' => 'custom', ], 'show_label' => false, ] ); $this->add_control( 'open_lightbox', [ 'label' => __( 'Lightbox', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => __( 'Default', 'elementor' ), 'yes' => __( 'Yes', 'elementor' ), 'no' => __( 'No', 'elementor' ), ], 'condition' => [ 'link_to' => 'file', ], ] ); $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_responsive_control( 'space', [ 'label' => __( 'Size (%)', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ '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, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, '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', 'selector' => '{{WRAPPER}} .elementor-image img', 'separator' => 'before', ] ); $this->add_responsive_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', 'exclude' => [ 'box_shadow_position', ], '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' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], 'justify' => [ 'title' => __( 'Justified', 'elementor' ), 'icon' => 'fa fa-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}};', ],
Uses
- includes/controls/groups/css-filter.php: Group_Control_Css_Filter::get_type()
- includes/controls/groups/typography.php: Group_Control_Typography::get_type()
- includes/controls/groups/box-shadow.php: Group_Control_Box_Shadow::get_type()
- includes/controls/groups/image-size.php: Group_Control_Image_Size::get_type()
- includes/controls/groups/text-shadow.php: Group_Control_Text_Shadow::get_type()
- includes/controls/groups/border.php: Group_Control_Border::get_type()
- includes/utils.php: Utils::get_placeholder_image_src()
- includes/schemes/color.php: Scheme_Color::get_type() Show 3 more uses