Elementor control dimensions

Four dimensional round image

On pose un contrôle ‘Image_Size’ dont la valeur par défaut est sur ‘custom’ et ‘Width et Height’ sur 400.

$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'ir_image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `ir_image_size` and `ir_image_custom_dimension`.
'default' => 'custom',
]
);

On sélectionne toutes les dimensions ‘allowed_dimensions‘ auxquelles on affecte une valeur de 50 en ‘%’.
Le résultat est appliquée à une image qui aura un rendu parfaitement rond.

$this->add_control('ir_image_border_radius',
[
'label' => __('Rayon de la bordure (%)', 'eac-components'),
'type' => Controls_Manager::DIMENSIONS,
'allowed_dimensions' => ['top', 'right', 'bottom', 'left'],
'default' => ['top'=>50, 'right'=>50, 'bottom'=>50, 'left'=>50, 'unit'=>'%', 'isLinked'=>true],
'selectors' => [
'{{WRAPPER}} .image-wrapper img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'],
]
);

Image sur deux dimensions

Dans cette exemple on ne définit que deux dimensions ‘allowed_dimensions‘ auxquelles on affecte une valeur en ‘px’.
Le résultat est appliquée à une image dans cet exemple. Remarquer que le ‘WRAPPER’ doit être appliqué à toutes les dimensions.

$this->add_control('al_image_border_radius',
[
'label' => __('Rayon de la bordure', 'eac-components'),
'type' => Controls_Manager::DIMENSIONS,
'allowed_dimensions' => ['top', 'bottom'],
'default' => ['top' => 75, 'bottom' => 75, 'unit' => 'px', 'isLinked' => true],
'selectors' => [
 '{{WRAPPER}} .al-image-wrapper img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);

Leave a Comment