Table of Contents
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
| Name | Type | Default | Description |
|---|---|---|---|
type |
string |
media | The type of the control. |
label |
string |
The label that appears above of the field. | |
description |
string |
The description that appears below the field. | |
show_label |
bool |
true | Whether to display the label. |
label_block |
bool |
true | Whether to display the label in a separate line. |
separator |
string |
default | Set the position of the control separator. Available values are default, before, after and none. default will position the separator depending on the control type. before / after will position the separator before/after the control. none will hide the separator. |
default |
array |
Default media values.
|
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
}
}