← All changes | includes/widgets/image.php +84 -135 4.0.7 → 3.10.0-dev1 View file →

		@@ -88,31 +88,9 @@
88	88	public function get_keywords() {
89	89	return [ 'image', 'photo', 'visual' ];
90	90	}
91	91
92		- protected function is_dynamic_content(): bool {
93		- return false;
94		- }
95		-
96	92	/**
97		- * Get style dependencies.
98		- *
99		- * Retrieve the list of style dependencies the widget requires.
100		- *
101		- * @since 3.24.0
102		- * @access public
103		- *
104		- * @return array Widget style dependencies.
105		- */
106		- public function get_style_depends(): array {
107		- return [ 'widget-image' ];
108		- }
109		-
110		- public function has_widget_inner_wrapper(): bool {
111		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
112		- }
113		-
114		- /**
115	93	* Register image widget controls.
116	94	*
117	95	* Adds different input fields to allow the user to change and customize the widget settings.
118	96	*
		@@ -145,11 +123,34 @@
145	123	Group_Control_Image_Size::get_type(),
146	124	[
147	125	'name' => 'image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `image_size` and `image_custom_dimension`.
148	126	'default' => 'large',
149		- 'condition' => [
150		- 'image[url]!' => '',
	127	+ 'separator' => 'none',
	128	+ ]
	129	+ );
	130	+
	131	+ $this->add_responsive_control(
	132	+ 'align',
	133	+ [
	134	+ 'label' => esc_html__( 'Alignment', 'elementor' ),
	135	+ 'type' => Controls_Manager::CHOOSE,
	136	+ 'options' => [
	137	+ 'left' => [
	138	+ 'title' => esc_html__( 'Left', 'elementor' ),
	139	+ 'icon' => 'eicon-text-align-left',
	140	+ ],
	141	+ 'center' => [
	142	+ 'title' => esc_html__( 'Center', 'elementor' ),
	143	+ 'icon' => 'eicon-text-align-center',
	144	+ ],
	145	+ 'right' => [
	146	+ 'title' => esc_html__( 'Right', 'elementor' ),
	147	+ 'icon' => 'eicon-text-align-right',
	148	+ ],
151	149	],
	150	+ 'selectors' => [
	151	+ '{{WRAPPER}}' => 'text-align: {{VALUE}};',
	152	+ ],
152	153	]
153	154	);
154	155
155	156	$this->add_control(
		@@ -162,11 +163,8 @@
162	163	'attachment' => esc_html__( 'Attachment Caption', 'elementor' ),
163	164	'custom' => esc_html__( 'Custom Caption', 'elementor' ),
164	165	],
165	166	'default' => 'none',
166		- 'condition' => [
167		- 'image[url]!' => '',
168		- ],
169	167	]
170	168	);
171	169
172	170	$this->add_control(
		@@ -176,9 +174,8 @@
176	174	'type' => Controls_Manager::TEXT,
177	175	'default' => '',
178	176	'placeholder' => esc_html__( 'Enter your image caption', 'elementor' ),
179	177	'condition' => [
180		- 'image[url]!' => '',
181	178	'caption_source' => 'custom',
182	179	],
183	180	'dynamic' => [
184	181	'active' => true,
		@@ -196,11 +193,8 @@
196	193	'none' => esc_html__( 'None', 'elementor' ),
197	194	'file' => esc_html__( 'Media File', 'elementor' ),
198	195	'custom' => esc_html__( 'Custom URL', 'elementor' ),
199	196	],
200		- 'condition' => [
201		- 'image[url]!' => '',
202		- ],
203	197	]
204	198	);
205	199
206	200	$this->add_control(
		@@ -210,10 +204,10 @@
210	204	'type' => Controls_Manager::URL,
211	205	'dynamic' => [
212	206	'active' => true,
213	207	],
	208	+ 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
214	209	'condition' => [
215		- 'image[url]!' => '',
216	210	'link_to' => 'custom',
217	211	],
218	212	'show_label' => false,
219	213	]
		@@ -223,14 +217,8 @@
223	217	'open_lightbox',
224	218	[
225	219	'label' => esc_html__( 'Lightbox', 'elementor' ),
226	220	'type' => Controls_Manager::SELECT,
227		- 'description' => sprintf(
228		- /* translators: 1: Link open tag, 2: Link close tag. */
229		- esc_html__( 'Manage your site’s lightbox settings in the %1$sLightbox panel%2$s.', 'elementor' ),
230		- '<a href="javascript: $e.run( \'panel/global/open\' ).then( () => $e.route( \'panel/global/settings-lightbox\' ) )">',
231		- '</a>'
232		- ),
233	221	'default' => 'default',
234	222	'options' => [
235	223	'default' => esc_html__( 'Default', 'elementor' ),
236	224	'yes' => esc_html__( 'Yes', 'elementor' ),
		@@ -236,14 +224,22 @@
236	224	'yes' => esc_html__( 'Yes', 'elementor' ),
237	225	'no' => esc_html__( 'No', 'elementor' ),
238	226	],
239	227	'condition' => [
240		- 'image[url]!' => '',
241	228	'link_to' => 'file',
242	229	],
243	230	]
244	231	);
245	232
	233	+ $this->add_control(
	234	+ 'view',
	235	+ [
	236	+ 'label' => esc_html__( 'View', 'elementor' ),
	237	+ 'type' => Controls_Manager::HIDDEN,
	238	+ 'default' => 'traditional',
	239	+ ]
	240	+ );
	241	+
