← All changes | includes/widgets/image.php +30 -22 3.1.4 → 3.2.0 View file →

		@@ -278,9 +278,9 @@
278	278	'max' => 100,
279	279	],
280	280	],
281	281	'selectors' => [
282		- '{{WRAPPER}} .elementor-image img' => 'width: {{SIZE}}{{UNIT}};',
	282	+ '{{WRAPPER}} img' => 'width: {{SIZE}}{{UNIT}};',
283	283	],
284	284	]
285	285	);
286	286
		@@ -313,9 +313,9 @@
313	313	'max' => 100,
314	314	],
315	315	],
316	316	'selectors' => [
317		- '{{WRAPPER}} .elementor-image img' => 'max-width: {{SIZE}}{{UNIT}};',
	317	+ '{{WRAPPER}} img' => 'max-width: {{SIZE}}{{UNIT}};',
318	318	],
319	319	]
320	320	);
321	321
		@@ -344,9 +344,9 @@
344	344	'max' => 100,
345	345	],
346	346	],
347	347	'selectors' => [
348		- '{{WRAPPER}} .elementor-image img' => 'height: {{SIZE}}{{UNIT}};',
	348	+ '{{WRAPPER}} img' => 'height: {{SIZE}}{{UNIT}};',
349	349	],
350	350	]
351	351	);
352	352
		@@ -365,9 +365,9 @@
365	365	'contain' => __( 'Contain', 'elementor' ),
366	366	],
367	367	'default' => '',
368	368	'selectors' => [
369		- '{{WRAPPER}} .elementor-image img' => 'object-fit: {{VALUE}};',
	369	+ '{{WRAPPER}} img' => 'object-fit: {{VALUE}};',
370	370	],
371	371	]
372	372	);
373	373
		@@ -399,9 +399,9 @@
399	399	'step' => 0.01,
400	400	],
401	401	],
402	402	'selectors' => [
403		- '{{WRAPPER}} .elementor-image img' => 'opacity: {{SIZE}};',
	403	+ '{{WRAPPER}} img' => 'opacity: {{SIZE}};',
404	404	],
405	405	]
406	406	);
407	407
		@@ -408,9 +408,9 @@
408	408	$this->add_group_control(
409	409	Group_Control_Css_Filter::get_type(),
410	410	[
411	411	'name' => 'css_filters',
412		- 'selector' => '{{WRAPPER}} .elementor-image img',
	412	+ 'selector' => '{{WRAPPER}} img',
413	413	]
414	414	);
415	415
416	416	$this->end_controls_tab();
		@@ -433,9 +433,9 @@
433	433	'step' => 0.01,
434	434	],
435	435	],
436	436	'selectors' => [
437		- '{{WRAPPER}} .elementor-image:hover img' => 'opacity: {{SIZE}};',
	437	+ '{{WRAPPER}}:hover img' => 'opacity: {{SIZE}};',
438	438	],
439	439	]
440	440	);
441	441
		@@ -442,9 +442,9 @@
442	442	$this->add_group_control(
443	443	Group_Control_Css_Filter::get_type(),
444	444	[
445	445	'name' => 'css_filters_hover',
446		- 'selector' => '{{WRAPPER}} .elementor-image:hover img',
	446	+ 'selector' => '{{WRAPPER}}:hover img',
447	447	]
448	448	);
449	449
450	450	$this->add_control(
		@@ -458,9 +458,9 @@
458	458	'step' => 0.1,
459	459	],
460	460	],
461	461	'selectors' => [
462		- '{{WRAPPER}} .elementor-image img' => 'transition-duration: {{SIZE}}s',
	462	+ '{{WRAPPER}} img' => 'transition-duration: {{SIZE}}s',
463	463	],
464	464	]
465	465	);
466	466
		@@ -479,9 +479,9 @@
479	479	$this->add_group_control(
480	480	Group_Control_Border::get_type(),
481	481	[
482	482	'name' => 'image_border',
483		- 'selector' => '{{WRAPPER}} .elementor-image img',
	483	+ 'selector' => '{{WRAPPER}} img',
484	484	'separator' => 'before',
485	485	]
486	486	);
487	487
		@@ -491,9 +491,9 @@
491	491	'label' => __( 'Border Radius', 'elementor' ),
492	492	'type' => Controls_Manager::DIMENSIONS,
493	493	'size_units' => [ 'px', '%' ],
494	494	'selectors' => [
495		- '{{WRAPPER}} .elementor-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	495	+ '{{WRAPPER}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
496	496	],
497	497	]
498	498	);
499	499
		@@ -503,9 +503,9 @@
503	503	'name' => 'image_box_shadow',
504	504	'exclude' => [
505	505	'box_shadow_position',
506	506	],
507		- 'selector' => '{{WRAPPER}} .elementor-image img',
	507	+ 'selector' => '{{WRAPPER}} img',
508	508	]
509	509	);
510	510
511	511	$this->end_controls_section();
		@@ -667,16 +667,14 @@
667	667	if ( empty( $settings['image']['url'] ) ) {
668	668	return;
669	669	}
670	670
	671	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) {
	672	+ $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' );
	673	+ }
	674	+
671	675	$has_caption = $this->has_caption( $settings );
672	676
673		- $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' );
674		-
675		- if ( ! empty( $settings['shape'] ) ) {
676		- $this->add_render_attribute( 'wrapper', 'class', 'elementor-image-shape-' . $settings['shape'] );
677		- }
678		-
679	677	$link = $this->get_link_url( $settings );
680	678
681	679	if ( $link ) {
682	680	$this->add_link_attributes( 'link', $link );
		@@ -690,9 +688,11 @@
690	688	if ( 'custom' !== $settings['link_to'] ) {
691	689	$this->add_lightbox_data_attributes( 'link', $settings['image']['id'], $settings['open_lightbox'] );
692	690	}
693	691	} ?>
694		- <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
	692	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	693	+ <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
	694	+ <?php } ?>
695	695	<?php if ( $has_caption ) : ?>
696	696	<figure class="wp-caption">
697	697	<?php endif; ?>
698	698	<?php if ( $link ) : ?>
		@@ -707,9 +707,11 @@
707	707	<?php endif; ?>
708	708	<?php if ( $has_caption ) : ?>
709	709	</figure>
710	710	<?php endif; ?>
711		- </div>
	711	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	712	+ </div>
	713	+ <?php } ?>
712	714	<?php
713	715	}
714	716
715	717	/**
		@@ -776,9 +778,12 @@
776	778	if ( 'file' === settings.link_to ) {
777	779	link_url = settings.image.url;
778	780	}
779	781
780		- #><div class="elementor-image{{ settings.shape ? ' elementor-image-shape-' + settings.shape : '' }}"><#
	782	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	783	+ #><div class="elementor-image{{ settings.shape ? ' elementor-image-shape-' + settings.shape : '' }}"><#
	784	+ <?php } ?>
	785	+
781	786	var imgClass = '';
782	787
783	788	if ( '' !== settings.hover_animation ) {
784	789	imgClass = 'elementor-animation-' + settings.hover_animation;
		@@ -804,9 +809,12 @@
804	809	if ( hasCaption() ) {
805	810	#></figure><#
806	811	}
807	812
808		- #></div><#
	813	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	814	+ #></div><#
	815	+ <?php } ?>
	816	+
809	817	} #>
810	818	<?php
811	819	}
812	820