媒体控件

Elementor 媒体控件基于 WordPress 媒体库显示媒体选择器部分，允许用户从媒体库中选择图像。

该控件在继承 Control_Base_Multiple 类的 Control_Media 类中定义。

使用此控件时，应将 type 设置为 \Elementor\Controls_Manager::MEDIA 常量。

参数

Return Value

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

(array) An array containing image data:

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

Usage

Add an image:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

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

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

		$this->end_controls_section();

	}

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

		if ( empty( $settings['image']['url'] ) ) {
			return;
		}

		// 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
		$this->add_render_attribute( 'image', 'src', $settings['image']['url'] );
		$this->add_render_attribute( 'image', 'alt', \Elementor\Control_Media::get_image_alt( $settings['image'] ) );
		$this->add_render_attribute( 'image', 'title', \Elementor\Control_Media::get_image_title( $settings['image'] ) );
		$this->add_render_attribute( 'image', 'class', 'my-custom-class' );
		echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' );
	}

	protected function content_template(): void {
		?>
		<#
		if ( '' === settings.image.url ) {
			return;
		}

		const image = {
			id: settings.image.id,
			url: settings.image.url,
			size: settings.image_size,
			dimension: settings.image_custom_dimension,
			model: view.getEditModel()
		};

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

		if ( '' === image_url ) {
			return;
		}
		#>
		<img src="{{ image_url }}">
		<?php
	}

}

Add a video media type to display a self hosted video:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

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

		$this->add_control(
			'video',
			[
				'label' => esc_html__( 'Choose Video File', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'media_types' => [ 'video' ],
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		$video_url = $settings['video']['url'];

if ( empty( $video_url ) ) {
			return;
		}
		?>
		<video src="<?php echo esc_attr( $video_url ); ?>" class="elementor-video"></video>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		const video_url = settings.video.url;

		if ( '' === video_url ) {
			return;
		}
		#>
		<video src="{{ video_url }}" class="elementor-video"></video>
		<?php
	}

}

Add a PDF file:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

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

		$this->add_control(
			'pdf',
			[
				'label' => esc_html__( 'Choose PDF', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'media_types' => [ 'application/pdf' ],
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		$pdf_url = $settings['pdf']['url'];

		if ( ! empty( $pdf_url ) ) {
			return;
		}
		?>
		<a download href="<?php echo esc_attr( $pdf_url ); ?>">
			<?php echo esc_html__( 'Download PDF', 'textdomain' ); ?>
		</a>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		const pdf_url = settings.pdf.url;

		if ( '' === pdf_url ) {
			return;
		}
		#>
		<a download src="{{ pdf_url }}">
			<?php echo esc_html__( 'Download PDF', 'textdomain' ); ?>
		</a>
		<?php
	}

}