HTML to WordPress

Add and show image with size from Elementor widget

Follow the functionality to add and show an image with different sizes from Elementor widget

protected function _register_controls() {

	$this->start_controls_section(
		'image_section',
		[
			'label' => __( 'Image', 'elementor-toolkit' ),
			'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
		]
	);
	
	$this->add_control(
		'image_id',
		[
			'label' => __( 'Image', 'elementor-toolkit' ),
			'type' => \Elementor\Controls_Manager::MEDIA,
			'default' => [
				'url' => \Elementor\Utils::get_placeholder_image_src(),
			],
			
		]
	);
	
	$this->add_group_control(
		\Elementor\Group_Control_Image_Size::get_type(),
		[
			'default' => 'large',
			'name' => 'image_name',
		]
	);

	$this->end_controls_section();
}

protected function render() {
	$settings = $this->get_settings_for_display();
	echo \Elementor\Group_Control_Image_Size::get_attachment_image_html($settings, 'image_name', 'image_id');
}