* @copyright 2007-2022 Leotheme * @license http://leotheme.com - prestashop template provider */ namespace LeoElements; use LeoElements\Leo_Helper; if ( ! defined( '_PS_VERSION_' ) ) { exit; // Exit if accessed directly. } /** * Elementor image box widget. * * Elementor widget that displays an image, a headline and a text. * * @since 1.0.0 */ class Widget_Image_Box extends Widget_Base { /** * Get widget name. * * Retrieve image box widget name. * * @since 1.0.0 * @access public * * @return string Widget name. */ public function get_name() { return 'image-box'; } /** * Get widget title. * * Retrieve image box widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return Leo_Helper::__( 'Image Box', 'elementor' ); } /** * Get widget icon. * * Retrieve image box widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-image-box'; } /** * Get widget keywords. * * Retrieve the list of keywords the widget belongs to. * * @since 1.0.0 * @access public * * @return array Widget keywords. */ public function get_keywords() { return [ 'image', 'photo', 'visual', 'box' ]; } /** * Register image box 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' => Leo_Helper::__( 'Image Box', 'elementor' ), ] ); $this->add_control( 'image', [ 'label' => Leo_Helper::__( 'Choose Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], ] ); $this->add_control( 'title_text', [ 'label' => Leo_Helper::__( 'Title & Description', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => Leo_Helper::__( 'This is the heading', 'elementor' ), 'placeholder' => Leo_Helper::__( 'Enter your title', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'description_text', [ 'label' => Leo_Helper::__( 'Content', 'elementor' ), 'type' => Controls_Manager::TEXTAREA, 'default' => Leo_Helper::__( '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' => Leo_Helper::__( 'Enter your description', 'elementor' ), 'separator' => 'none', 'rows' => 10, 'show_label' => false, ] ); $this->add_control( 'link', [ 'label' => Leo_Helper::__( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'autocomplete' => false, 'placeholder' => Leo_Helper::__( 'https://your-link.com', 'elementor' ), 'separator' => 'before', ] ); $this->add_control( 'position', [ 'label' => Leo_Helper::__( 'Image Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'top', 'options' => [ 'left' => [ 'title' => Leo_Helper::__( 'Left', 'elementor' ), 'icon' => 'eicon-h-align-left', ], 'top' => [ 'title' => Leo_Helper::__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'right' => [ 'title' => Leo_Helper::__( 'Right', 'elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'prefix_class' => 'elementor-position-', 'toggle' => false, ] ); $this->add_control( 'title_size', [ 'label' => Leo_Helper::__( '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' => Leo_Helper::__( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_image', [ 'label' => Leo_Helper::__( 'Image', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'image_space', [ 'label' => Leo_Helper::__( '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' => Leo_Helper::__( 'Width', '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( 'hover_animation', [ 'label' => Leo_Helper::__( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->start_controls_tabs( 'image_effects' ); $this->start_controls_tab( 'normal', [ 'label' => Leo_Helper::__( 'Normal', 'elementor' ), ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .elementor-image-box-img img', ] ); $this->add_control( 'image_opacity', [ 'label' => Leo_Helper::__( 'Opacity', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'opacity: {{SIZE}};', ], ] ); $this->add_control( 'background_hover_transition', [ 'label' => Leo_Helper::__( 'Transition Duration', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.3, ], 'range' => [ 'px' => [ 'max' => 3, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'hover', [ 'label' => Leo_Helper::__( 'Hover', 'elementor' ), ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters_hover', 'selector' => '{{WRAPPER}}:hover .elementor-image-box-img img', ] ); $this->add_control( 'image_opacity_hover', [ 'label' => Leo_Helper::__( 'Opacity', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}}:hover .elementor-image-box-img img' => 'opacity: {{SIZE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_style_content', [ 'label' => Leo_Helper::__( 'Content', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'text_align', [ 'label' => Leo_Helper::__( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => Leo_Helper::__( 'Left', 'elementor' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => Leo_Helper::__( 'Center', 'elementor' ), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => Leo_Helper::__( 'Right', 'elementor' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => Leo_Helper::__( 'Justified', 'elementor' ), 'icon' => 'eicon-text-align-justify', ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'content_vertical_alignment', [ 'label' => Leo_Helper::__( 'Vertical Alignment', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'top' => Leo_Helper::__( 'Top', 'elementor' ), 'middle' => Leo_Helper::__( 'Middle', 'elementor' ), 'bottom' => Leo_Helper::__( 'Bottom', 'elementor' ), ], 'default' => 'top', 'prefix_class' => 'elementor-vertical-align-', ] ); $this->add_control( 'heading_title', [ 'label' => Leo_Helper::__( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_responsive_control( 'title_bottom_space', [ 'label' => Leo_Helper::__( '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' => Leo_Helper::__( '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' => Leo_Helper::__( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'description_color', [ 'label' => Leo_Helper::__( '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->add_responsive_control( 'caption_padding', [ 'label' => Leo_Helper::__( 'Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'caption_position', [ 'label' => Leo_Helper::__( 'Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => Leo_Helper::__( 'Default', 'elementor' ), 'absolute' => Leo_Helper::__( 'Absolute', 'elementor' ), 'fixed' => Leo_Helper::__( 'Fixed', 'elementor' ), ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content' => 'position: {{VALUE}};', ], 'frontend_available' => true, ] ); $start = Leo_Helper::is_rtl() ? Leo_Helper::__( 'Right', 'elementor' ) : Leo_Helper::__( 'Left', 'elementor' ); $end = ! Leo_Helper::is_rtl() ? Leo_Helper::__( 'Right', 'elementor' ) : Leo_Helper::__( 'Left', 'elementor' ); $this->add_control( 'caption_offset_orientation_h', [ 'label' => Leo_Helper::__( 'Horizontal Orientation', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'toggle' => false, 'default' => 'start', 'options' => [ 'start' => [ 'title' => $start, 'icon' => 'eicon-h-align-left', ], 'end' => [ 'title' => $end, 'icon' => 'eicon-h-align-right', ], ], 'classes' => 'elementor-control-start-end', 'render_type' => 'ui', 'condition' => [ 'caption_position!' => '', ], ] ); $this->add_responsive_control( 'caption_offset_x', [ 'label' => Leo_Helper::__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => -200, 'max' => 200, ], 'vw' => [ 'min' => -200, 'max' => 200, ], 'vh' => [ 'min' => -200, 'max' => 200, ], ], 'default' => [ 'size' => '0', ], 'size_units' => [ 'px', '%', 'vw', 'vh' ], 'selectors' => [ 'body:not(.rtl) {{WRAPPER}} .elementor-image-box-content' => 'left: {{SIZE}}{{UNIT}}', 'body.rtl {{WRAPPER}} .elementor-image-box-content' => 'right: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'caption_offset_orientation_h!' => 'end', 'caption_position!' => '', ], ] ); $this->add_responsive_control( 'caption_offset_x_end', [ 'label' => Leo_Helper::__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 0.1, ], '%' => [ 'min' => -200, 'max' => 200, ], 'vw' => [ 'min' => -200, 'max' => 200, ], 'vh' => [ 'min' => -200, 'max' => 200, ], ], 'default' => [ 'size' => '0', ], 'size_units' => [ 'px', '%', 'vw', 'vh' ], 'selectors' => [ 'body:not(.rtl) {{WRAPPER}} .elementor-image-box-content' => 'right: {{SIZE}}{{UNIT}}', 'body.rtl {{WRAPPER}} .elementor-image-box-content' => 'left: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'caption_offset_orientation_h' => 'end', 'caption_position!' => '', ], ] ); $this->add_control( 'caption_offset_orientation_v', [ 'label' => Leo_Helper::__( 'Vertical Orientation', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'label_block' => false, 'toggle' => false, 'default' => 'start', 'options' => [ 'start' => [ 'title' => Leo_Helper::__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'end' => [ 'title' => Leo_Helper::__( 'Bottom', 'elementor' ), 'icon' => 'eicon-v-align-bottom', ], ], 'render_type' => 'ui', 'condition' => [ 'caption_position!' => '', ], ] ); $this->add_responsive_control( 'caption_offset_y', [ 'label' => Leo_Helper::__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => -200, 'max' => 200, ], 'vh' => [ 'min' => -200, 'max' => 200, ], 'vw' => [ 'min' => -200, 'max' => 200, ], ], 'size_units' => [ 'px', '%', 'vh', 'vw' ], 'default' => [ 'size' => '0', ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content' => 'top: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'caption_offset_orientation_v!' => 'end', 'caption_position!' => '', ], ] ); $this->add_responsive_control( 'caption_offset_y_end', [ 'label' => Leo_Helper::__( 'Offset', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -1000, 'max' => 1000, 'step' => 1, ], '%' => [ 'min' => -200, 'max' => 200, ], 'vh' => [ 'min' => -200, 'max' => 200, ], 'vw' => [ 'min' => -200, 'max' => 200, ], ], 'size_units' => [ 'px', '%', 'vh', 'vw' ], 'default' => [ 'size' => '0', ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-content' => 'bottom: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'caption_offset_orientation_v' => 'end', 'caption_position!' => '', ], ] ); $this->end_controls_section(); } /** * Render image box widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); $has_content = ! empty( $settings['title_text'] ) || ! empty( $settings['description_text'] ); $html = '
'; if ( ! empty( $settings['link']['url'] ) ) { $this->add_render_attribute( 'link', 'href', $settings['link']['url'] ); if ( $settings['link']['is_external'] ) { $this->add_render_attribute( 'link', 'target', '_blank' ); } if ( ! empty( $settings['link']['nofollow'] ) ) { $this->add_render_attribute( 'link', 'rel', 'nofollow' ); } } if ( ! empty( $settings['image']['url'] ) ) { $this->add_render_attribute( 'image', 'src', $settings['image']['url'] ); $this->add_render_attribute( 'image', 'alt', Control_Media::get_image_alt( $settings['image'] ) ); $this->add_render_attribute( 'image', 'title', Control_Media::get_image_title( $settings['image'] ) ); if ( $settings['hover_animation'] ) { $this->add_render_attribute( 'image', 'class', 'elementor-animation-' . $settings['hover_animation'] ); } $image_html = Group_Control_Image_Size::get_attachment_image_html( $settings ); if ( ! empty( $settings['link']['url'] ) ) { $image_html = 'get_render_attribute_string( 'link' ) . '>' . $image_html . ''; } $html .= '
' . $image_html . '
'; } if ( $has_content ) { $html .= '
'; if ( ! empty( $settings['title_text'] ) ) { $this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' ); $this->add_inline_editing_attributes( 'title_text', 'none' ); $title_html = $settings['title_text']; if ( ! empty( $settings['link']['url'] ) ) { $title_html = 'get_render_attribute_string( 'link' ) . '>' . $title_html . ''; } $html .= sprintf( '<%1$s %2$s>%3$s', $settings['title_size'], $this->get_render_attribute_string( 'title_text' ), $title_html ); } if ( ! empty( $settings['description_text'] ) ) { $this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' ); $this->add_inline_editing_attributes( 'description_text' ); $html .= sprintf( '

%2$s

', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] ); } $html .= '
'; } $html .= '
'; echo $html; } /** * Render image box widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 1.0.0 * @access protected */ protected function _content_template() { ?> <# var html = '
'; if ( settings.image.url ) { var image = { id: settings.image.id, url: settings.image.url, size: settings.thumbnail_size, dimension: settings.thumbnail_custom_dimension, model: view.getEditModel() }; var image_url = elementor.imagesManager.getImageUrl( image ); var imageHtml = ''; if ( settings.link.url ) { imageHtml = '' + imageHtml + ''; } html += '
' + imageHtml + '
'; } var hasContent = !! ( settings.title_text || settings.description_text ); if ( hasContent ) { html += '
'; if ( settings.title_text ) { var title_html = settings.title_text; if ( settings.link.url ) { title_html = '' + title_html + ''; } view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' ); view.addInlineEditingAttributes( 'title_text', 'none' ); html += '<' + settings.title_size + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + title_html + ''; } if ( settings.description_text ) { view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' ); view.addInlineEditingAttributes( 'description_text' ); html += '

' + settings.description_text + '

'; } html += '
'; } html += '
'; print( html ); #>