Elementor Image Set Default Values

by

Default values for the Control 'Group_control_background'

I want to show you how you can set default values for the control ‘Group_Control_Background‘ to display a background image.

You have to set the ‘fields_options‘ array of array with ‘key‘ => [‘default‘ => ‘value‘] like any other css properties.
The background image will be affected by the default values and cover the container, the focal point is centered and the image is not repeated.

$this->add_group_control(
Group_Control_Background::get_type(),
[
    'name' => 'mb_modal_box_bg',
    'types' => ['classic', 'gradient'],
    'fields_options' => [
	    'image' => [
		    'default' => ['url'	=> Utils::get_placeholder_image_src()],
		],
		'size' => ['default' => 'cover'],
		'position' => ['default' => 'center center'],
		'repeat' => ['default' => 'no-repeat'],
    ],
	'selector' => '{{WRAPPER}} .myclass-bg',
]
);

Full default values with 'Controls_Manager::DIMENSIONS'

I want to show you how you can set default values for an image to display a perfect rounded image.

If your image is not square, put the ‘Group_Control_Image_Size‘ control with property ‘Image Size’ equal Custom and whose default values could be 400×400

$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
    'name' => 'ir_image',
    'default' => 'custom',
]
);

After that we set all dimensions ‘allowed_dimensions‘ to which we assign a default value of 50 with unit in %.
The four dimensions are linked.
The result applies to an image which will have a perfectly round rendering.

$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}};'],
    ]
]
);

Two default values with 'Controls_Manager::DIMENSIONS'

I want to show you how you can set default values to modify only two corners of an image.

In this example we only define two dimensions  with ‘allowed_dimensions‘ to which we assign a value in ‘px’.
The two dimensions are linked.
Note that the ‘WRAPPER‘ should be apply to all 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