elementor / includes / widgets / image.php

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

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