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

Widget_Image::_content_template

Widget_Image::_content_template()

Render image widget output in the editor.


Description

Written as a Backbone JavaScript template and used to generate the live preview.


Changelog

Changelog
Version Description
1.0.0 Introduced.

Source

includes/widgets/image.php

				<figure class="wp-caption">
			<?php endif; ?>
			<?php if ( $link ) : ?>
					<a <?php echo $this->get_render_attribute_string( 'link' ); ?>>
			<?php endif; ?>
				<?php echo Group_Control_Image_Size::get_attachment_image_html( $settings ); ?>
			<?php if ( $link ) : ?>
					</a>
			<?php endif; ?>
			<?php if ( $has_caption ) : ?>
					<figcaption class="widget-image-caption wp-caption-text"><?php echo $settings['caption']; ?></figcaption>
			<?php endif; ?>
			<?php if ( $has_caption ) : ?>
				</figure>
			<?php endif; ?>
		</div>
		<?php
	}

	/**
	 * Render image 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() {
		?>
		<# if ( settings.image.url ) {
			var image = {
				id: settings.image.id,
				url: settings.image.url,
				size: settings.image_size,
				dimension: settings.image_custom_dimension,
				model: view.getEditModel()
			};

			var image_url = elementor.imagesManager.getImageUrl( image );

			if ( ! image_url ) {
				return;
			}

			var link_url;

			if ( 'custom' === settings.link_to ) {
				link_url = settings.link.url;
			}

			if ( 'file' === settings.link_to ) {
				link_url = settings.image.url;
			}

			#><div class="elementor-image{{ settings.shape ? ' elementor-image-shape-' + settings.shape : '' }}"><#
			var imgClass = '',
				hasCaption = '' !== settings.caption;

			if ( '' !== settings.hover_animation ) {
				imgClass = 'elementor-animation-' + settings.hover_animation;
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