Elementor Code Reference
  • Developers
  • Code Reference
  • Docs
  • Blog
  • Account
  • Developers
  • Code Reference
  • Docs
  • Blog
  • Account

Widget_Image_Box::render

Widget_Image_Box::render()

Render image box widget output on the frontend.


Description

Written in PHP and used to generate the final HTML.


Changelog

Changelog
Version Description
1.0.0 Introduced.

Source

includes/widgets/image-box.php

		$has_content = ! empty( $settings['title_text'] ) || ! empty( $settings['description_text'] );

		$html = '<div class="elementor-image-box-wrapper">';

		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, 'thumbnail', 'image' );

			if ( ! empty( $settings['link']['url'] ) ) {
				$image_html = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $image_html . '</a>';
			}

			$html .= '<figure class="elementor-image-box-img">' . $image_html . '</figure>';
		}

		if ( $has_content ) {
			$html .= '<div class="elementor-image-box-content">';

			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 = '<a ' . $this->get_render_attribute_string( 'link' ) . '>' . $title_html . '</a>';
				}

				$html .= sprintf( '<%1$s %2$s>%3$s</%1$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( '<p %1$s>%2$s</p>', $this->get_render_attribute_string( 'description_text' ), $settings['description_text'] );
			}

			$html .= '</div>';
		}

		$html .= '</div>';

		echo $html;
	}


Uses

  • includes/controls/groups/image-size.php: Group_Control_Image_Size::get_attachment_image_html()
  • includes/controls/media.php: Control_Media::get_image_title()
  • includes/controls/media.php: Control_Media::get_image_alt()
Elementor Code Reference
  • Code Reference
  • Elementor Hooks
    • PHP Hooks
    • JS Hooks
  • Elementor Classes
  • Elementor Methods
  • Elementor Functions
Developer Resources

Visit the official Developer Resources to learn how to extend Elementor.

Get Involved

Visit Elementor GitHub repository to contribute code or suggest new ideas.

  • Contact
  • About Us
  • Terms of Service
  • Privacy Policy
  • Template Library
  • Features
  • Theme Builder
  • Get Pro
Theme by Pojo.me
//Made in Elementor Page Builder
Enter your email and be the first to learn about new updates and features.
No thanks, I just want to download Elementor