Media Control

Elementor Media control displays a media chooser section based on the WordPress media library. It allows the user to select an image from the media library.

The control is defined in Control_Media class which extends Control_Base_Multiple class.

Note that when using the control, the type should be set using the \Elementor\Controls_Manager::MEDIA constant.

Arguments

Return Value

(array) An array containing image data:

• $id (int) Media id.
• $url (string) Media url.

[
	'id' => '',
	'url' => '',
]

Usage

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'image',
			[
				'label' => __( 'Choose Image', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();

		// Get image URL
		echo '<img src="' . $settings['image']['url'] . '">';

		// Get image 'thumbnail' by ID
		echo wp_get_attachment_image( $settings['image']['id'], 'thumbnail' );

		// Get image HTML
		echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings );
	}

	protected function _content_template() {
		?>
		<img src="{{ settings.image.url }}">
		<?php
	}

}