elementor / includes / widgets / image.php

image.php in Elementor Website Builder – more than just a page builder 3.28.0-dev2, at includes/widgets/image.php

890 lines 19.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor image widget.
13	*
14	* Elementor widget that displays an image into the page.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Image extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve image widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'image';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve image widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Image', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve image widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-image';
60	}
61
62	/**
63	* Get widget categories.
64	*
65	* Retrieve the list of categories the image widget belongs to.
66	*
67	* Used to determine where to display the widget in the editor.
68	*
69	* @since 2.0.0
70	* @access public
71	*
72	* @return array Widget categories.
73	*/
74	public function get_categories() {
75	return [ 'basic' ];
76	}
77
78	/**
79	* Get widget keywords.
80	*
81	* Retrieve the list of keywords the widget belongs to.
82	*
83	* @since 2.1.0
84	* @access public
85	*
86	* @return array Widget keywords.
87	*/
88	public function get_keywords() {
89	return [ 'image', 'photo', 'visual' ];
90	}
91
92	protected function is_dynamic_content(): bool {
93	return false;
94	}
95
96	/**
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	* Register image widget controls.
116	*
117	* Adds different input fields to allow the user to change and customize the widget settings.
118	*
119	* @since 3.1.0
120	* @access protected
121	*/
122	protected function register_controls() {
123	$this->start_controls_section(
124	'section_image',
125	[
126	'label' => esc_html__( 'Image', 'elementor' ),
127	]
128	);
129
130	$this->add_control(
131	'image',
132	[
133	'label' => esc_html__( 'Choose Image', 'elementor' ),
134	'type' => Controls_Manager::MEDIA,
135	'dynamic' => [
136	'active' => true,
137	],
138	'default' => [
139	'url' => Utils::get_placeholder_image_src(),
140	],
141	]
142	);
143
144	$this->add_group_control(
145	Group_Control_Image_Size::get_type(),
146	[
147	'name' => 'image', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `image_size` and `image_custom_dimension`.
148	'default' => 'large',
149	'condition' => [
150	'image[url]!' => '',
151	],
152	]
153	);
154
155	$this->add_control(
156	'caption_source',
157	[
158	'label' => esc_html__( 'Caption', 'elementor' ),
159	'type' => Controls_Manager::SELECT,
160	'options' => [
161	'none' => esc_html__( 'None', 'elementor' ),
162	'attachment' => esc_html__( 'Attachment Caption', 'elementor' ),
163	'custom' => esc_html__( 'Custom Caption', 'elementor' ),
164	],
165	'default' => 'none',
166	'condition' => [
167	'image[url]!' => '',
168	],
169	]
170	);
171
172	$this->add_control(
173	'caption',
174	[
175	'label' => esc_html__( 'Custom Caption', 'elementor' ),
176	'type' => Controls_Manager::TEXT,
177	'default' => '',
178	'placeholder' => esc_html__( 'Enter your image caption', 'elementor' ),
179	'condition' => [
180	'image[url]!' => '',
181	'caption_source' => 'custom',
182	],
183	'dynamic' => [
184	'active' => true,
185	],
186	]
187	);
188
189	$this->add_control(
190	'link_to',
191	[
192	'label' => esc_html__( 'Link', 'elementor' ),
193	'type' => Controls_Manager::SELECT,
194	'default' => 'none',
195	'options' => [
196	'none' => esc_html__( 'None', 'elementor' ),
197	'file' => esc_html__( 'Media File', 'elementor' ),
198	'custom' => esc_html__( 'Custom URL', 'elementor' ),
199	],
200	'condition' => [
201	'image[url]!' => '',
202	],
203	]
204	);
205
206	$this->add_control(
207	'link',
208	[
209	'label' => esc_html__( 'Link', 'elementor' ),
210	'type' => Controls_Manager::URL,
211	'dynamic' => [
212	'active' => true,
213	],
214	'condition' => [
215	'image[url]!' => '',
216	'link_to' => 'custom',
217	],
218	'show_label' => false,
219	]
220	);
221
222	$this->add_control(
223	'open_lightbox',
224	[
225	'label' => esc_html__( 'Lightbox', 'elementor' ),
226	'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	'default' => 'default',
234	'options' => [
235	'default' => esc_html__( 'Default', 'elementor' ),
236	'yes' => esc_html__( 'Yes', 'elementor' ),
237	'no' => esc_html__( 'No', 'elementor' ),
238	],
239	'condition' => [
240	'image[url]!' => '',
241	'link_to' => 'file',
242	],
243	]
244	);
245
246	$this->end_controls_section();
247
248	$this->start_controls_section(
249	'section_style_image',
250	[
251	'label' => esc_html__( 'Image', 'elementor' ),
252	'tab' => Controls_Manager::TAB_STYLE,
253	]
254	);
255
256	$this->add_responsive_control(
257	'align',
258	[
259	'label' => esc_html__( 'Alignment', 'elementor' ),
260	'type' => Controls_Manager::CHOOSE,
261	'options' => [
262	'left' => [
263	'title' => esc_html__( 'Left', 'elementor' ),
264	'icon' => 'eicon-text-align-left',
265	],
266	'center' => [
267	'title' => esc_html__( 'Center', 'elementor' ),
268	'icon' => 'eicon-text-align-center',
269	],
270	'right' => [
271	'title' => esc_html__( 'Right', 'elementor' ),
272	'icon' => 'eicon-text-align-right',
273	],
274	],
275	'selectors' => [
276	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
277	],
278	]
279	);
280
281	$this->add_responsive_control(
282	'width',
283	[
284	'label' => esc_html__( 'Width', 'elementor' ),
285	'type' => Controls_Manager::SLIDER,
286	'default' => [
287	'unit' => '%',
288	],
289	'tablet_default' => [
290	'unit' => '%',
291	],
292	'mobile_default' => [
293	'unit' => '%',
294	],
295	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
296	'range' => [
297	'%' => [
298	'min' => 1,
299	'max' => 100,
300	],
301	'px' => [
302	'min' => 1,
303	'max' => 1000,
304	],
305	'vw' => [
306	'min' => 1,
307	'max' => 100,
308	],
309	],
310	'selectors' => [
311	'{{WRAPPER}} img' => 'width: {{SIZE}}{{UNIT}};',
312	],
313	]
314	);
315
316	$this->add_responsive_control(
317	'space',
318	[
319	'label' => esc_html__( 'Max Width', 'elementor' ),
320	'type' => Controls_Manager::SLIDER,
321	'default' => [
322	'unit' => '%',
323	],
324	'tablet_default' => [
325	'unit' => '%',
326	],
327	'mobile_default' => [
328	'unit' => '%',
329	],
330	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
331	'range' => [
332	'%' => [
333	'min' => 1,
334	'max' => 100,
335	],
336	'px' => [
337	'min' => 1,
338	'max' => 1000,
339	],
340	'vw' => [
341	'min' => 1,
342	'max' => 100,
343	],
344	],
345	'selectors' => [
346	'{{WRAPPER}} img' => 'max-width: {{SIZE}}{{UNIT}};',
347	],
348	]
349	);
350
351	$this->add_responsive_control(
352	'height',
353	[
354	'label' => esc_html__( 'Height', 'elementor' ),
355	'type' => Controls_Manager::SLIDER,
356	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
357	'range' => [
358	'px' => [
359	'min' => 1,
360	'max' => 500,
361	],
362	'vh' => [
363	'min' => 1,
364	'max' => 100,
365	],
366	],
367	'selectors' => [
368	'{{WRAPPER}} img' => 'height: {{SIZE}}{{UNIT}};',
369	],
370	]
371	);
372
373	$this->add_responsive_control(
374	'object-fit',
375	[
376	'label' => esc_html__( 'Object Fit', 'elementor' ),
377	'type' => Controls_Manager::SELECT,
378	'condition' => [
379	'height[size]!' => '',
380	],
381	'options' => [
382	'' => esc_html__( 'Default', 'elementor' ),
383	'fill' => esc_html__( 'Fill', 'elementor' ),
384	'cover' => esc_html__( 'Cover', 'elementor' ),
385	'contain' => esc_html__( 'Contain', 'elementor' ),
386	'scale-down' => esc_html__( 'Scale Down', 'elementor' ),
387	],
388	'default' => '',
389	'selectors' => [
390	'{{WRAPPER}} img' => 'object-fit: {{VALUE}};',
391	],
392	]
393	);
394
395	$this->add_responsive_control(
396	'object-position',
397	[
398	'label' => esc_html__( 'Object Position', 'elementor' ),
399	'type' => Controls_Manager::SELECT,
400	'options' => [
401	'center center' => esc_html__( 'Center Center', 'elementor' ),
402	'center left' => esc_html__( 'Center Left', 'elementor' ),
403	'center right' => esc_html__( 'Center Right', 'elementor' ),
404	'top center' => esc_html__( 'Top Center', 'elementor' ),
405	'top left' => esc_html__( 'Top Left', 'elementor' ),
406	'top right' => esc_html__( 'Top Right', 'elementor' ),
407	'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
408	'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
409	'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
410	],
411	'default' => 'center center',
412	'selectors' => [
413	'{{WRAPPER}} img' => 'object-position: {{VALUE}};',
414	],
415	'condition' => [
416	'height[size]!' => '',
417	'object-fit' => [ 'cover', 'contain', 'scale-down' ],
418	],
419	]
420	);
421
422	$this->add_control(
423	'separator_panel_style',
424	[
425	'type' => Controls_Manager::DIVIDER,
426	'style' => 'thick',
427	]
428	);
429
430	$this->start_controls_tabs( 'image_effects' );
431
432	$this->start_controls_tab( 'normal',
433	[
434	'label' => esc_html__( 'Normal', 'elementor' ),
435	]
436	);
437
438	$this->add_control(
439	'opacity',
440	[
441	'label' => esc_html__( 'Opacity', 'elementor' ),
442	'type' => Controls_Manager::SLIDER,
443	'range' => [
444	'px' => [
445	'max' => 1,
446	'min' => 0.10,
447	'step' => 0.01,
448	],
449	],
450	'selectors' => [
451	'{{WRAPPER}} img' => 'opacity: {{SIZE}};',
452	],
453	]
454	);
455
456	$this->add_group_control(
457	Group_Control_Css_Filter::get_type(),
458	[
459	'name' => 'css_filters',
460	'selector' => '{{WRAPPER}} img',
461	]
462	);
463
464	$this->end_controls_tab();
465
466	$this->start_controls_tab( 'hover',
467	[
468	'label' => esc_html__( 'Hover', 'elementor' ),
469	]
470	);
471
472	$this->add_control(
473	'opacity_hover',
474	[
475	'label' => esc_html__( 'Opacity', 'elementor' ),
476	'type' => Controls_Manager::SLIDER,
477	'range' => [
478	'px' => [
479	'max' => 1,
480	'min' => 0.10,
481	'step' => 0.01,
482	],
483	],
484	'selectors' => [
485	'{{WRAPPER}}:hover img' => 'opacity: {{SIZE}};',
486	],
487	]
488	);
489
490	$this->add_group_control(
491	Group_Control_Css_Filter::get_type(),
492	[
493	'name' => 'css_filters_hover',
494	'selector' => '{{WRAPPER}}:hover img',
495	]
496	);
497
498	$this->add_control(
499	'background_hover_transition',
500	[
501	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
502	'type' => Controls_Manager::SLIDER,
503	'range' => [
504	'px' => [
505	'min' => 0,
506	'max' => 3,
507	'step' => 0.1,
508	],
509	],
510	'selectors' => [
511	'{{WRAPPER}} img' => 'transition-duration: {{SIZE}}s',
512	],
513	]
514	);
515
516	$this->add_control(
517	'hover_animation',
518	[
519	'label' => esc_html__( 'Hover Animation', 'elementor' ),
520	'type' => Controls_Manager::HOVER_ANIMATION,
521	]
522	);
523
524	$this->end_controls_tab();
525
526	$this->end_controls_tabs();
527
528	$this->add_group_control(
529	Group_Control_Border::get_type(),
530	[
531	'name' => 'image_border',
532	'selector' => '{{WRAPPER}} img',
533	'separator' => 'before',
534	]
535	);
536
537	$this->add_responsive_control(
538	'image_border_radius',
539	[
540	'label' => esc_html__( 'Border Radius', 'elementor' ),
541	'type' => Controls_Manager::DIMENSIONS,
542	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
543	'selectors' => [
544	'{{WRAPPER}} img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
545	],
546	]
547	);
548
549	$this->add_group_control(
550	Group_Control_Box_Shadow::get_type(),
551	[
552	'name' => 'image_box_shadow',
553	'exclude' => [
554	'box_shadow_position',
555	],
556	'selector' => '{{WRAPPER}} img',
557	]
558	);
559
560	$this->end_controls_section();
561
562	$this->start_controls_section(
563	'section_style_caption',
564	[
565	'label' => esc_html__( 'Caption', 'elementor' ),
566	'tab' => Controls_Manager::TAB_STYLE,
567	'condition' => [
568	'image[url]!' => '',
569	'caption_source!' => 'none',
570	],
571	]
572	);
573
574	$this->add_responsive_control(
575	'caption_align',
576	[
577	'label' => esc_html__( 'Alignment', 'elementor' ),
578	'type' => Controls_Manager::CHOOSE,
579	'options' => [
580	'left' => [
581	'title' => esc_html__( 'Left', 'elementor' ),
582	'icon' => 'eicon-text-align-left',
583	],
584	'center' => [
585	'title' => esc_html__( 'Center', 'elementor' ),
586	'icon' => 'eicon-text-align-center',
587	],
588	'right' => [
589	'title' => esc_html__( 'Right', 'elementor' ),
590	'icon' => 'eicon-text-align-right',
591	],
592	'justify' => [
593	'title' => esc_html__( 'Justified', 'elementor' ),
594	'icon' => 'eicon-text-align-justify',
595	],
596	],
597	'default' => '',
598	'selectors' => [
599	'{{WRAPPER}} .widget-image-caption' => 'text-align: {{VALUE}};',
600	],
601	]
602	);
603
604	$this->add_control(
605	'text_color',
606	[
607	'label' => esc_html__( 'Text Color', 'elementor' ),
608	'type' => Controls_Manager::COLOR,
609	'default' => '',
610	'selectors' => [
611	'{{WRAPPER}} .widget-image-caption' => 'color: {{VALUE}};',
612	],
613	'global' => [
614	'default' => Global_Colors::COLOR_TEXT,
615	],
616	]
617	);
618
619	$this->add_control(
620	'caption_background_color',
621	[
622	'label' => esc_html__( 'Background Color', 'elementor' ),
623	'type' => Controls_Manager::COLOR,
624	'selectors' => [
625	'{{WRAPPER}} .widget-image-caption' => 'background-color: {{VALUE}};',
626	],
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Typography::get_type(),
632	[
633	'name' => 'caption_typography',
634	'selector' => '{{WRAPPER}} .widget-image-caption',
635	'global' => [
636	'default' => Global_Typography::TYPOGRAPHY_TEXT,
637	],
638	]
639	);
640
641	$this->add_group_control(
642	Group_Control_Text_Shadow::get_type(),
643	[
644	'name' => 'caption_text_shadow',
645	'selector' => '{{WRAPPER}} .widget-image-caption',
646	]
647	);
648
649	$this->add_responsive_control(
650	'caption_space',
651	[
652	'label' => esc_html__( 'Spacing', 'elementor' ),
653	'type' => Controls_Manager::SLIDER,
654	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
655	'range' => [
656	'px' => [
657	'max' => 100,
658	],
659	'em' => [
660	'min' => 0,
661	'max' => 10,
662	],
663	'rem' => [
664	'min' => 0,
665	'max' => 10,
666	],
667	],
668	'selectors' => [
669	'{{WRAPPER}} .widget-image-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
670	],
671	]
672	);
673
674	$this->end_controls_section();
675	}
676
677	/**
678	* Check if the current widget has caption
679	*
680	* @access private
681	* @since 2.3.0
682	*
683	* @param array $settings
684	*
685	* @return boolean
686	*/
687	private function has_caption( $settings ) {
688	return ( ! empty( $settings['caption_source'] ) && 'none' !== $settings['caption_source'] );
689	}
690
691	/**
692	* Get the caption for current widget.
693	*
694	* @access private
695	* @since 2.3.0
696	* @param array $settings
697	*
698	* @return string
699	*/
700	private function get_caption( $settings ) {
701	$caption = '';
702	if ( ! empty( $settings['caption_source'] ) ) {
703	switch ( $settings['caption_source'] ) {
704	case 'attachment':
705	$caption = wp_get_attachment_caption( $settings['image']['id'] );
706	break;
707	case 'custom':
708	$caption = ! Utils::is_empty( $settings['caption'] ) ? $settings['caption'] : '';
709	}
710	}
711	return $caption;
712	}
713
714	/**
715	* Render image widget output on the frontend.
716	*
717	* Written in PHP and used to generate the final HTML.
718	*
719	* @since 1.0.0
720	* @access protected
721	*/
722	protected function render() {
723	$settings = $this->get_settings_for_display();
724
725	if ( empty( $settings['image']['url'] ) ) {
726	return;
727	}
728
729	$has_caption = $this->has_caption( $settings );
730
731	$link = $this->get_link_url( $settings );
732
733	if ( $link ) {
734	$this->add_link_attributes( 'link', $link );
735
736	if ( Plugin::$instance->editor->is_edit_mode() ) {
737	$this->add_render_attribute( 'link', [
738	'class' => 'elementor-clickable',
739	] );
740	}
741
742	if ( 'custom' !== $settings['link_to'] ) {
743	$this->add_lightbox_data_attributes( 'link', $settings['image']['id'], $settings['open_lightbox'] );
744	}
745	} ?>
746	<?php if ( $has_caption ) : ?>
747	<figure class="wp-caption">
748	<?php endif; ?>
749	<?php if ( $link ) : ?>
750	<a <?php $this->print_render_attribute_string( 'link' ); ?>>
751	<?php endif; ?>
752	<?php Group_Control_Image_Size::print_attachment_image_html( $settings ); ?>
753	<?php if ( $link ) : ?>
754	</a>
755	<?php endif; ?>
756	<?php if ( $has_caption ) : ?>
757	<figcaption class="widget-image-caption wp-caption-text"><?php
758	echo wp_kses_post( $this->get_caption( $settings ) );
759	?></figcaption>
760	<?php endif; ?>
761	<?php if ( $has_caption ) : ?>
762	</figure>
763	<?php endif; ?>
764	<?php
765	}
766
767	/**
768	* Render image widget output in the editor.
769	*
770	* Written as a Backbone JavaScript template and used to generate the live preview.
771	*
772	* @since 2.9.0
773	* @access protected
774	*/
775	protected function content_template() {
776	?>
777	<# if ( settings.image.url ) {
778	var image = {
779	id: settings.image.id,
780	url: settings.image.url,
781	size: settings.image_size,
782	dimension: settings.image_custom_dimension,
783	model: view.getEditModel()
784	};
785
786	var image_url = elementor.imagesManager.getImageUrl( image );
787
788	if ( ! image_url ) {
789	return;
790	}
791
792	var hasCaption = function() {
793	if( ! settings.caption_source \|\| 'none' === settings.caption_source ) {
794	return false;
795	}
796	return true;
797	}
798
799	var ensureAttachmentData = function( id ) {
800	if ( 'undefined' === typeof wp.media.attachment( id ).get( 'caption' ) ) {
801	wp.media.attachment( id ).fetch().then( function( data ) {
802	view.render();
803	} );
804	}
805	}
806
807	var getAttachmentCaption = function( id ) {
808	if ( ! id ) {
809	return '';
810	}
811	ensureAttachmentData( id );
812	return wp.media.attachment( id ).get( 'caption' );
813	}
814
815	var getCaption = function() {
816	if ( ! hasCaption() ) {
817	return '';
818	}
819	return 'custom' === settings.caption_source ? settings.caption : getAttachmentCaption( settings.image.id );
820	}
821
822	var link_url;
823
824	if ( 'custom' === settings.link_to ) {
825	link_url = settings.link.url;
826	}
827
828	if ( 'file' === settings.link_to ) {
829	link_url = settings.image.url;
830	}
831
832	var imgClass = '';
833
834	if ( '' !== settings.hover_animation ) {
835	imgClass = 'elementor-animation-' + settings.hover_animation;
836	}
837
838	if ( hasCaption() ) {
839	#><figure class="wp-caption"><#
840	}
841
842	if ( link_url ) {
843	#><a class="elementor-clickable" data-elementor-open-lightbox="{{ settings.open_lightbox }}" href="{{ elementor.helpers.sanitizeUrl( link_url ) }}"><#
844	}
845	#><img src="{{ image_url }}" class="{{ imgClass }}" /><#
846
847	if ( link_url ) {
848	#></a><#
849	}
850
851	if ( hasCaption() ) {
852	#><figcaption class="widget-image-caption wp-caption-text">{{{ getCaption() }}}</figcaption><#
853	}
854
855	if ( hasCaption() ) {
856	#></figure><#
857	}
858	} #>
859	<?php
860	}
861
862	/**
863	* Retrieve image widget link URL.
864	*
865	* @since 3.11.0
866	* @access protected
867	*
868	* @param array $settings
869	*
870	* @return array\|string\|false An array/string containing the link URL, or false if no link.
871	*/
872	protected function get_link_url( $settings ) {
873	if ( 'none' === $settings['link_to'] ) {
874	return false;
875	}
876
877	if ( 'custom' === $settings['link_to'] ) {
878	if ( empty( $settings['link']['url'] ) ) {
879	return false;
880	}
881
882	return $settings['link'];
883	}
884
885	return [
886	'url' => $settings['image']['url'],
887	];
888	}
889	}
890