← All changes | includes/widgets/image.php +64 -147 4.2.0 → 3.16.2 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(
		@@ -211,9 +205,8 @@
211	205	'dynamic' => [
212	206	'active' => true,
213	207	],
214	208	'condition' => [
215		- 'image[url]!' => '',
216	209	'link_to' => 'custom',
217	210	],
218	211	'show_label' => false,
219	212	]
		@@ -236,14 +229,22 @@
236	229	'yes' => esc_html__( 'Yes', 'elementor' ),
237	230	'no' => esc_html__( 'No', 'elementor' ),
238	231	],
239	232	'condition' => [
240		- 'image[url]!' => '',
241	233	'link_to' => 'file',
242	234	],
243	235	]
244	236	);
245	237
	238	+ $this->add_control(
	239	+ 'view',
	240	+ [
	241	+ 'label' => esc_html__( 'View', 'elementor' ),
	242	+ 'type' => Controls_Manager::HIDDEN,
	243	+ 'default' => 'traditional',
	244	+ ]
	245	+ );
	246	+
246	247	$this->end_controls_section();
247	248
248	249	$this->start_controls_section(
249	250	'section_style_image',
		@@ -253,38 +254,8 @@
253	254	]
254	255	);
255	256
256	257	$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	258	'width',
288	259	[
289	260	'label' => esc_html__( 'Width', 'elementor' ),
290	261	'type' => Controls_Manager::SLIDER,
		@@ -387,9 +358,8 @@
387	358	'' => esc_html__( 'Default', 'elementor' ),
388	359	'fill' => esc_html__( 'Fill', 'elementor' ),
389	360	'cover' => esc_html__( 'Cover', 'elementor' ),
390	361	'contain' => esc_html__( 'Contain', 'elementor' ),
391		- 'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
392	362	],
393	363	'default' => '',
394	364	'selectors' => [
395	365	'{{WRAPPER}} img' => 'object-fit: {{VALUE}};',
		@@ -417,10 +387,9 @@
417	387	'selectors' => [
418	388	'{{WRAPPER}} img' => 'object-position: {{VALUE}};',
419	389	],
420	390	'condition' => [
421		- 'height[size]!' => '',
422		- 'object-fit' => [ 'cover', 'contain', 'scale-down' ],
	391	+ 'object-fit' => 'cover',
423	392	],
424	393	]
425	394	);
426	395
		@@ -502,13 +471,12 @@
