ProShell v2.0
Dashboard
Server Info
Server: 158.106.128.192
PHP: 8.2.33
home
planet5
public_html
bansibaba.com
2026-09-15 11:47:46
Editing: image-box.php
Cancel
Save Changes
<?php namespace Elementor; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Core\Kits\Documents\Tabs\Global_Typography; /** * 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 esc_html__( '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 2.1.0 * @access public * * @return array Widget keywords. */ public function get_keywords() { return [ 'image', 'photo', 'visual', 'box' ]; } protected function is_dynamic_content(): bool { return false; } /** * Get style dependencies. * * Retrieve the list of style dependencies the widget requires. * * @since 3.24.0 * @access public * * @return array Widget style dependencies. */ public function get_style_depends(): array { return [ 'widget-image-box' ]; } public function has_widget_inner_wrapper(): bool { return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ); } /** * Register image box widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 3.1.0 * @access protected */ protected function register_controls() { $this->start_controls_section( 'section_image', [ 'label' => esc_html__( 'Image Box', 'elementor' ), ] ); $this->add_control( 'image', [ 'label' => esc_html__( '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' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`. 'default' => 'full', 'condition' => [ 'image[url]!' => '', ], ] ); $this->add_control( 'title_text', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::TEXT, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__( 'This is the heading', 'elementor' ), 'placeholder' => esc_html__( 'Enter your title', 'elementor' ), 'label_block' => true, ] ); $this->add_control( 'description_text', [ 'label' => esc_html__( 'Description', 'elementor' ), 'type' => Controls_Manager::TEXTAREA, 'dynamic' => [ 'active' => true, ], 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ), 'placeholder' => esc_html__( 'Enter your description', 'elementor' ), 'rows' => 10, ] ); $this->add_control( 'link', [ 'label' => esc_html__( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'dynamic' => [ 'active' => true, ], 'separator' => 'before', ] ); $this->add_control( 'title_size', [ 'label' => esc_html__( '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->end_controls_section(); $this->start_controls_section( 'section_style_box', [ 'label' => esc_html__( 'Box', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'position', [ 'label' => esc_html__( 'Image Position', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'default' => 'top', 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor' ), 'icon' => 'eicon-h-align-left', ], 'top' => [ 'title' => esc_html__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'prefix_class' => 'elementor-position-', 'toggle' => false, 'condition' => [ 'image[url]!' => '', ], ] ); $this->add_responsive_control( 'content_vertical_alignment', [ 'label' => esc_html__( 'Vertical Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'top' => [ 'title' => esc_html__( 'Top', 'elementor' ), 'icon' => 'eicon-v-align-top', ], 'middle' => [ 'title' => esc_html__( 'Middle', 'elementor' ), 'icon' => 'eicon-v-align-middle', ], 'bottom' => [ 'title' => esc_html__( 'Bottom', 'elementor' ), 'icon' => 'eicon-v-align-bottom', ], ], 'default' => 'top', 'toggle' => false, 'prefix_class' => 'elementor-vertical-align-', 'condition' => [ 'position!' => 'top', ], ] ); $this->add_responsive_control( 'text_align', [ 'label' => esc_html__( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor' ), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor' ), 'icon' => 'eicon-text-align-center', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor' ), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justified', 'elementor' ), 'icon' => 'eicon-text-align-justify', ], ], 'classes' => 'elementor-control-start-end', 'selectors_dictionary' => [ 'left' => is_rtl() ? 'end' : 'start', 'right' => is_rtl() ? 'start' : 'end', ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper' => 'text-align: {{VALUE}};', ], 'separator' => 'after', ] ); $this->add_responsive_control( 'image_space', [ 'label' => esc_html__( 'Image Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ '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}};', ], 'condition' => [ 'image[url]!' => '', ], ] ); $this->add_responsive_control( 'title_bottom_space', [ 'label' => esc_html__( 'Content Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'min' => 0, 'max' => 10, ], 'rem' => [ 'min' => 0, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style_image', [ 'label' => esc_html__( 'Image', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'image[url]!' => '', ], ] ); $this->add_responsive_control( 'image_size', [ 'label' => esc_html__( 'Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 30, 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'range' => [ '%' => [ 'min' => 5, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-wrapper .elementor-image-box-img' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'image_height', [ 'label' => esc_html__( 'Height', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'image_object_fit', [ 'label' => esc_html__( 'Object Fit', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => esc_html__( 'Default', 'elementor' ), 'fill' => esc_html__( 'Fill', 'elementor' ), 'cover' => esc_html__( 'Cover', 'elementor' ), 'contain' => esc_html__( 'Contain', 'elementor' ), 'scale-down' => esc_html__( 'Scale Down', 'elementor' ), ], 'condition' => [ 'image_height[size]!' => '', ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'object-fit: {{VALUE}};', ], ] ); $this->add_responsive_control( 'image_object_position', [ 'label' => esc_html__( 'Object Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'center center' => esc_html__( 'Center Center', 'elementor' ), 'center left' => esc_html__( 'Center Left', 'elementor' ), 'center right' => esc_html__( 'Center Right', 'elementor' ), 'top center' => esc_html__( 'Top Center', 'elementor' ), 'top left' => esc_html__( 'Top Left', 'elementor' ), 'top right' => esc_html__( 'Top Right', 'elementor' ), 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ), 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ), 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ), ], 'default' => 'center center', 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'object-position: {{VALUE}};', ], 'condition' => [ 'image_height[size]!' => '', 'image_object_fit' => [ 'cover', 'contain', 'scale-down' ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'image_border', 'selector' => '{{WRAPPER}} .elementor-image-box-img img', 'separator' => 'before', ] ); $this->add_responsive_control( 'image_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'border-radius: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'image_box_shadow', 'selector' => '{{WRAPPER}} .elementor-image-box-img img', ] ); $this->add_control( 'separator_panel_style', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->start_controls_tabs( 'image_effects' ); $this->start_controls_tab( 'normal', [ 'label' => esc_html__( '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' => esc_html__( '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->end_controls_tab(); $this->start_controls_tab( 'hover', [ 'label' => esc_html__( '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' => esc_html__( '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->add_control( 'background_hover_transition', [ 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)', 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 0.3, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-img img' => 'transition-duration: {{SIZE}}s', ], ] ); $this->add_control( 'hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_style_content', [ 'label' => esc_html__( 'Content', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'heading_title', [ 'label' => esc_html__( 'Title', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'selector' => '{{WRAPPER}} .elementor-image-box-title', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, ], ] ); $this->add_group_control( Group_Control_Text_Stroke::get_type(), [ 'name' => 'title_stroke', 'selector' => '{{WRAPPER}} .elementor-image-box-title', ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-image-box-title', ] ); $this->start_controls_tabs( 'image_box_title_colors' ); $this->start_controls_tab( 'image_box_title_colors_normal', [ 'label' => esc_html__( 'Normal', 'elementor' ), ] ); $this->add_control( 'title_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-image-box-title' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'image_box_title_colors_hover', [ 'label' => esc_html__( 'Hover', 'elementor' ), ] ); $this->add_control( 'hover_title_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}}:has(:hover) .elementor-image-box-title, {{WRAPPER}}:has(:focus) .elementor-image-box-title' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_PRIMARY, ], ] ); $this->add_control( 'hover_title_color_transition_duration', [ 'label' => esc_html__( 'Transition Duration', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 's', 'ms', 'custom' ], 'default' => [ 'unit' => 's', ], 'selectors' => [ '{{WRAPPER}} .elementor-image-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'heading_description', [ 'label' => esc_html__( 'Description', 'elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'description_typography', 'selector' => '{{WRAPPER}} .elementor-image-box-description', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'description_shadow', 'selector' => '{{WRAPPER}} .elementor-image-box-description', ] ); $this->add_control( 'description_color', [ 'label' => esc_html__( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-image-box-description' => 'color: {{VALUE}};', ], 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], ] ); $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(); $description_text = wp_kses_post( $settings['description_text'] ); $title_text = wp_kses_post( $settings['title_text'] ); $has_image = ! empty( $settings['image']['url'] ); $has_content = ! Utils::is_empty( $title_text ) || ! Utils::is_empty( $description_text ); if ( ! $has_image && ! $has_content ) { return; } $html = '<div class="elementor-image-box-wrapper">'; if ( ! empty( $settings['link']['url'] ) ) { $this->add_link_attributes( 'link', $settings['link'] ); } if ( $has_image ) { $image_html = wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ) ); if ( ! empty( $settings['link']['url'] ) ) { $image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . ' tabindex="-1">' . $image_html . '</a>'; } $html .= '<figure class="elementor-image-box-img">' . $image_html . '</figure>'; } if ( $has_content ) { $html .= '<div class="elementor-image-box-content">'; if ( ! Utils::is_empty( $title_text ) ) { $title_html = $title_text; $this->add_render_attribute( 'title_text', 'class', 'elementor-image-box-title' ); $this->add_inline_editing_attributes( 'title_text', 'none' ); if ( ! empty( $settings['link']['url'] ) ) { $title_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_text . '</a>'; } $html .= sprintf( '<%1$s %2$s>%3$s</%1$s>', Utils::validate_html_tag( $settings['title_size'] ), $this->get_render_attribute_string( 'title_text' ), $title_html ); } if ( ! Utils::is_empty( $description_text ) ) { $this->add_render_attribute( 'description_text', 'class', 'elementor-image-box-description' ); $this->add_inline_editing_attributes( 'description_text' ); $html .= sprintf( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $description_text ); } $html .= '</div>'; } $html .= '</div>'; Utils::print_unescaped_internal_string( $html ); } /** * Render image box widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 2.9.0 * @access protected */ protected function content_template() { ?> <# const titleText = elementor.helpers.sanitize( settings.title_text, { ALLOW_DATA_ATTR: false } ) const descriptionText = elementor.helpers.sanitize( settings.description_text, { ALLOW_DATA_ATTR: false } ) var hasImage = !! settings.image.url; var hasContent = !! ( titleText || descriptionText ); if ( ! hasImage && ! hasContent ) { return; } var html = '<div class="elementor-image-box-wrapper">'; if ( hasImage ) { 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 = '<img src="' + _.escape( image_url ) + '" class="elementor-animation-' + _.escape( settings.hover_animation ) + '" />'; if ( settings.link?.url ) { imageHtml = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '" tabindex="-1">' + imageHtml + '</a>'; } html += '<figure class="elementor-image-box-img">' + imageHtml + '</figure>'; } if ( hasContent ) { html += '<div class="elementor-image-box-content">'; if ( titleText ) { var titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); if ( settings.link?.url ) { title_html = '<a href="' + elementor.helpers.sanitizeUrl( settings.link?.url ) + '">' + titleText + '</a>'; } view.addRenderAttribute( 'title_text', 'class', 'elementor-image-box-title' ); view.addInlineEditingAttributes( 'title_text', 'none' ); html += '<' + titleSizeTag + ' ' + view.getRenderAttributeString( 'title_text' ) + '>' + titleText + '</' + titleSizeTag + '>'; } if ( descriptionText ) { view.addRenderAttribute( 'description_text', 'class', 'elementor-image-box-description' ); view.addInlineEditingAttributes( 'description_text' ); html += '<p ' + view.getRenderAttributeString( 'description_text' ) + '>' + descriptionText + '</p>'; } html += '</div>'; } html += '</div>'; print( html ); #> <?php } public function render_markdown(): string { $settings = $this->get_settings_for_display(); $title = Utils::html_to_plain_text( $settings['title_text'] ?? '' ); $description = Utils::html_to_plain_text( $settings['description_text'] ?? '' ); $image_url = $settings['image']['url'] ?? ''; if ( empty( $title ) && empty( $description ) && empty( $image_url ) ) { return ''; } $parts = []; if ( ! empty( $image_url ) ) { $parts[] = ' . ')'; } if ( ! empty( $title ) ) { if ( ! empty( $settings['link']['url'] ) ) { $parts[] = '### [' . $title . '](' . esc_url( $settings['link']['url'] ) . ')'; } else { $parts[] = '### ' . $title; } } if ( ! empty( $description ) ) { $parts[] = $description; } return implode( "\n\n", $parts ); } }
Upload Files
Cancel
Upload
Create New
Cancel
Create
Change Permissions
Cancel
Save
Change Date
Cancel
Save
Rename Item
Cancel
Save
Confirm Delete
Are you sure you want to delete the selected items?
Cancel
Delete