elementor / includes / widgets / image-carousel.php

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

852 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
10	/**
11	* Elementor image carousel widget.
12	*
13	* Elementor widget that displays a set of images in a rotating carousel or
14	* slider.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Image_Carousel extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve image carousel 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-carousel';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve image carousel 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 __( 'Image Carousel', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve image carousel 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-slider-push';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'image', 'photo', 'visual', 'carousel', 'slider' ];
74	}
75
76	/**
77	* Register image carousel widget controls.
78	*
79	* Adds different input fields to allow the user to change and customize the widget settings.
80	*
81	* @since 3.1.0
82	* @access protected
83	*/
84	protected function register_controls() {
85	$this->start_controls_section(
86	'section_image_carousel',
87	[
88	'label' => __( 'Image Carousel', 'elementor' ),
89	]
90	);
91
92	$this->add_control(
93	'carousel',
94	[
95	'label' => __( 'Add Images', 'elementor' ),
96	'type' => Controls_Manager::GALLERY,
97	'default' => [],
98	'show_label' => false,
99	'dynamic' => [
100	'active' => true,
101	],
102	]
103	);
104
105	$this->add_group_control(
106	Group_Control_Image_Size::get_type(),
107	[
108	'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
109	'separator' => 'none',
110	]
111	);
112
113	$slides_to_show = range( 1, 10 );
114	$slides_to_show = array_combine( $slides_to_show, $slides_to_show );
115
116	$this->add_responsive_control(
117	'slides_to_show',
118	[
119	'label' => __( 'Slides to Show', 'elementor' ),
120	'type' => Controls_Manager::SELECT,
121	'options' => [
122	'' => __( 'Default', 'elementor' ),
123	] + $slides_to_show,
124	'frontend_available' => true,
125	]
126	);
127
128	$this->add_responsive_control(
129	'slides_to_scroll',
130	[
131	'label' => __( 'Slides to Scroll', 'elementor' ),
132	'type' => Controls_Manager::SELECT,
133	'description' => __( 'Set how many slides are scrolled per swipe.', 'elementor' ),
134	'options' => [
135	'' => __( 'Default', 'elementor' ),
136	] + $slides_to_show,
137	'condition' => [
138	'slides_to_show!' => '1',
139	],
140	'frontend_available' => true,
141	]
142	);
143
144	$this->add_control(
145	'image_stretch',
146	[
147	'label' => __( 'Image Stretch', 'elementor' ),
148	'type' => Controls_Manager::SELECT,
149	'default' => 'no',
150	'options' => [
151	'no' => __( 'No', 'elementor' ),
152	'yes' => __( 'Yes', 'elementor' ),
153	],
154	]
155	);
156
157	$this->add_control(
158	'navigation',
159	[
160	'label' => __( 'Navigation', 'elementor' ),
161	'type' => Controls_Manager::SELECT,
162	'default' => 'both',
163	'options' => [
164	'both' => __( 'Arrows and Dots', 'elementor' ),
165	'arrows' => __( 'Arrows', 'elementor' ),
166	'dots' => __( 'Dots', 'elementor' ),
167	'none' => __( 'None', 'elementor' ),
168	],
169	'frontend_available' => true,
170	]
171	);
172
173	$this->add_control(
174	'link_to',
175	[
176	'label' => __( 'Link', 'elementor' ),
177	'type' => Controls_Manager::SELECT,
178	'default' => 'none',
179	'options' => [
180	'none' => __( 'None', 'elementor' ),
181	'file' => __( 'Media File', 'elementor' ),
182	'custom' => __( 'Custom URL', 'elementor' ),
183	],
184	]
185	);
186
187	$this->add_control(
188	'link',
189	[
190	'label' => __( 'Link', 'elementor' ),
191	'type' => Controls_Manager::URL,
192	'placeholder' => __( 'https://your-link.com', 'elementor' ),
193	'condition' => [
194	'link_to' => 'custom',
195	],
196	'show_label' => false,
197	]
198	);
199
200	$this->add_control(
201	'open_lightbox',
202	[
203	'label' => __( 'Lightbox', 'elementor' ),
204	'type' => Controls_Manager::SELECT,
205	'default' => 'default',
206	'options' => [
207	'default' => __( 'Default', 'elementor' ),
208	'yes' => __( 'Yes', 'elementor' ),
209	'no' => __( 'No', 'elementor' ),
210	],
211	'condition' => [
212	'link_to' => 'file',
213	],
214	]
215	);
216
217	$this->add_control(
218	'caption_type',
219	[
220	'label' => __( 'Caption', 'elementor' ),
221	'type' => Controls_Manager::SELECT,
222	'default' => '',
223	'options' => [
224	'' => __( 'None', 'elementor' ),
225	'title' => __( 'Title', 'elementor' ),
226	'caption' => __( 'Caption', 'elementor' ),
227	'description' => __( 'Description', 'elementor' ),
228	],
229	]
230	);
231
232	$this->add_control(
233	'view',
234	[
235	'label' => __( 'View', 'elementor' ),
236	'type' => Controls_Manager::HIDDEN,
237	'default' => 'traditional',
238	]
239	);
240
241	$this->end_controls_section();
242
243	$this->start_controls_section(
244	'section_additional_options',
245	[
246	'label' => __( 'Additional Options', 'elementor' ),
247	]
248	);
249
250	$this->add_control(
251	'autoplay',
252	[
253	'label' => __( 'Autoplay', 'elementor' ),
254	'type' => Controls_Manager::SELECT,
255	'default' => 'yes',
256	'options' => [
257	'yes' => __( 'Yes', 'elementor' ),
258	'no' => __( 'No', 'elementor' ),
259	],
260	'frontend_available' => true,
261	]
262	);
263
264	$this->add_control(
265	'pause_on_hover',
266	[
267	'label' => __( 'Pause on Hover', 'elementor' ),
268	'type' => Controls_Manager::SELECT,
269	'default' => 'yes',
270	'options' => [
271	'yes' => __( 'Yes', 'elementor' ),
272	'no' => __( 'No', 'elementor' ),
273	],
274	'condition' => [
275	'autoplay' => 'yes',
276	],
277	'render_type' => 'none',
278	'frontend_available' => true,
279	]
280	);
281
282	$this->add_control(
283	'pause_on_interaction',
284	[
285	'label' => __( 'Pause on Interaction', 'elementor' ),
286	'type' => Controls_Manager::SELECT,
287	'default' => 'yes',
288	'options' => [
289	'yes' => __( 'Yes', 'elementor' ),
290	'no' => __( 'No', 'elementor' ),
291	],
292	'condition' => [
293	'autoplay' => 'yes',
294	],
295	'frontend_available' => true,
296	]
297	);
298
299	$this->add_control(
300	'autoplay_speed',
301	[
302	'label' => __( 'Autoplay Speed', 'elementor' ),
303	'type' => Controls_Manager::NUMBER,
304	'default' => 5000,
305	'condition' => [
306	'autoplay' => 'yes',
307	],
308	'render_type' => 'none',
309	'frontend_available' => true,
310	]
311	);
312
313	// Loop requires a re-render so no 'render_type = none'
314	$this->add_control(
315	'infinite',
316	[
317	'label' => __( 'Infinite Loop', 'elementor' ),
318	'type' => Controls_Manager::SELECT,
319	'default' => 'yes',
320	'options' => [
321	'yes' => __( 'Yes', 'elementor' ),
322	'no' => __( 'No', 'elementor' ),
323	],
324	'frontend_available' => true,
325	]
326	);
327
328	$this->add_control(
329	'effect',
330	[
331	'label' => __( 'Effect', 'elementor' ),
332	'type' => Controls_Manager::SELECT,
333	'default' => 'slide',
334	'options' => [
335	'slide' => __( 'Slide', 'elementor' ),
336	'fade' => __( 'Fade', 'elementor' ),
337	],
338	'condition' => [
339	'slides_to_show' => '1',
340	],
341	'frontend_available' => true,
342	]
343	);
344
345	$this->add_control(
346	'speed',
347	[
348	'label' => __( 'Animation Speed', 'elementor' ),
349	'type' => Controls_Manager::NUMBER,
350	'default' => 500,
351	'render_type' => 'none',
352	'frontend_available' => true,
353	]
354	);
355
356	$this->add_control(
357	'direction',
358	[
359	'label' => __( 'Direction', 'elementor' ),
360	'type' => Controls_Manager::SELECT,
361	'default' => 'ltr',
362	'options' => [
363	'ltr' => __( 'Left', 'elementor' ),
364	'rtl' => __( 'Right', 'elementor' ),
365	],
366	]
367	);
368
369	$this->end_controls_section();
370
371	$this->start_controls_section(
372	'section_style_navigation',
373	[
374	'label' => __( 'Navigation', 'elementor' ),
375	'tab' => Controls_Manager::TAB_STYLE,
376	'condition' => [
377	'navigation' => [ 'arrows', 'dots', 'both' ],
378	],
379	]
380	);
381
382	$this->add_control(
383	'heading_style_arrows',
384	[
385	'label' => __( 'Arrows', 'elementor' ),
386	'type' => Controls_Manager::HEADING,
387	'separator' => 'before',
388	'condition' => [
389	'navigation' => [ 'arrows', 'both' ],
390	],
391	]
392	);
393
394	$this->add_control(
395	'arrows_position',
396	[
397	'label' => __( 'Position', 'elementor' ),
398	'type' => Controls_Manager::SELECT,
399	'default' => 'inside',
400	'options' => [
401	'inside' => __( 'Inside', 'elementor' ),
402	'outside' => __( 'Outside', 'elementor' ),
403	],
404	'prefix_class' => 'elementor-arrows-position-',
405	'condition' => [
406	'navigation' => [ 'arrows', 'both' ],
407	],
408	]
409	);
410
411	$this->add_control(
412	'arrows_size',
413	[
414	'label' => __( 'Size', 'elementor' ),
415	'type' => Controls_Manager::SLIDER,
416	'range' => [
417	'px' => [
418	'min' => 20,
419	'max' => 60,
420	],
421	],
422	'selectors' => [
423	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
424	],
425	'condition' => [
426	'navigation' => [ 'arrows', 'both' ],
427	],
428	]
429	);
430
431	$this->add_control(
432	'arrows_color',
433	[
434	'label' => __( 'Color', 'elementor' ),
435	'type' => Controls_Manager::COLOR,
436	'selectors' => [
437	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'color: {{VALUE}};',
438	],
439	'condition' => [
440	'navigation' => [ 'arrows', 'both' ],
441	],
442	]
443	);
444
445	$this->add_control(
446	'heading_style_dots',
447	[
448	'label' => __( 'Dots', 'elementor' ),
449	'type' => Controls_Manager::HEADING,
450	'separator' => 'before',
451	'condition' => [
452	'navigation' => [ 'dots', 'both' ],
453	],
454	]
455	);
456
457	$this->add_control(
458	'dots_position',
459	[
460	'label' => __( 'Position', 'elementor' ),
461	'type' => Controls_Manager::SELECT,
462	'default' => 'outside',
463	'options' => [
464	'outside' => __( 'Outside', 'elementor' ),
465	'inside' => __( 'Inside', 'elementor' ),
466	],
467	'prefix_class' => 'elementor-pagination-position-',
468	'condition' => [
469	'navigation' => [ 'dots', 'both' ],
470	],
471	]
472	);
473
474	$this->add_control(
475	'dots_size',
476	[
477	'label' => __( 'Size', 'elementor' ),
478	'type' => Controls_Manager::SLIDER,
479	'range' => [
480	'px' => [
481	'min' => 5,
482	'max' => 10,
483	],
484	],
485	'selectors' => [
486	'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
487	],
488	'condition' => [
489	'navigation' => [ 'dots', 'both' ],
490	],
491	]
492	);
493
494	$this->add_control(
495	'dots_color',
496	[
497	'label' => __( 'Color', 'elementor' ),
498	'type' => Controls_Manager::COLOR,
499	'selectors' => [
500	'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
501	],
502	'condition' => [
503	'navigation' => [ 'dots', 'both' ],
504	],
505	]
506	);
507
508	$this->end_controls_section();
509
510	$this->start_controls_section(
511	'section_style_image',
512	[
513	'label' => __( 'Image', 'elementor' ),
514	'tab' => Controls_Manager::TAB_STYLE,
515	]
516	);
517
518	$this->add_responsive_control(
519	'gallery_vertical_align',
520	[
521	'label' => __( 'Vertical Align', 'elementor' ),
522	'type' => Controls_Manager::CHOOSE,
523	'options' => [
524	'flex-start' => [
525	'title' => __( 'Start', 'elementor' ),
526	'icon' => 'eicon-v-align-top',
527	],
528	'center' => [
529	'title' => __( 'Center', 'elementor' ),
530	'icon' => 'eicon-v-align-middle',
531	],
532	'flex-end' => [
533	'title' => __( 'End', 'elementor' ),
534	'icon' => 'eicon-v-align-bottom',
535	],
536	],
537	'condition' => [
538	'slides_to_show!' => '1',
539	],
540	'selectors' => [
541	'{{WRAPPER}} .swiper-wrapper' => 'display: flex; align-items: {{VALUE}};',
542	],
543	]
544	);
545
546	$this->add_control(
547	'image_spacing',
548	[
549	'label' => __( 'Spacing', 'elementor' ),
550	'type' => Controls_Manager::SELECT,
551	'options' => [
552	'' => __( 'Default', 'elementor' ),
553	'custom' => __( 'Custom', 'elementor' ),
554	],
555	'default' => '',
556	'condition' => [
557	'slides_to_show!' => '1',
558	],
559	]
560	);
561
562	$this->add_control(
563	'image_spacing_custom',
564	[
565	'label' => __( 'Image Spacing', 'elementor' ),
566	'type' => Controls_Manager::SLIDER,
567	'range' => [
568	'px' => [
569	'max' => 100,
570	],
571	],
572	'default' => [
573	'size' => 20,
574	],
575	'show_label' => false,
576	'condition' => [
577	'image_spacing' => 'custom',
578	'slides_to_show!' => '1',
579	],
580	'frontend_available' => true,
581	'render_type' => 'none',
582	'separator' => 'after',
583	]
584	);
585
586	$this->add_group_control(
587	Group_Control_Border::get_type(),
588	[
589	'name' => 'image_border',
590	'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
591	]
592	);
593
594	$this->add_control(
595	'image_border_radius',
596	[
597	'label' => __( 'Border Radius', 'elementor' ),
598	'type' => Controls_Manager::DIMENSIONS,
599	'size_units' => [ 'px', '%' ],
600	'selectors' => [
601	'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
602	],
603	]
604	);
605
606	$this->end_controls_section();
607
608	$this->start_controls_section(
609	'section_caption',
610	[
611	'label' => __( 'Caption', 'elementor' ),
612	'tab' => Controls_Manager::TAB_STYLE,
613	'condition' => [
614	'caption_type!' => '',
615	],
616	]
617	);
618
619	$this->add_control(
620	'caption_align',
621	[
622	'label' => __( 'Alignment', 'elementor' ),
623	'type' => Controls_Manager::CHOOSE,
624	'options' => [
625	'left' => [
626	'title' => __( 'Left', 'elementor' ),
627	'icon' => 'eicon-text-align-left',
628	],
629	'center' => [
630	'title' => __( 'Center', 'elementor' ),
631	'icon' => 'eicon-text-align-center',
632	],
633	'right' => [
634	'title' => __( 'Right', 'elementor' ),
635	'icon' => 'eicon-text-align-right',
636	],
637	'justify' => [
638	'title' => __( 'Justified', 'elementor' ),
639	'icon' => 'eicon-text-align-justify',
640	],
641	],
642	'default' => 'center',
643	'selectors' => [
644	'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
645	],
646	]
647	);
648
649	$this->add_control(
650	'caption_text_color',
651	[
652	'label' => __( 'Text Color', 'elementor' ),
653	'type' => Controls_Manager::COLOR,
654	'default' => '',
655	'selectors' => [
656	'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
657	],
658	]
659	);
660
661	$this->add_group_control(
662	Group_Control_Typography::get_type(),
663	[
664	'name' => 'caption_typography',
665	'global' => [
666	'default' => Global_Colors::COLOR_ACCENT,
667	],
668	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
669	]
670	);
671
672	$this->add_group_control(
673	Group_Control_Text_Shadow::get_type(),
674	[
675	'name' => 'caption_shadow',
676	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
677	]
678	);
679
680	$this->end_controls_section();
681
682	}
683
684	/**
685	* Render image carousel widget output on the frontend.
686	*
687	* Written in PHP and used to generate the final HTML.
688	*
689	* @since 1.0.0
690	* @access protected
691	*/
692	protected function render() {
693	$settings = $this->get_settings_for_display();
694
695	if ( empty( $settings['carousel'] ) ) {
696	return;
697	}
698
699	$slides = [];
700
701	foreach ( $settings['carousel'] as $index => $attachment ) {
702	$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
703
704	$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
705
706	$link_tag = '';
707
708	$link = $this->get_link_url( $attachment, $settings );
709
710	if ( $link ) {
711	$link_key = 'link_' . $index;
712
713	$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
714
715	if ( Plugin::$instance->editor->is_edit_mode() ) {
716	$this->add_render_attribute( $link_key, [
717	'class' => 'elementor-clickable',
718	] );
719	}
720
721	$this->add_link_attributes( $link_key, $link );
722
723	$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
724	}
725
726	$image_caption = $this->get_image_caption( $attachment );
727
728	$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
729
730	if ( ! empty( $image_caption ) ) {
731	$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . $image_caption . '</figcaption>';
732	}
733
734	$slide_html .= '</figure>';
735
736	if ( $link ) {
737	$slide_html .= '</a>';
738	}
739
740	$slide_html .= '</div>';
741
742	$slides[] = $slide_html;
743
744	}
745
746	if ( empty( $slides ) ) {
747	return;
748	}
749
750	$this->add_render_attribute( [
751	'carousel' => [
752	'class' => 'elementor-image-carousel swiper-wrapper',
753	],
754	'carousel-wrapper' => [
755	'class' => 'elementor-image-carousel-wrapper swiper-container',
756	'dir' => $settings['direction'],
757	],
758	] );
759
760	$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
761	$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
762
763	if ( 'yes' === $settings['image_stretch'] ) {
764	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
765	}
766
767	$slides_count = count( $settings['carousel'] );
768
769	?>
770	<div <?php echo $this->get_render_attribute_string( 'carousel-wrapper' ); ?>>
771	<div <?php echo $this->get_render_attribute_string( 'carousel' ); ?>>
772	<?php echo implode( '', $slides ); ?>
773	</div>
774	<?php if ( 1 < $slides_count ) : ?>
775	<?php if ( $show_dots ) : ?>
776	<div class="swiper-pagination"></div>
777	<?php endif; ?>
778	<?php if ( $show_arrows ) : ?>
779	<div class="elementor-swiper-button elementor-swiper-button-prev">
780	<i class="eicon-chevron-left" aria-hidden="true"></i>
781	<span class="elementor-screen-only"><?php _e( 'Previous', 'elementor' ); ?></span>
782	</div>
783	<div class="elementor-swiper-button elementor-swiper-button-next">
784	<i class="eicon-chevron-right" aria-hidden="true"></i>
785	<span class="elementor-screen-only"><?php _e( 'Next', 'elementor' ); ?></span>
786	</div>
787	<?php endif; ?>
788	<?php endif; ?>
789	</div>
790	<?php
791	}
792
793	/**
794	* Retrieve image carousel link URL.
795	*
796	* @since 1.0.0
797	* @access private
798	*
799	* @param array $attachment
800	* @param object $instance
801	*
802	* @return array\|string\|false An array/string containing the attachment URL, or false if no link.
803	*/
804	private function get_link_url( $attachment, $instance ) {
805	if ( 'none' === $instance['link_to'] ) {
806	return false;
807	}
808
809	if ( 'custom' === $instance['link_to'] ) {
810	if ( empty( $instance['link']['url'] ) ) {
811	return false;
812	}
813
814	return $instance['link'];
815	}
816
817	return [
818	'url' => wp_get_attachment_url( $attachment['id'] ),
819	];
820	}
821
822	/**
823	* Retrieve image carousel caption.
824	*
825	* @since 1.2.0
826	* @access private
827	*
828	* @param array $attachment
829	*
830	* @return string The caption of the image.
831	*/
832	private function get_image_caption( $attachment ) {
833	$caption_type = $this->get_settings_for_display( 'caption_type' );
834
835	if ( empty( $caption_type ) ) {
836	return '';
837	}
838
839	$attachment_post = get_post( $attachment['id'] );
840
841	if ( 'caption' === $caption_type ) {
842	return $attachment_post->post_excerpt;
843	}
844
845	if ( 'title' === $caption_type ) {
846	return $attachment_post->post_title;
847	}
848
849	return $attachment_post->post_content;
850	}
851	}
852