246	242	$this->end_controls_section();
247	243
248	244	$this->start_controls_section(
249	245	'section_style_image',
		@@ -253,38 +249,8 @@
253	249	]
254	250	);
255	251
256	252	$this->add_responsive_control(
257		- 'align',
258		- [
259		- 'label' => esc_html__( 'Alignment', 'elementor' ),
260		- 'type' => Controls_Manager::CHOOSE,
261		- 'options' => [
262		- 'start' => [
263		- 'title' => esc_html__( 'Start', 'elementor' ),
264		- 'icon' => 'eicon-text-align-left',
265		- ],
266		- 'center' => [
267		- 'title' => esc_html__( 'Center', 'elementor' ),
268		- 'icon' => 'eicon-text-align-center',
269		- ],
270		- 'end' => [
271		- 'title' => esc_html__( 'End', 'elementor' ),
272		- 'icon' => 'eicon-text-align-right',
273		- ],
274		- ],
275		- 'classes' => 'elementor-control-start-end',
276		- 'selectors_dictionary' => [
277		- 'left' => is_rtl() ? 'end' : 'start',
278		- 'right' => is_rtl() ? 'start' : 'end',
279		- ],
280		- 'selectors' => [
281		- '{{WRAPPER}}' => 'text-align: {{VALUE}};',
282		- ],
283		- ]
284		- );
285		-
286		- $this->add_responsive_control(
287	253	'width',
288	254	[
289	255	'label' => esc_html__( 'Width', 'elementor' ),
290	256	'type' => Controls_Manager::SLIDER,
		@@ -296,9 +262,9 @@
296	262	],
297	263	'mobile_default' => [
298	264	'unit' => '%',
299	265	],
300		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	266	+ 'size_units' => [ '%', 'px', 'vw' ],
301	267	'range' => [
302	268	'%' => [
303	269	'min' => 1,
304	270	'max' => 100,
		@@ -331,9 +297,9 @@
331	297	],
332	298	'mobile_default' => [
333	299	'unit' => '%',
334	300	],
335		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	301	+ 'size_units' => [ '%', 'px', 'vw' ],
336	302	'range' => [
337	303	'%' => [
338	304	'min' => 1,
339	305	'max' => 100,
		@@ -357,9 +323,18 @@
357	323	'height',
358	324	[
359	325	'label' => esc_html__( 'Height', 'elementor' ),
360	326	'type' => Controls_Manager::SLIDER,
361		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
	327	+ 'default' => [
	328	+ 'unit' => 'px',
	329	+ ],
	330	+ 'tablet_default' => [
	331	+ 'unit' => 'px',
	332	+ ],
	333	+ 'mobile_default' => [
	334	+ 'unit' => 'px',
	335	+ ],
	336	+ 'size_units' => [ 'px', 'vh' ],
362	337	'range' => [
363	338	'px' => [
364	339	'min' => 1,
365	340	'max' => 500,
		@@ -387,9 +362,8 @@
387	362	'' => esc_html__( 'Default', 'elementor' ),
388	363	'fill' => esc_html__( 'Fill', 'elementor' ),
389	364	'cover' => esc_html__( 'Cover', 'elementor' ),
390	365	'contain' => esc_html__( 'Contain', 'elementor' ),
391		- 'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
392	366	],
393	367	'default' => '',
394	368	'selectors' => [
395	369	'{{WRAPPER}} img' => 'object-fit: {{VALUE}};',
		@@ -396,35 +370,8 @@
396	370	],
397	371	]
398	372	);
399	373
400		- $this->add_responsive_control(
401		- 'object-position',
402		- [
403		- 'label' => esc_html__( 'Object Position', 'elementor' ),
404		- 'type' => Controls_Manager::SELECT,
405		- 'options' => [
406		- 'center center' => esc_html__( 'Center Center', 'elementor' ),
407		- 'center left' => esc_html__( 'Center Left', 'elementor' ),
408		- 'center right' => esc_html__( 'Center Right', 'elementor' ),
409		- 'top center' => esc_html__( 'Top Center', 'elementor' ),
410		- 'top left' => esc_html__( 'Top Left', 'elementor' ),
411		- 'top right' => esc_html__( 'Top Right', 'elementor' ),
412		- 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
413		- 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
414		- 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
415		- ],
416		- 'default' => 'center center',
417		- 'selectors' => [
418		- '{{WRAPPER}} img' => 'object-position: {{VALUE}};',
419		- ],
420		- 'condition' => [
421		- 'height[size]!' => '',
422		- 'object-fit' => [ 'cover', 'contain', 'scale-down' ],
423		- ],
424		- ]
425		- );
426		-
427	374	$this->add_control(
428	375	'separator_panel_style',
429	376	[
430	377	'type' => Controls_Manager::DIVIDER,
		@@ -502,19 +449,16 @@
502	449
503	450	$this->add_control(
504	451	'background_hover_transition',
505	452	[
506		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	453	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
507	454	'type' => Controls_Manager::SLIDER,
508		- 'range' => [
509		- 'px' => [
510		- 'min' => 0,
511		- 'max' => 3,
512		- 'step' => 0.1,
513		- ],
	455	+ 'size_units' => [ 's', 'ms' ],
	456	+ 'default' => [
	457	+ 'unit' => 's',
514	458	],
515	459	'selectors' => [
516		- '{{WRAPPER}} img' => 'transition-duration: {{SIZE}}s',
	460	+ '{{WRAPPER}} img' => 'transition-duration: {{SIZE}}{{UNIT}}',
517	461	],
518	462	]
519	463	);
520	464
		@@ -543,9 +487,9 @@
543	487	'image_border_radius',
544	488	[
545	489	'label' => esc_html__( 'Border Radius', 'elementor' ),
546	490	'type' => Controls_Manager::DIMENSIONS,
547		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	491	+ 'size_units' => [ 'px', '%', 'em' ],
548	492	'selectors' => [
549	493	'{{WRAPPER}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
550	494	],
551	495	]
		@@ -569,9 +513,8 @@
569	513	[
570	514	'label' => esc_html__( 'Caption', 'elementor' ),
571	515	'tab' => Controls_Manager::TAB_STYLE,
572	516	'condition' => [
573		- 'image[url]!' => '',
574	517	'caption_source!' => 'none',
575	518	],
576	519	]
577	520	);
		@@ -581,10 +524,10 @@
581	524	[
582	525	'label' => esc_html__( 'Alignment', 'elementor' ),
583	526	'type' => Controls_Manager::CHOOSE,
584	527	'options' => [
585		- 'start' => [
586		- 'title' => esc_html__( 'Start', 'elementor' ),
	528	+ 'left' => [
	529	+ 'title' => esc_html__( 'Left', 'elementor' ),
587	530	'icon' => 'eicon-text-align-left',
588	531	],
589	532	'center' => [
590	533	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -589,10 +532,10 @@
589	532	'center' => [
590	533	'title' => esc_html__( 'Center', 'elementor' ),
591	534	'icon' => 'eicon-text-align-center',
592	535	],
593		- 'end' => [
594		- 'title' => esc_html__( 'End', 'elementor' ),
	536	+ 'right' => [
	537	+ 'title' => esc_html__( 'Right', 'elementor' ),
595	538	'icon' => 'eicon-text-align-right',
596	539	],
597	540	'justify' => [
598	541	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -598,13 +541,8 @@
598	541	'title' => esc_html__( 'Justified', 'elementor' ),
599	542	'icon' => 'eicon-text-align-justify',
600	543	],
601	544	],
602		- 'classes' => 'elementor-control-start-end',
603		- 'selectors_dictionary' => [
604		- 'left' => is_rtl() ? 'end' : 'start',
605		- 'right' => is_rtl() ? 'start' : 'end',
606		- ],
607	545	'default' => '',
608	546	'selectors' => [
609	547	'{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};',
610	548	],
		@@ -660,24 +598,16 @@
660	598	'caption_space',
661	599	[
662	600	'label' => esc_html__( 'Spacing', 'elementor' ),
663	601	'type' => Controls_Manager::SLIDER,
664		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
665	602	'range' => [
666	603	'px' => [
	604	+ 'min' => 0,
667	605	'max' => 100,
668	606	],
669		- 'em' => [
670		- 'min' => 0,
671		- 'max' => 10,
672		- ],
673		- 'rem' => [
674		- 'min' => 0,
675		- 'max' => 10,
676		- ],
677	607	],
678	608	'selectors' => [
679		- '{{WRAPPER}} .widget-image-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
	609	+ '{{WRAPPER}} .widget-image-caption' => 'margin-top: {{SIZE}}{{UNIT}};',
680	610	],
681	611	]
682	612	);
683	613
		@@ -702,9 +632,9 @@
702	632	* Get the caption for current widget.
703	633	*
704	634	* @access private
705	635	* @since 2.3.0
706		- * @param array $settings
	636	+ * @param $settings
707	637	*
708	638	* @return string
709	639	*/
710	640	private function get_caption( $settings ) {
		@@ -735,8 +665,12 @@
735	665	if ( empty( $settings['image']['url'] ) ) {
736	666	return;
737	667	}
738	668
	669	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) {
	670	+ $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' );
	671	+ }
	672	+
739	673	$has_caption = $this->has_caption( $settings );
740	674
741	675	$link = $this->get_link_url( $settings );
742	676
		@@ -752,8 +686,11 @@
752	686	if ( 'custom' !== $settings['link_to'] ) {
753	687	$this->add_lightbox_data_attributes( 'link', $settings['image']['id'], $settings['open_lightbox'] );
754	688	}
755	689	} ?>
	690	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	691	+ <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
	692	+ <?php } ?>
756	693	<?php if ( $has_caption ) : ?>
757	694	<figure class="wp-caption">
758	695	<?php endif; ?>
759	696	<?php if ( $link ) : ?>
		@@ -770,8 +707,11 @@
770	707	<?php endif; ?>
771	708	<?php if ( $has_caption ) : ?>
772	709	</figure>
773	710	<?php endif; ?>
	711	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	712	+ </div>
	713	+ <?php } ?>
774	714	<?php
775	715	}
776	716
777	717	/**
		@@ -831,9 +771,9 @@
831	771
832	772	var link_url;
833	773
834	774	if ( 'custom' === settings.link_to ) {
835		- link_url = settings.link?.url;
	775	+ link_url = settings.link.url;
836	776	}
837	777
838	778	if ( 'file' === settings.link_to ) {
839	779	link_url = settings.image.url;
		@@ -838,8 +778,12 @@
838	778	if ( 'file' === settings.link_to ) {
839	779	link_url = settings.image.url;
840	780	}
841	781
	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	+
842	786	var imgClass = '';
843	787
844	788	if ( '' !== settings.hover_animation ) {
845	789	imgClass = 'elementor-animation-' + settings.hover_animation;
		@@ -849,9 +793,9 @@
849	793	#><figure class="wp-caption"><#
850	794	}
851	795
852	796	if ( link_url ) {
853		- #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ elementor.helpers.sanitizeUrl( link_url ) }}"><#
	797	+ #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ link_url }}"><#
854	798	}
855	799	#><img src="{{ image_url }}" class="{{ imgClass }}" /><#
856	800
857	801	if ( link_url ) {
		@@ -864,8 +808,13 @@
864	808
865	809	if ( hasCaption() ) {
866	810	#></figure><#
867	811	}
	812	+
	813	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	814	+ #></div><#
	815	+ <?php } ?>
	816	+
868	817	} #>
869	818	<?php
870	819	}
871	820
		@@ -871,16 +820,16 @@
871	820
872	821	/**
873	822	* Retrieve image widget link URL.
874	823	*
875		- * @since 3.11.0
876		- * @access protected
	824	+ * @since 1.0.0
	825	+ * @access private
877	826	*
878	827	* @param array $settings
879	828	*
880	829	* @return array|string|false An array/string containing the link URL, or false if no link.
881	830	*/
882		- protected function get_link_url( $settings ) {
	831	+ private function get_link_url( $settings ) {
883	832	if ( 'none' === $settings['link_to'] ) {
884	833	return false;
885	834	}
886	835