← All changes | includes/widgets/image.php +81 -186 4.1.0-dev1 → 3.5.6 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,13 +449,12 @@
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	455	'range' => [
509	456	'px' => [
510		- 'min' => 0,
511	457	'max' => 3,
512	458	'step' => 0.1,
513	459	],
514	460	],
		@@ -543,9 +489,9 @@
543	489	'image_border_radius',
544	490	[
545	491	'label' => esc_html__( 'Border Radius', 'elementor' ),
546	492	'type' => Controls_Manager::DIMENSIONS,
547		- 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
	493	+ 'size_units' => [ 'px', '%' ],
548	494	'selectors' => [
549	495	'{{WRAPPER}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
550	496	],
551	497	]
		@@ -569,22 +515,21 @@
569	515	[
570	516	'label' => esc_html__( 'Caption', 'elementor' ),
571	517	'tab' => Controls_Manager::TAB_STYLE,
572	518	'condition' => [
573		- 'image[url]!' => '',
574	519	'caption_source!' => 'none',
575	520	],
576	521	]
577	522	);
578	523
579		- $this->add_responsive_control(
	524	+ $this->add_control(
580	525	'caption_align',
581	526	[
582	527	'label' => esc_html__( 'Alignment', 'elementor' ),
583	528	'type' => Controls_Manager::CHOOSE,
584	529	'options' => [
585		- 'start' => [
586		- 'title' => esc_html__( 'Start', 'elementor' ),
	530	+ 'left' => [
	531	+ 'title' => esc_html__( 'Left', 'elementor' ),
587	532	'icon' => 'eicon-text-align-left',
588	533	],
589	534	'center' => [
590	535	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -589,10 +534,10 @@
589	534	'center' => [
590	535	'title' => esc_html__( 'Center', 'elementor' ),
591	536	'icon' => 'eicon-text-align-center',
592	537	],
593		- 'end' => [
594		- 'title' => esc_html__( 'End', 'elementor' ),
	538	+ 'right' => [
	539	+ 'title' => esc_html__( 'Right', 'elementor' ),
595	540	'icon' => 'eicon-text-align-right',
596	541	],
597	542	'justify' => [
598	543	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -598,13 +543,8 @@
598	543	'title' => esc_html__( 'Justified', 'elementor' ),
599	544	'icon' => 'eicon-text-align-justify',
600	545	],
601	546	],
602		- 'classes' => 'elementor-control-start-end',
603		- 'selectors_dictionary' => [
604		- 'left' => is_rtl() ? 'end' : 'start',
605		- 'right' => is_rtl() ? 'start' : 'end',
606		- ],
607	547	'default' => '',
608	548	'selectors' => [
609	549	'{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};',
610	550	],
		@@ -660,24 +600,16 @@
660	600	'caption_space',
661	601	[
662	602	'label' => esc_html__( 'Spacing', 'elementor' ),
663	603	'type' => Controls_Manager::SLIDER,
664		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
665	604	'range' => [
666	605	'px' => [
	606	+ 'min' => 0,
667	607	'max' => 100,
668	608	],
669		- 'em' => [
670		- 'min' => 0,
671		- 'max' => 10,
672		- ],
673		- 'rem' => [
674		- 'min' => 0,
675		- 'max' => 10,
676		- ],
677	609	],
678	610	'selectors' => [
679		- '{{WRAPPER}} .widget-image-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
	611	+ '{{WRAPPER}} .widget-image-caption' => 'margin-top: {{SIZE}}{{UNIT}};',
680	612	],
681	613	]
682	614	);
683	615
		@@ -702,9 +634,9 @@
702	634	* Get the caption for current widget.
703	635	*
704	636	* @access private
705	637	* @since 2.3.0
706		- * @param array $settings
	638	+ * @param $settings
707	639	*
708	640	* @return string
709	641	*/
710	642	private function get_caption( $settings ) {
		@@ -735,8 +667,12 @@
735	667	if ( empty( $settings['image']['url'] ) ) {
736	668	return;
737	669	}
738	670
	671	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) {
	672	+ $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' );
	673	+ }
	674	+
739	675	$has_caption = $this->has_caption( $settings );
740	676
741	677	$link = $this->get_link_url( $settings );
742	678
		@@ -752,8 +688,11 @@
752	688	if ( 'custom' !== $settings['link_to'] ) {
753	689	$this->add_lightbox_data_attributes( 'link', $settings['image']['id'], $settings['open_lightbox'] );
754	690	}
755	691	} ?>
	692	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	693	+ <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
	694	+ <?php } ?>
756	695	<?php if ( $has_caption ) : ?>
757	696	<figure class="wp-caption">
758	697	<?php endif; ?>
759	698	<?php if ( $link ) : ?>
		@@ -770,67 +709,14 @@
770	709	<?php endif; ?>
771	710	<?php if ( $has_caption ) : ?>
772	711	</figure>
773	712	<?php endif; ?>
	713	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	714	+ </div>
	715	+ <?php } ?>
774	716	<?php
775	717	}
776	718
777		- public function render_markdown(): string {
778		- $settings = $this->get_settings_for_display();
779		-
780		- if ( empty( $settings['image']['url'] ) ) {
781		- return '';
782		- }
783		-
784		- $url = esc_url( $settings['image']['url'] );
785		- $alt = $this->get_image_alt_text( $settings );
786		- $image_md = '';
787		-
788		- $link = $this->get_link_url( $settings );
789		-
790		- if ( ! empty( $link['url'] ) && $link['url'] !== $url ) {
791		- $image_md = '[' . $image_md . '](' . esc_url( $link['url'] ) . ')';
792		- }
793		-
794		- $caption = $this->get_visible_caption( $settings );
795		-
796		- if ( ! empty( $caption ) ) {
797		- $image_md .= "\n" . $caption;
798		- }
799		-
800		- return $image_md;
801		- }
802		-
803		- private function get_image_alt_text( array $settings ): string {
804		- if ( empty( $settings['image']['id'] ) ) {
805		- return '';
806		- }
807		-
808		- $attachment_id = $settings['image']['id'];
809		-
810		- $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
811		-
812		- if ( ! empty( $alt ) ) {
813		- return $alt;
814		- }
815		-
816		- $attachment = get_post( $attachment_id );
817		-
818		- if ( ! $attachment ) {
819		- return '';
820		- }
821		-
822		- return $attachment->post_title ?? '';
823		- }
824		-
825		- private function get_visible_caption( array $settings ): string {
826		- if ( ! $this->has_caption( $settings ) ) {
827		- return '';
828		- }
829		-
830		- return Utils::html_to_plain_text( $this->get_caption( $settings ) );
831		- }
832		-
833	719	/**
834	720	* Render image widget output in the editor.
835	721	*
836	722	* Written as a Backbone JavaScript template and used to generate the live preview.
		@@ -887,9 +773,9 @@
887	773
888	774	var link_url;
889	775
890	776	if ( 'custom' === settings.link_to ) {
891		- link_url = settings.link?.url;
	777	+ link_url = settings.link.url;
892	778	}
893	779
894	780	if ( 'file' === settings.link_to ) {
895	781	link_url = settings.image.url;
		@@ -894,8 +780,12 @@
894	780	if ( 'file' === settings.link_to ) {
895	781	link_url = settings.image.url;
896	782	}
897	783
	784	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	785	+ #><div class="elementor-image{{ settings.shape ? ' elementor-image-shape-' + settings.shape : '' }}"><#
	786	+ <?php } ?>
	787	+
898	788	var imgClass = '';
899	789
900	790	if ( '' !== settings.hover_animation ) {
901	791	imgClass = 'elementor-animation-' + settings.hover_animation;
		@@ -905,9 +795,9 @@
905	795	#><figure class="wp-caption"><#
906	796	}
907	797
908	798	if ( link_url ) {
909		- #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ elementor.helpers.sanitizeUrl( link_url ) }}"><#
	799	+ #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ link_url }}"><#
910	800	}
911	801	#><img src="{{ image_url }}" class="{{ imgClass }}" /><#
912	802
913	803	if ( link_url ) {
		@@ -920,8 +810,13 @@
920	810
921	811	if ( hasCaption() ) {
922	812	#></figure><#
923	813	}
	814	+
	815	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	816	+ #></div><#
	817	+ <?php } ?>
	818	+
924	819	} #>
925	820	<?php
926	821	}
927	822
		@@ -927,16 +822,16 @@
927	822
928	823	/**
929	824	* Retrieve image widget link URL.
930	825	*
931		- * @since 3.11.0
932		- * @access protected
	826	+ * @since 1.0.0
	827	+ * @access private
933	828	*
934	829	* @param array $settings
935	830	*
936	831	* @return array|string|false An array/string containing the link URL, or false if no link.
937	832	*/
938		- protected function get_link_url( $settings ) {
	833	+ private function get_link_url( $settings ) {
939	834	if ( 'none' === $settings['link_to'] ) {
940	835	return false;
941	836	}
942	837