elementor / includes / widgets / image.php

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

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