title: "图像尺寸组控件" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Editor Controls - Src - Repos

图像尺寸组控件

Elementor 图像尺寸组控件显示输入字段，用于定义默认图像尺寸（缩略图、中等、中等大、大）或自定义图像尺寸。

该控件在 Group_Control_Image_Size 类中定义，该类继承自 Group_Control_Base 类。

使用此组控件时，type 应设置为 Group_Control_Image_Size::get_type() 方法。

参数

名称	类型	默认值	描述
`type`	`string`	image-size	控件的类型。
`separator`	`string`	default	设置控件分隔符的位置。可用值为 `default`、`before` 和 `after`。`default` 将隐藏分隔符，除非控件类型有特定的分隔符设置。`before` / `after` 会将分隔符定位在控件之前/之后。
`include`	`array`		要包含的图像尺寸。
`exclude`	`array`		要排除的图像尺寸。
`default`	`string`		默认的图像尺寸。

返回值

[
    '{name}_size' => '',
    '{name}_custom_dimension' => '',
]

(array) 包含图像尺寸值的数组。

${name}_size (string) 图像尺寸。
${name}_custom_dimension (string) 图像维度。

Usage

```php {14-33,41,46-56}

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->add_group_control( \Elementor\Group_Control_Image_Size::get_type(), [ 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`. 'exclude' => [ 'custom' ], 'include' => [], 'default' => 'large', ] ); $this->end_controls_section(); } protected function render(): void { $settings = $this->get_settings_for_display(); echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings, 'thumbnail', 'image' ); } protected function content_template(): void { ?>

    <#
    const image = {
        id: settings.image.id,
        url: settings.image.url,
        size: settings.thumbnail_size,
        dimension: settings.thumbnail_custom_dimension,
        model: view.getEditModel()
    };
    const image_url = elementor.imagesManager.getImageUrl( image );
    #>
    <img src="{{{ image_url }}}" />
    <?php
}

} ```