502	471
503	472	$this->add_control(
504	473	'background_hover_transition',
505	474	[
506		- 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
	475	+ 'label' => esc_html__( 'Transition Duration', 'elementor' ),
507	476	'type' => Controls_Manager::SLIDER,
508	477	'range' => [
509	478	'px' => [
510		- 'min' => 0,
511	479	'max' => 3,
512	480	'step' => 0.1,
513	481	],
514	482	],
		@@ -569,9 +537,8 @@
569	537	[
570	538	'label' => esc_html__( 'Caption', 'elementor' ),
571	539	'tab' => Controls_Manager::TAB_STYLE,
572	540	'condition' => [
573		- 'image[url]!' => '',
574	541	'caption_source!' => 'none',
575	542	],
576	543	]
577	544	);
		@@ -581,10 +548,10 @@
581	548	[
582	549	'label' => esc_html__( 'Alignment', 'elementor' ),
583	550	'type' => Controls_Manager::CHOOSE,
584	551	'options' => [
585		- 'start' => [
586		- 'title' => esc_html__( 'Start', 'elementor' ),
	552	+ 'left' => [
	553	+ 'title' => esc_html__( 'Left', 'elementor' ),
587	554	'icon' => 'eicon-text-align-left',
588	555	],
589	556	'center' => [
590	557	'title' => esc_html__( 'Center', 'elementor' ),
		@@ -589,10 +556,10 @@
589	556	'center' => [
590	557	'title' => esc_html__( 'Center', 'elementor' ),
591	558	'icon' => 'eicon-text-align-center',
592	559	],
593		- 'end' => [
594		- 'title' => esc_html__( 'End', 'elementor' ),
	560	+ 'right' => [
	561	+ 'title' => esc_html__( 'Right', 'elementor' ),
595	562	'icon' => 'eicon-text-align-right',
596	563	],
597	564	'justify' => [
598	565	'title' => esc_html__( 'Justified', 'elementor' ),
		@@ -598,13 +565,8 @@
598	565	'title' => esc_html__( 'Justified', 'elementor' ),
599	566	'icon' => 'eicon-text-align-justify',
600	567	],
601	568	],
602		- 'classes' => 'elementor-control-start-end',
603		- 'selectors_dictionary' => [
604		- 'left' => is_rtl() ? 'end' : 'start',
605		- 'right' => is_rtl() ? 'start' : 'end',
606		- ],
607	569	'default' => '',
608	570	'selectors' => [
609	571	'{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};',
610	572	],
		@@ -660,24 +622,16 @@
660	622	'caption_space',
661	623	[
662	624	'label' => esc_html__( 'Spacing', 'elementor' ),
663	625	'type' => Controls_Manager::SLIDER,
664		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
665	626	'range' => [
666	627	'px' => [
	628	+ 'min' => 0,
667	629	'max' => 100,
668	630	],
669		- 'em' => [
670		- 'min' => 0,
671		- 'max' => 10,
672		- ],
673		- 'rem' => [
674		- 'min' => 0,
675		- 'max' => 10,
676		- ],
677	631	],
678	632	'selectors' => [
679		- '{{WRAPPER}} .widget-image-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
	633	+ '{{WRAPPER}} .widget-image-caption' => 'margin-top: {{SIZE}}{{UNIT}};',
680	634	],
681	635	]
682	636	);
683	637
		@@ -702,9 +656,9 @@
702	656	* Get the caption for current widget.
703	657	*
704	658	* @access private
705	659	* @since 2.3.0
706		- * @param array $settings
	660	+ * @param $settings
707	661	*
708	662	* @return string
709	663	*/
710	664	private function get_caption( $settings ) {
		@@ -735,8 +689,12 @@
735	689	if ( empty( $settings['image']['url'] ) ) {
736	690	return;
737	691	}
738	692
	693	+ if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) {
	694	+ $this->add_render_attribute( 'wrapper', 'class', 'elementor-image' );
	695	+ }
	696	+
739	697	$has_caption = $this->has_caption( $settings );
740	698
741	699	$link = $this->get_link_url( $settings );
742	700
		@@ -752,8 +710,11 @@
752	710	if ( 'custom' !== $settings['link_to'] ) {
753	711	$this->add_lightbox_data_attributes( 'link', $settings['image']['id'], $settings['open_lightbox'] );
754	712	}
755	713	} ?>
	714	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	715	+ <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
	716	+ <?php } ?>
756	717	<?php if ( $has_caption ) : ?>
757	718	<figure class="wp-caption">
758	719	<?php endif; ?>
759	720	<?php if ( $link ) : ?>
		@@ -770,67 +731,14 @@
770	731	<?php endif; ?>
771	732	<?php if ( $has_caption ) : ?>
772	733	</figure>
773	734	<?php endif; ?>
	735	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	736	+ </div>
	737	+ <?php } ?>
774	738	<?php
775	739	}
776	740
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	741	/**
834	742	* Render image widget output in the editor.
835	743	*
836	744	* Written as a Backbone JavaScript template and used to generate the live preview.
		@@ -887,9 +795,9 @@
887	795
888	796	var link_url;
889	797
890	798	if ( 'custom' === settings.link_to ) {
891		- link_url = settings.link?.url;
	799	+ link_url = settings.link.url;
892	800	}
893	801
894	802	if ( 'file' === settings.link_to ) {
895	803	link_url = settings.image.url;
		@@ -894,8 +802,12 @@
894	802	if ( 'file' === settings.link_to ) {
895	803	link_url = settings.image.url;
896	804	}
897	805
	806	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	807	+ #><div class="elementor-image{{ settings.shape ? ' elementor-image-shape-' + settings.shape : '' }}"><#
	808	+ <?php } ?>
	809	+
898	810	var imgClass = '';
899	811
900	812	if ( '' !== settings.hover_animation ) {
901	813	imgClass = 'elementor-animation-' + settings.hover_animation;
		@@ -905,9 +817,9 @@
905	817	#><figure class="wp-caption"><#
906	818	}
907	819
908	820	if ( link_url ) {
909		- #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ elementor.helpers.sanitizeUrl( link_url ) }}"><#
	821	+ #><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ link_url }}"><#
910	822	}
911	823	#><img src="{{ image_url }}" class="{{ imgClass }}" /><#
912	824
913	825	if ( link_url ) {
		@@ -920,8 +832,13 @@
920	832
921	833	if ( hasCaption() ) {
922	834	#></figure><#
923	835	}
	836	+
	837	+ <?php if ( ! Plugin::$instance->experiments->is_feature_active( 'e_dom_optimization' ) ) { ?>
	838	+ #></div><#
	839	+ <?php } ?>
	840	+
924	841	} #>
925	842	<?php
926	843	}
927	844