elementor / includes / widgets / image-carousel.php

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

846 lines 19.2 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 1.0.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	'render_type' => 'none',
261	'frontend_available' => true,
262	]
263	);
264
265	$this->add_control(
266	'pause_on_hover',
267	[
268	'label' => __( 'Pause on Hover', 'elementor' ),
269	'type' => Controls_Manager::SELECT,
270	'default' => 'yes',
271	'options' => [
272	'yes' => __( 'Yes', 'elementor' ),
273	'no' => __( 'No', 'elementor' ),
274	],
275	'condition' => [
276	'autoplay' => 'yes',
277	],
278	'render_type' => 'none',
279	'frontend_available' => true,
280	]
281	);
282
283	$this->add_control(
284	'pause_on_interaction',
285	[
286	'label' => __( 'Pause on Interaction', 'elementor' ),
287	'type' => Controls_Manager::SELECT,
288	'default' => 'yes',
289	'options' => [
290	'yes' => __( 'Yes', 'elementor' ),
291	'no' => __( 'No', 'elementor' ),
292	],
293	'condition' => [
294	'autoplay' => 'yes',
295	],
296	'render_type' => 'none',
297	'frontend_available' => true,
298	]
299	);
300
301	$this->add_control(
302	'autoplay_speed',
303	[
304	'label' => __( 'Autoplay Speed', 'elementor' ),
305	'type' => Controls_Manager::NUMBER,
306	'default' => 5000,
307	'condition' => [
308	'autoplay' => 'yes',
309	],
310	'render_type' => 'none',
311	'frontend_available' => true,
312	]
313	);
314
315	// Loop requires a re-render so no 'render_type = none'
316	$this->add_control(
317	'infinite',
318	[
319	'label' => __( 'Infinite Loop', 'elementor' ),
320	'type' => Controls_Manager::SELECT,
321	'default' => 'yes',
322	'options' => [
323	'yes' => __( 'Yes', 'elementor' ),
324	'no' => __( 'No', 'elementor' ),
325	],
326	'frontend_available' => true,
327	]
328	);
329
330	$this->add_control(
331	'effect',
332	[
333	'label' => __( 'Effect', 'elementor' ),
334	'type' => Controls_Manager::SELECT,
335	'default' => 'slide',
336	'options' => [
337	'slide' => __( 'Slide', 'elementor' ),
338	'fade' => __( 'Fade', 'elementor' ),
339	],
340	'condition' => [
341	'slides_to_show' => '1',
342	],
343	'frontend_available' => true,
344	]
345	);
346
347	$this->add_control(
348	'speed',
349	[
350	'label' => __( 'Animation Speed', 'elementor' ),
351	'type' => Controls_Manager::NUMBER,
352	'default' => 500,
353	'render_type' => 'none',
354	'frontend_available' => true,
355	]
356	);
357
358	$this->add_control(
359	'direction',
360	[
361	'label' => __( 'Direction', 'elementor' ),
362	'type' => Controls_Manager::SELECT,
363	'default' => 'ltr',
364	'options' => [
365	'ltr' => __( 'Left', 'elementor' ),
366	'rtl' => __( 'Right', 'elementor' ),
367	],
368	]
369	);
370
371	$this->end_controls_section();
372
373	$this->start_controls_section(
374	'section_style_navigation',
375	[
376	'label' => __( 'Navigation', 'elementor' ),
377	'tab' => Controls_Manager::TAB_STYLE,
378	'condition' => [
379	'navigation' => [ 'arrows', 'dots', 'both' ],
380	],
381	]
382	);
383
384	$this->add_control(
385	'heading_style_arrows',
386	[
387	'label' => __( 'Arrows', 'elementor' ),
388	'type' => Controls_Manager::HEADING,
389	'separator' => 'before',
390	'condition' => [
391	'navigation' => [ 'arrows', 'both' ],
392	],
393	]
394	);
395
396	$this->add_control(
397	'arrows_position',
398	[
399	'label' => __( 'Position', 'elementor' ),
400	'type' => Controls_Manager::SELECT,
401	'default' => 'inside',
402	'options' => [
403	'inside' => __( 'Inside', 'elementor' ),
404	'outside' => __( 'Outside', 'elementor' ),
405	],
406	'prefix_class' => 'elementor-arrows-position-',
407	'condition' => [
408	'navigation' => [ 'arrows', 'both' ],
409	],
410	]
411	);
412
413	$this->add_control(
414	'arrows_size',
415	[
416	'label' => __( 'Size', 'elementor' ),
417	'type' => Controls_Manager::SLIDER,
418	'range' => [
419	'px' => [
420	'min' => 20,
421	'max' => 60,
422	],
423	],
424	'selectors' => [
425	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
426	],
427	'condition' => [
428	'navigation' => [ 'arrows', 'both' ],
429	],
430	]
431	);
432
433	$this->add_control(
434	'arrows_color',
435	[
436	'label' => __( 'Color', 'elementor' ),
437	'type' => Controls_Manager::COLOR,
438	'selectors' => [
439	'{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'color: {{VALUE}};',
440	],
441	'condition' => [
442	'navigation' => [ 'arrows', 'both' ],
443	],
444	]
445	);
446
447	$this->add_control(
448	'heading_style_dots',
449	[
450	'label' => __( 'Dots', 'elementor' ),
451	'type' => Controls_Manager::HEADING,
452	'separator' => 'before',
453	'condition' => [
454	'navigation' => [ 'dots', 'both' ],
455	],
456	]
457	);
458
459	$this->add_control(
460	'dots_position',
461	[
462	'label' => __( 'Position', 'elementor' ),
463	'type' => Controls_Manager::SELECT,
464	'default' => 'outside',
465	'options' => [
466	'outside' => __( 'Outside', 'elementor' ),
467	'inside' => __( 'Inside', 'elementor' ),
468	],
469	'prefix_class' => 'elementor-pagination-position-',
470	'condition' => [
471	'navigation' => [ 'dots', 'both' ],
472	],
473	]
474	);
475
476	$this->add_control(
477	'dots_size',
478	[
479	'label' => __( 'Size', 'elementor' ),
480	'type' => Controls_Manager::SLIDER,
481	'range' => [
482	'px' => [
483	'min' => 5,
484	'max' => 10,
485	],
486	],
487	'selectors' => [
488	'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
489	],
490	'condition' => [
491	'navigation' => [ 'dots', 'both' ],
492	],
493	]
494	);
495
496	$this->add_control(
497	'dots_color',
498	[
499	'label' => __( 'Color', 'elementor' ),
500	'type' => Controls_Manager::COLOR,
501	'selectors' => [
502	'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
503	],
504	'condition' => [
505	'navigation' => [ 'dots', 'both' ],
506	],
507	]
508	);
509
510	$this->end_controls_section();
511
512	$this->start_controls_section(
513	'section_style_image',
514	[
515	'label' => __( 'Image', 'elementor' ),
516	'tab' => Controls_Manager::TAB_STYLE,
517	]
518	);
519
520	$this->add_responsive_control(
521	'gallery_vertical_align',
522	[
523	'label' => __( 'Vertical Align', 'elementor' ),
524	'type' => Controls_Manager::CHOOSE,
525	'options' => [
526	'flex-start' => [
527	'title' => __( 'Start', 'elementor' ),
528	'icon' => 'eicon-v-align-top',
529	],
530	'center' => [
531	'title' => __( 'Center', 'elementor' ),
532	'icon' => 'eicon-v-align-middle',
533	],
534	'flex-end' => [
535	'title' => __( 'End', 'elementor' ),
536	'icon' => 'eicon-v-align-bottom',
537	],
538	],
539	'condition' => [
540	'slides_to_show!' => '1',
541	],
542	'selectors' => [
543	'{{WRAPPER}} .swiper-wrapper' => 'display: flex; align-items: {{VALUE}};',
544	],
545	]
546	);
547
548	$this->add_control(
549	'image_spacing',
550	[
551	'label' => __( 'Spacing', 'elementor' ),
552	'type' => Controls_Manager::SELECT,
553	'options' => [
554	'' => __( 'Default', 'elementor' ),
555	'custom' => __( 'Custom', 'elementor' ),
556	],
557	'default' => '',
558	'condition' => [
559	'slides_to_show!' => '1',
560	],
561	]
562	);
563
564	$this->add_control(
565	'image_spacing_custom',
566	[
567	'label' => __( 'Image Spacing', 'elementor' ),
568	'type' => Controls_Manager::SLIDER,
569	'range' => [
570	'px' => [
571	'max' => 100,
572	],
573	],
574	'default' => [
575	'size' => 20,
576	],
577	'show_label' => false,
578	'condition' => [
579	'image_spacing' => 'custom',
580	'slides_to_show!' => '1',
581	],
582	'frontend_available' => true,
583	'render_type' => 'none',
584	'separator' => 'after',
585	]
586	);
587
588	$this->add_group_control(
589	Group_Control_Border::get_type(),
590	[
591	'name' => 'image_border',
592	'selector' => '{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image',
593	]
594	);
595
596	$this->add_control(
597	'image_border_radius',
598	[
599	'label' => __( 'Border Radius', 'elementor' ),
600	'type' => Controls_Manager::DIMENSIONS,
601	'size_units' => [ 'px', '%' ],
602	'selectors' => [
603	'{{WRAPPER}} .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
604	],
605	]
606	);
607
608	$this->end_controls_section();
609
610	$this->start_controls_section(
611	'section_caption',
612	[
613	'label' => __( 'Caption', 'elementor' ),
614	'tab' => Controls_Manager::TAB_STYLE,
615	'condition' => [
616	'caption_type!' => '',
617	],
618	]
619	);
620
621	$this->add_control(
622	'caption_align',
623	[
624	'label' => __( 'Alignment', 'elementor' ),
625	'type' => Controls_Manager::CHOOSE,
626	'options' => [
627	'left' => [
628	'title' => __( 'Left', 'elementor' ),
629	'icon' => 'eicon-text-align-left',
630	],
631	'center' => [
632	'title' => __( 'Center', 'elementor' ),
633	'icon' => 'eicon-text-align-center',
634	],
635	'right' => [
636	'title' => __( 'Right', 'elementor' ),
637	'icon' => 'eicon-text-align-right',
638	],
639	'justify' => [
640	'title' => __( 'Justified', 'elementor' ),
641	'icon' => 'eicon-text-align-justify',
642	],
643	],
644	'default' => 'center',
645	'selectors' => [
646	'{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
647	],
648	]
649	);
650
651	$this->add_control(
652	'caption_text_color',
653	[
654	'label' => __( 'Text Color', 'elementor' ),
655	'type' => Controls_Manager::COLOR,
656	'default' => '',
657	'selectors' => [
658	'{{WRAPPER}} .elementor-image-carousel-caption' => 'color: {{VALUE}};',
659	],
660	]
661	);
662
663	$this->add_group_control(
664	Group_Control_Typography::get_type(),
665	[
666	'name' => 'caption_typography',
667	'global' => [
668	'default' => Global_Colors::COLOR_ACCENT,
669	],
670	'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
671	]
672	);
673
674	$this->end_controls_section();
675
676	}
677
678	/**
679	* Render image carousel widget output on the frontend.
680	*
681	* Written in PHP and used to generate the final HTML.
682	*
683	* @since 1.0.0
684	* @access protected
685	*/
686	protected function render() {
687	$settings = $this->get_settings_for_display();
688
689	if ( empty( $settings['carousel'] ) ) {
690	return;
691	}
692
693	$slides = [];
694
695	foreach ( $settings['carousel'] as $index => $attachment ) {
696	$image_url = Group_Control_Image_Size::get_attachment_image_src( $attachment['id'], 'thumbnail', $settings );
697
698	$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Control_Media::get_image_alt( $attachment ) ) . '" />';
699
700	$link_tag = '';
701
702	$link = $this->get_link_url( $attachment, $settings );
703
704	if ( $link ) {
705	$link_key = 'link_' . $index;
706
707	$this->add_lightbox_data_attributes( $link_key, $attachment['id'], $settings['open_lightbox'], $this->get_id() );
708
709	if ( Plugin::$instance->editor->is_edit_mode() ) {
710	$this->add_render_attribute( $link_key, [
711	'class' => 'elementor-clickable',
712	] );
713	}
714
715	$this->add_link_attributes( $link_key, $link );
716
717	$link_tag = '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
718	}
719
720	$image_caption = $this->get_image_caption( $attachment );
721
722	$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
723
724	if ( ! empty( $image_caption ) ) {
725	$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . $image_caption . '</figcaption>';
726	}
727
728	$slide_html .= '</figure>';
729
730	if ( $link ) {
731	$slide_html .= '</a>';
732	}
733
734	$slide_html .= '</div>';
735
736	$slides[] = $slide_html;
737
738	}
739
740	if ( empty( $slides ) ) {
741	return;
742	}
743
744	$this->add_render_attribute( [
745	'carousel' => [
746	'class' => 'elementor-image-carousel swiper-wrapper',
747	],
748	'carousel-wrapper' => [
749	'class' => 'elementor-image-carousel-wrapper swiper-container',
750	'dir' => $settings['direction'],
751	],
752	] );
753
754	$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
755	$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );
756
757	if ( 'yes' === $settings['image_stretch'] ) {
758	$this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
759	}
760
761	$slides_count = count( $settings['carousel'] );
762
763	?>
764	<div <?php echo $this->get_render_attribute_string( 'carousel-wrapper' ); ?>>
765	<div <?php echo $this->get_render_attribute_string( 'carousel' ); ?>>
766	<?php echo implode( '', $slides ); ?>
767	</div>
768	<?php if ( 1 < $slides_count ) : ?>
769	<?php if ( $show_dots ) : ?>
770	<div class="swiper-pagination"></div>
771	<?php endif; ?>
772	<?php if ( $show_arrows ) : ?>
773	<div class="elementor-swiper-button elementor-swiper-button-prev">
774	<i class="eicon-chevron-left" aria-hidden="true"></i>
775	<span class="elementor-screen-only"><?php _e( 'Previous', 'elementor' ); ?></span>
776	</div>
777	<div class="elementor-swiper-button elementor-swiper-button-next">
778	<i class="eicon-chevron-right" aria-hidden="true"></i>
779	<span class="elementor-screen-only"><?php _e( 'Next', 'elementor' ); ?></span>
780	</div>
781	<?php endif; ?>
782	<?php endif; ?>
783	</div>
784	<?php
785	}
786
787	/**
788	* Retrieve image carousel link URL.
789	*
790	* @since 1.0.0
791	* @access private
792	*
793	* @param array $attachment
794	* @param object $instance
795	*
796	* @return array\|string\|false An array/string containing the attachment URL, or false if no link.
797	*/
798	private function get_link_url( $attachment, $instance ) {
799	if ( 'none' === $instance['link_to'] ) {
800	return false;
801	}
802
803	if ( 'custom' === $instance['link_to'] ) {
804	if ( empty( $instance['link']['url'] ) ) {
805	return false;
806	}
807
808	return $instance['link'];
809	}
810
811	return [
812	'url' => wp_get_attachment_url( $attachment['id'] ),
813	];
814	}
815
816	/**
817	* Retrieve image carousel caption.
818	*
819	* @since 1.2.0
820	* @access private
821	*
822	* @param array $attachment
823	*
824	* @return string The caption of the image.
825	*/
826	private function get_image_caption( $attachment ) {
827	$caption_type = $this->get_settings_for_display( 'caption_type' );
828
829	if ( empty( $caption_type ) ) {
830	return '';
831	}
832
833	$attachment_post = get_post( $attachment['id'] );
834
835	if ( 'caption' === $caption_type ) {
836	return $attachment_post->post_excerpt;
837	}
838
839	if ( 'title' === $caption_type ) {
840	return $attachment_post->post_title;
841	}
842
843	return $attachment_post->post_content;
844	}
845	}
846