Posted on

Adding render attributes in Elementor

How to use the add_render_attribute

The add_render_attribute allow to add things to the code. it seems to me that it is rendered when the page load up, or when I change a state in the editor such as a switcher. changing values on a slider seemed not have an interactive response, so be aware of that!

 

the 3 paramaters are:

1.  A name that serves as a refrence later when I call the added attribute
2. What kind of attribute it is
3. Information I want to pass

				
								$this->add_render_attribute('imageCss', 'style', 'position:absolute;
			color: blue;');

In this example I am creating an CSS – I am calling it ‘imageCss ‘ and I declare it to be a ‘style’ then I declare what I want to be in the style which in this case is wrtitten in a css style:

element name, value and closing ;

in order to use this info – in this case add this css to an image of class ‘thisImage’. I am calling the attribute through the $this->get_render_attribute_string( ‘imageCss’ ) . ‘;

Note that I am not putting this inside a “style = “, it seems to be already taken from the declration of the render attribute ‘style’

				
					echo '<img decoding="async" class ="theImage" src="' . $settings['theImage']['url'] . '"  
			' . $this->get_render_attribute_string( 'imageCss' ) . ';													
			">';

What i found missing in the documentation is the explenation how to use the reset option.
So far it works when I check if the popover-toggle returns a yes and do something accordingly

				
					if('yes' == $settings['ImageCss_popover_toggle']){
			$this->add_render_attribute('imageCss', 'style', 'position:absolute;');
		}
		else{
			//reset the css by setting a filter to nothing
			$this->add_render_attribute('imageCss', 'style', 'position:absolute; filter: blur(0px);');
		}

In this case I am adding a custom css, in which if the return value from the popover is yes, then it will have no special value and the filter will come from somewhere else. Howevere if the return value is no (that will happen when I click the reset in the popover toggle window) then I am adding a css rule of an empty filter, which will over ride the values that come from within the popover controller.

Posted on

Using the popover toggle in Elementor

Using the PopOver

 

When using the popover controller there is a small icon to reset. this is the original popover controller from Elementor documentation:

				
					$this->add_control(
	'popover-toggle',
	[
		'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
		'label' => esc_html__( 'Box', 'textdomain' ),
		'label_off' => esc_html__( 'Default', 'textdomain' ),
		'label_on' => esc_html__( 'Custom', 'textdomain' ),
		'return_value' => 'yes',
	]
);

$this->start_popover();

$this->end_popover();

This is my version, where I add also a ‘no’ as a default, so it will start on an off position.

				
					$this->add_control(
				'ImageCss_popover_toggle',
				[
					'label' => esc_html__( 'Css FILTERS', 'textdomain' ),
					'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
					'label_off' => esc_html__( 'Default', 'textdomain' ),
					'label_on' => esc_html__( 'Custom', 'textdomain' ),
					'return_value' => 'yes',
					'default' => 'no',
				]
			);

What i found missing in the documentation is the explenation how to use the reset option.
So far it works when I check if the popover-toggle returns a yes and do something accordingly

				
					if('yes' == $settings['ImageCss_popover_toggle']){
			$this->add_render_attribute('imageCss', 'style', 'position:absolute;');
		}
		else{
			//reset the css by setting a filter to nothing
			$this->add_render_attribute('imageCss', 'style', 'position:absolute; filter: blur(0px);');
		}

In this case I am adding a custom css, in which if the return value from the popover is yes, then it will have no special value and the filter will come from somewhere else. Howevere if the return value is no (that will happen when I click the reset in the popover toggle window) then I am adding a css rule of an empty filter, which will over ride the values that come from within the popover controller.