* @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 widget. * * Elementor widget that displays an image into the page. * * @since 1.0.0 */ class Widget_Image extends Widget_Base { /** * Get widget name. * * Retrieve image widget name. * * @since 1.0.0 * @access public * * @return string Widget name. */ public function get_name() { return 'image'; } /** * Get widget title. * * Retrieve image widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return Leo_Helper::__( 'Image', 'elementor' ); } /** * Get widget icon. * * Retrieve image widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-image'; } /** * Get widget categories. * * Retrieve the list of categories the image widget belongs to. * * Used to determine where to display the widget in the editor. * * @since 2.0.0 * @access public * * @return array Widget categories. */ public function get_categories() { return [ 'basic' ]; } /** * 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' ]; } /** * 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' => Leo_Helper::__( 'Image', 'elementor' ), ] ); $this->add_control( 'image', [ 'label' => Leo_Helper::__( 'Choose Image', 'elementor' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ], ] ); $this->add_responsive_control( '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', ], ], 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'caption_source', [ 'label' => Leo_Helper::__( 'Caption', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => Leo_Helper::__( 'None', 'elementor' ), 'custom' => Leo_Helper::__( 'Custom Caption', 'elementor' ), ], 'default' => 'none', ] ); $this->add_control( 'caption', [ 'label' => Leo_Helper::__( 'Custom Caption', 'elementor' ), 'type' => Controls_Manager::TEXTAREA, 'rows' => '3', 'default' => '', 'placeholder' => Leo_Helper::__( 'Enter your image caption', 'elementor' ), 'condition' => [ 'caption_source' => 'custom', ], ] ); $this->add_control( 'link_to', [ 'label' => Leo_Helper::__( 'Link', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => [ 'none' => Leo_Helper::__( 'None', 'elementor' ), 'file' => Leo_Helper::__( 'Media File', 'elementor' ), 'custom' => Leo_Helper::__( 'Custom URL', 'elementor' ), ], ] ); $this->add_control( 'link', [ 'label' => Leo_Helper::__( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'autocomplete' => false, 'placeholder' => Leo_Helper::__( 'https://your-link.com', 'elementor' ), 'condition' => [ 'link_to' => 'custom', ], 'show_label' => false, ] ); $this->add_control( 'open_lightbox', [ 'label' => Leo_Helper::__( 'Lightbox', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'default', 'options' => [ 'default' => Leo_Helper::__( 'Default', 'elementor' ), 'yes' => Leo_Helper::__( 'Yes', 'elementor' ), 'no' => Leo_Helper::__( 'No', 'elementor' ), ], 'condition' => [ 'link_to' => 'file', ], ] ); $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( 'width', [ 'label' => Leo_Helper::__( 'Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'size_units' => [ '%', 'px', 'vw' ], 'range' => [ '%' => [ 'min' => 1, 'max' => 100, ], 'px' => [ 'min' => 1, 'max' => 1000, ], 'vw' => [ 'min' => 1, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image img' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'space', [ 'label' => Leo_Helper::__( 'Max Width', '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( 'separator_panel_style', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->start_controls_tabs( 'image_effects' ); $this->start_controls_tab( 'normal', [ 'label' => Leo_Helper::__( 'Normal', 'elementor' ), ] ); $this->add_control( 'opacity', [ 'label' => Leo_Helper::__( '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_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters', 'selector' => '{{WRAPPER}} .elementor-image img', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'hover', [ 'label' => Leo_Helper::__( 'Hover', 'elementor' ), ] ); $this->add_control( 'opacity_hover', [ 'label' => Leo_Helper::__( 'Opacity', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 1, 'min' => 0.10, 'step' => 0.01, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image:hover img' => 'opacity: {{SIZE}};', ], ] ); $this->add_group_control( Group_Control_Css_Filter::get_type(), [ 'name' => 'css_filters_hover', 'selector' => '{{WRAPPER}} .elementor-image:hover img', ] ); $this->add_control( 'background_hover_transition', [ 'label' => Leo_Helper::__( 'Transition Duration', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 3, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image img' => 'transition-duration: {{SIZE}}s', ], ] ); $this->add_control( 'hover_animation', [ 'label' => Leo_Helper::__( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $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' => Leo_Helper::__( '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' => Leo_Helper::__( 'Caption', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'caption_source!' => 'none', ], ] ); $this->add_control( 'caption_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', ], ], 'default' => '', 'selectors' => [ '{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};', ], ] ); $this->add_control( 'text_color', [ 'label' => Leo_Helper::__( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .widget-image-caption' => 'color: {{VALUE}};', ], 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ], ] ); $this->add_control( 'caption_background_color', [ 'label' => Leo_Helper::__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .widget-image-caption' => 'background-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'caption_typography', 'selector' => '{{WRAPPER}} .widget-image-caption', 'scheme' => Scheme_Typography::TYPOGRAPHY_3, ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'caption_text_shadow', 'selector' => '{{WRAPPER}} .widget-image-caption', ] ); $this->add_responsive_control( 'caption_space', [ 'label' => Leo_Helper::__( 'Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .widget-image-caption' => 'margin-top: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'caption_padding', [ 'label' => Leo_Helper::__( 'Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .widget-image-caption' => '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}} .widget-image-caption' => '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}} .widget-image-caption' => 'left: {{SIZE}}{{UNIT}}', 'body.rtl {{WRAPPER}} .widget-image-caption' => '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}} .widget-image-caption' => 'right: {{SIZE}}{{UNIT}}', 'body.rtl {{WRAPPER}} .widget-image-caption' => '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}} .widget-image-caption' => '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}} .widget-image-caption' => 'bottom: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'caption_offset_orientation_v' => 'end', 'caption_position!' => '', ], ] ); $this->end_controls_section(); } /** * Check if the current widget has caption * * @access private * @since 1.0.0 * * @param array $settings * * @return boolean */ private function has_caption( $settings ) { return ( ! empty( $settings['caption_source'] ) && 'none' !== $settings['caption_source'] ); } /** * Get the caption for current widget. * * @access private * @since 1.0.0 * @param $settings * * @return string */ private function get_caption( $settings ) { $caption = ''; if ( ! empty( $settings['caption_source'] ) ) { switch ( $settings['caption_source'] ) { case 'custom': $caption = ! empty( $settings['caption'] ) ? $settings['caption'] : ''; } } return $caption; } /** * Render image 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(); if ( empty( $settings['image']['url'] ) ) { return; } $has_caption = $this->has_caption( $settings ); $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' ); if ( ! empty( $settings['shape'] ) ) { $this->add_render_attribute( 'wrapper', 'class', 'elementor-image-shape-' . $settings['shape'] ); } $link = $this->get_link_url( $settings ); if ( $link ) { $this->add_render_attribute( 'link', [ 'href' => $link['url'], 'data-elementor-open-lightbox' => $settings['open_lightbox'], ] ); if ( Plugin::$instance->editor->is_edit_mode() ) { $this->add_render_attribute( 'link', [ 'class' => 'elementor-clickable', ] ); } if ( ! empty( $link['is_external'] ) ) { $this->add_render_attribute( 'link', 'target', '_blank' ); } if ( ! empty( $link['nofollow'] ) ) { $this->add_render_attribute( 'link', 'rel', 'nofollow' ); } } ?>