elementor / includes / widgets / image.php

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

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