Widget_Image_Box::_register_controls()
Register image box 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-box.php
'default' => [ 'url' => Utils::get_placeholder_image_src(), ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`. 'default' => 'full', 'separator' => 'none', ] ); $this->add_control( 'title_text', [ 'label' => __( 'Title & Description', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => __( 'This is the heading', 'elementor' ), 'placeholder' => __( 'Enter your title', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'description_text', [ 'label' => __( 'Content', 'elementor' ), 'type' => Controls_Manager::TEXTAREA, 'dynamic' => [ 'active' => true, ], 'default' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), 'placeholder' => __( 'Enter your description', 'elementor' ), 'separator' => 'none', 'rows' => 10, 'show_label' => false, ] ); $this->add_control( 'link', [ 'label' => __( 'Link to', 'elementor' ), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true, ], 'placeholder' => __( 'https://your-link.com', 'elementor' ), 'separator' => 'before', ] ); $this->add_control( 'position', [ 'label' => __( 'Image Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'top', 'options' => [ 'left' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'top' => [ 'title' => __( 'Top', 'elementor' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], ], 'prefix_class' => 'elementor-position-', 'toggle' => false, ] ); $this->add_control( 'title_size', [ 'label' => __( 'Title HTML Tag', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4', 'h5' => 'H5', 'h6' => 'H6', 'div' => 'div', 'span' => 'span', 'p' => 'p', ], 'default' => 'h3', ] ); $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( 'image_space', [ 'label' => __( 'Image Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}.elementor-position-right .elementor-image-box-img' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}}.elementor-position-left .elementor-image-box-img' => 'margin-right: {{SIZE}}{{UNIT}};', '{{WRAPPER}}.elementor-position-top .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};', '(mobile){{WRAPPER}} .elementor-image-box-img' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'image_size', [ 'label' => __( 'Image Size', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 30, 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'size_units' => [ '%' ], 'range' => [ '%' => [ 'min' => 5, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper .elementor-image-box-img' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'image_opacity', [ 'label' => __( 'Opacity (%)', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper .elementor-image-box-img img' => 'opacity: {{SIZE}};', ], ] ); $this->add_control( 'hover_animation', [ 'label' => __( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_content', [ 'label' => __( 'Content', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'text_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', ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'content_vertical_alignment', [ 'label' => __( 'Vertical Alignment', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'top' => __( 'Top', 'elementor' ), 'middle' => __( 'Middle', 'elementor' ), 'bottom' => __( 'Bottom', 'elementor' ), ], 'default' => 'top', 'prefix_class' => 'elementor-vertical-align-', ] ); $this->add_control( 'heading_title', [ 'label' => __( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_responsive_control( 'title_bottom_space', [ 'label' => __( 'Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'title_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content .elementor-image-box-title' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-image-box-content .elementor-image-box-title', 'scheme' => Scheme_Typography::TYPOGRAPHY_1, ] ); $this->add_control( 'heading_description', [ 'label' => __( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'description_color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content .elementor-image-box-description' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography', 'selector' => '{{WRAPPER}} .elementor-image-box-content .elementor-image-box-description', 'scheme' => Scheme_Typography::TYPOGRAPHY_3, ] ); $this->end_controls_section(); } /** * Render image box widget output on the frontend.
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/image-size.php: Group_Control_Image_Size::get_type()
- includes/utils.php: Utils::get_placeholder_image_src()
- includes/schemes/color.php: Scheme_Color::get_type()