ultimate-post-kit / modules / skide-slider / widgets / skide-slider.php

skide-slider.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.2.3, at modules/skide-slider/widgets/skide-slider.php

1,206 lines 29.4 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\SkideSlider\Widgets;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Text_Shadow;
10	use Elementor\Group_Control_Text_Stroke;
11	use Elementor\Group_Control_Image_Size;
12	use Elementor\Group_Control_Background;
13	use Elementor\Plugin;
14	use UltimatePostKit\Utils;
15
16	use UltimatePostKit\Traits\Global_Widget_Controls;
17	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
18	use UltimatePostKit\Includes\Controls\SelectInput\Dynamic_Select;
19	use WP_Query;
20
21	if (!defined('ABSPATH')) exit; // Exit if accessed directly
22
23	class Skide_Slider extends Group_Control_Query {
24
25	use Global_Widget_Controls;
26
27	private $_query = null;
28
29	public function get_name() {
30	return 'upk-skide-slider';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__('Skide Slider', 'ultimate-post-kit');
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-skide-slider';
39	}
40
41	public function get_categories() {
42	return ['ultimate-post-kit'];
43	}
44
45	public function get_keywords() {
46	return ['post', 'carousel', 'blog', 'recent', 'news', 'slider', 'skide'];
47	}
48
49	public function get_style_depends() {
50	if ($this->upk_is_edit_mode()) {
51	return ['swiper', 'upk-all-styles'];
52	} else {
53	return ['swiper', 'upk-font', 'upk-skide-slider'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->upk_is_edit_mode()) {
59	return ['swiper', 'upk-all-scripts'];
60	} else {
61	return ['swiper', 'upk-skide-slider'];
62	}
63	}
64
65	public function get_custom_help_url() {
66	return 'https://youtu.be/7-7PbdFi_Ks';
67	}
68
69	public function get_query() {
70	return $this->_query;
71	}
72
73	public function has_widget_inner_wrapper(): bool {
74	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
75	}
76
77
78	protected function register_controls() {
79	$this->start_controls_section(
80	'section_content_layout',
81	[
82	'label' => esc_html__('Layout', 'ultimate-post-kit'),
83	]
84	);
85
86	$this->add_responsive_control(
87	'item_height',
88	[
89	'label' => esc_html__('Height', 'ultimate-post-kit'),
90	'type' => Controls_Manager::SLIDER,
91	'size_units' => ['px', 'vh'],
92	'range' => [
93	'px' => [
94	'min' => 200,
95	'max' => 1080,
96	],
97	'vh' => [
98	'min' => 10,
99	'max' => 100,
100	],
101	],
102	'selectors' => [
103	'{{WRAPPER}} .upk-skide-slider .upk-skide-item' => 'height: {{SIZE}}{{UNIT}};',
104	],
105	]
106	);
107	$this->add_responsive_control(
108	'content_max_width',
109	[
110	'label' => esc_html__('Content Max Width', 'ultimate-post-kit'),
111	'type' => Controls_Manager::SLIDER,
112	'size_units' => ['px', 'vw', '%'],
113	'range' => [
114	'px' => [
115	'min' => 200,
116	'max' => 1080,
117	],
118	'vw' => [
119	'min' => 10,
120	'max' => 100,
121	],
122	'%' => [
123	'min' => 10,
124	'max' => 100,
125	],
126	],
127	'selectors' => [
128	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'max-width: {{SIZE}}{{UNIT}};',
129	],
130	]
131	);
132
133	$this->add_responsive_control(
134	'content_alignment',
135	[
136	'label' => __('Alignment', 'ultimate-post-kit'),
137	'type' => Controls_Manager::CHOOSE,
138	'options' => [
139	'left' => [
140	'title' => __('Left', 'ultimate-post-kit'),
141	'icon' => 'eicon-h-align-left',
142	],
143	'center' => [
144	'title' => __('Center', 'ultimate-post-kit'),
145	'icon' => 'eicon-h-align-center',
146	],
147	'right' => [
148	'title' => __('Right', 'ultimate-post-kit'),
149	'icon' => 'eicon-h-align-right',
150	],
151	],
152	'selectors' => [
153	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'text-align: {{VALUE}};',
154	],
155	]
156	);
157
158	$this->add_group_control(
159	Group_Control_Image_Size::get_type(),
160	[
161	'name' => 'primary_thumbnail',
162	'exclude' => ['custom'],
163	'default' => 'full',
164	]
165	);
166
167	$this->add_control(
168	'hr_1',
169	[
170	'type' => Controls_Manager::DIVIDER,
171	]
172	);
173
174	//Global Title Controls
175	$this->register_title_controls();
176
177	$this->add_control(
178	'show_category',
179	[
180	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
181	'type' => Controls_Manager::SWITCHER,
182	'default' => 'yes',
183	]
184	);
185
186	$this->add_control(
187	'show_author',
188	[
189	'label' => esc_html__('Show Author', 'ultimate-post-kit'),
190	'type' => Controls_Manager::SWITCHER,
191	'default' => 'yes',
192	'separator' => 'before'
193	]
194	);
195
196	$this->add_control(
197	'meta_separator',
198	[
199	'label' => __('Separator', 'ultimate-post-kit'),
200	'type' => Controls_Manager::TEXT,
201	'default' => '//',
202	'label_block' => false,
203	]
204	);
205
206	//Global Date Controls
207	$this->register_date_controls();
208
209	//Global Reading Time Controls
210	$this->register_reading_time_controls();
211
212	$this->add_control(
213	'show_comments',
214	[
215	'label' => esc_html__('Show Comments', 'ultimate-post-kit'),
216	'type' => Controls_Manager::SWITCHER,
217	'default' => 'yes',
218	'separator' => 'before'
219	]
220	);
221
222	$this->add_control(
223	'show_top_stories',
224	[
225	'label' => esc_html__('Show Top Stories', 'ultimate-post-kit') . BDTUPK_PC,
226	'type' => Controls_Manager::SWITCHER,
227	'separator' => 'before',
228	'return_value' => 'yes',
229	'classes' => BDTUPK_IS_PC
230	]
231	);
232
233	$this->add_control(
234	'top_stories_query_heading',
235	[
236	'label' => __('Top Stories Item', 'ultimate-post-kit') . BDTUPK_NC,
237	'type' => Controls_Manager::HEADING,
238	'condition' => [
239	'show_top_stories' => 'yes'
240	]
241	]
242	);
243
244	$this->add_control(
245	'top_stories_selected_ids',
246	[
247	'label' => __('Select Posts', 'ultimate-post-kit'),
248	'type' => Dynamic_Select::TYPE,
249	'multiple' => true,
250	'label_block' => true,
251	'condition' => [
252	'show_top_stories' => 'yes'
253	]
254	]
255	);
256
257	$this->end_controls_section();
258
259	// Query Settings
260	$this->start_controls_section(
261	'section_post_query_builder',
262	[
263	'label' => __('Query', 'ultimate-post-kit'),
264	'tab' => Controls_Manager::TAB_CONTENT,
265	]
266	);
267
268	$this->add_control(
269	'item_limit',
270	[
271	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
272	'type' => Controls_Manager::SLIDER,
273	'range' => [
274	'px' => [
275	'min' => 1,
276	'max' => 20,
277	],
278	],
279	'default' => [
280	'size' => 12,
281	],
282	'condition' => [
283	'posts_source!' => 'current_query',
284	]
285	]
286	);
287
288	$this->register_query_builder_controls();
289
290	$this->end_controls_section();
291
292	$this->start_controls_section(
293	'section_carousel_settings',
294	[
295	'label' => __('Slider Settings', 'ultimate-post-kit'),
296	]
297	);
298
299	$this->add_control(
300	'autoplay',
301	[
302	'label' => __('Autoplay', 'ultimate-post-kit'),
303	'type' => Controls_Manager::SWITCHER,
304	'default' => 'yes',
305
306	]
307	);
308
309	$this->add_control(
310	'autoplay_speed',
311	[
312	'label' => esc_html__('Autoplay Speed', 'ultimate-post-kit'),
313	'type' => Controls_Manager::NUMBER,
314	'default' => 5000,
315	'condition' => [
316	'autoplay' => 'yes',
317	],
318	]
319	);
320
321	$this->add_control(
322	'pauseonhover',
323	[
324	'label' => esc_html__('Pause on Hover', 'ultimate-post-kit'),
325	'type' => Controls_Manager::SWITCHER,
326	'condition' => [
327	'autoplay' => 'yes',
328	],
329	]
330	);
331
332	$this->add_control(
333	'grab_cursor',
334	[
335	'label' => __('Grab Cursor', 'ultimate-post-kit'),
336	'type' => Controls_Manager::SWITCHER,
337	]
338	);
339
340	$this->add_control(
341	'loop',
342	[
343	'label' => __('Loop', 'ultimate-post-kit'),
344	'type' => Controls_Manager::SWITCHER,
345	'default' => 'yes',
346
347	]
348	);
349
350	$this->add_control(
351	'speed',
352	[
353	'label' => __('Animation Speed (ms)', 'ultimate-post-kit'),
354	'type' => Controls_Manager::SLIDER,
355	'default' => [
356	'size' => 500,
357	],
358	'range' => [
359	'px' => [
360	'min' => 100,
361	'max' => 5000,
362	'step' => 50,
363	],
364	],
365	]
366	);
367
368	$this->add_control(
369	'observer',
370	[
371	'label' => __('Observer', 'ultimate-post-kit'),
372	'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'ultimate-post-kit'),
373	'type' => Controls_Manager::SWITCHER,
374	]
375	);
376
377	$this->end_controls_section();
378
379	//Style
380	$this->start_controls_section(
381	'upk_section_style',
382	[
383	'label' => esc_html__('Items', 'ultimate-post-kit'),
384	'tab' => Controls_Manager::TAB_STYLE,
385	]
386	);
387
388	$this->add_responsive_control(
389	'item_padding',
390	[
391	'label' => __('Padding', 'ultimate-post-kit'),
392	'type' => Controls_Manager::DIMENSIONS,
393	'size_units' => ['px', 'em', '%'],
394	'selectors' => [
395	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
396	],
397	]
398	);
399
400	$this->add_responsive_control(
401	'item_margin',
402	[
403	'label' => __('Margin', 'ultimate-post-kit'),
404	'type' => Controls_Manager::DIMENSIONS,
405	'size_units' => ['px', 'em', '%'],
406	'selectors' => [
407	'{{WRAPPER}} .upk-skide-slider .upk-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
408	],
409	]
410	);
411
412	$this->end_controls_section();
413
414	$this->start_controls_section(
415	'section_style_title',
416	[
417	'label' => esc_html__('Title', 'ultimate-post-kit'),
418	'tab' => Controls_Manager::TAB_STYLE,
419	'condition' => [
420	'show_title' => 'yes',
421	],
422	]
423	);
424
425	$this->add_control(
426	'title_color',
427	[
428	'label' => esc_html__('Color', 'ultimate-post-kit'),
429	'type' => Controls_Manager::COLOR,
430	'selectors' => [
431	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'color: {{VALUE}};',
432	],
433	]
434	);
435
436	$this->add_control(
437	'title_hover_color',
438	[
439	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
440	'type' => Controls_Manager::COLOR,
441	'selectors' => [
442	'{{WRAPPER}} .upk-skide-slider .upk-title a:hover' => 'color: {{VALUE}};',
443	],
444	]
445	);
446
447	$this->add_group_control(
448	Group_Control_Background::get_type(),
449	[
450	'name' => 'title_background',
451	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
452	]
453	);
454
455	$this->add_responsive_control(
456	'title_border_radius',
457	[
458	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
459	'type' => Controls_Manager::DIMENSIONS,
460	'size_units' => ['px', '%'],
461	'selectors' => [
462	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
463	],
464	]
465	);
466
467	$this->add_responsive_control(
468	'title_padding',
469	[
470	'label' => __('Padding', 'ultimate-post-kit'),
471	'type' => Controls_Manager::DIMENSIONS,
472	'size_units' => ['px', 'em', '%'],
473	'selectors' => [
474	'{{WRAPPER}} .upk-skide-slider .upk-title a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
475	],
476	]
477	);
478
479	$this->add_responsive_control(
480	'title_spacing',
481	[
482	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
483	'type' => Controls_Manager::SLIDER,
484	'range' => [
485	'px' => [
486	'min' => 0,
487	'max' => 100,
488	],
489	],
490	'selectors' => [
491	'{{WRAPPER}} .upk-skide-slider .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
492	],
493	]
494	);
495
496	$this->add_group_control(
497	Group_Control_Typography::get_type(),
498	[
499	'name' => 'title_typography',
500	'label' => esc_html__('Typography', 'ultimate-post-kit'),
501	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title',
502	]
503	);
504
505	$this->add_group_control(
506	Group_Control_Text_Shadow::get_type(),
507	[
508	'name' => 'title_text_shadow',
509	'label' => __('Text Shadow', 'ultimate-post-kit'),
510	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
511	]
512	);
513
514	$this->add_group_control(
515	Group_Control_Text_Stroke::get_type(),
516	[
517	'name' => 'title_text_stroke',
518	'label' => __('Text Stroke', 'ultimate-post-kit') . BDTUPK_NC,
519	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-title a',
520	]
521	);
522
523	$this->end_controls_section();
524
525	$this->start_controls_section(
526	'section_style_meta',
527	[
528	'label' => esc_html__('Meta', 'ultimate-post-kit'),
529	'tab' => Controls_Manager::TAB_STYLE,
530	'conditions' => [
531	'relation' => 'or',
532	'terms' => [
533	[
534	'name' => 'show_author',
535	'value' => 'yes'
536	],
537	[
538	'name' => 'show_date',
539	'value' => 'yes'
540	],
541	[
542	'name' => 'show_comments',
543	'value' => 'yes'
544	],
545	]
546	],
547	]
548	);
549
550	$this->add_control(
551	'meta_color',
552	[
553	'label' => esc_html__('Color', 'ultimate-post-kit'),
554	'type' => Controls_Manager::COLOR,
555	'selectors' => [
556	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments, {{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a' => 'color: {{VALUE}};',
557	],
558	]
559	);
560
561	$this->add_control(
562	'meta_hover_color',
563	[
564	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
565	'type' => Controls_Manager::COLOR,
566	'selectors' => [
567	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a:hover' => 'color: {{VALUE}};',
568	],
569	]
570	);
571
572	$this->add_responsive_control(
573	'meta_space_between',
574	[
575	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
576	'type' => Controls_Manager::SLIDER,
577	'range' => [
578	'px' => [
579	'min' => 0,
580	'max' => 50,
581	],
582	],
583	'selectors' => [
584	'{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
585	],
586	]
587	);
588
589	$this->add_group_control(
590	Group_Control_Typography::get_type(),
591	[
592	'name' => 'meta_author_typography',
593	'label' => esc_html__('Author Typography', 'ultimate-post-kit'),
594	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-author-name a',
595	'condition' => [
596	'show_author' => 'yes',
597	],
598	]
599	);
600
601	$this->add_group_control(
602	Group_Control_Typography::get_type(),
603	[
604	'name' => 'meta_date_typography',
605	'label' => esc_html__('Date/Comments Typography', 'ultimate-post-kit'),
606	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-meta .upk-date-comments',
607	]
608	);
609
610	$this->end_controls_section();
611
612	$this->start_controls_section(
613	'section_style_category',
614	[
615	'label' => esc_html__('Category', 'ultimate-post-kit'),
616	'tab' => Controls_Manager::TAB_STYLE,
617	'condition' => [
618	'show_category' => 'yes'
619	],
620	]
621	);
622
623	$this->add_responsive_control(
624	'category_bottom_spacing',
625	[
626	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
627	'type' => Controls_Manager::SLIDER,
628	'range' => [
629	'px' => [
630	'min' => 0,
631	'max' => 50,
632	],
633	],
634	'selectors' => [
635	'{{WRAPPER}} .upk-skide-slider .upk-category' => 'margin-bottom: {{SIZE}}{{UNIT}};',
636	],
637	]
638	);
639
640	$this->start_controls_tabs('tabs_category_style');
641
642	$this->start_controls_tab(
643	'tab_category_normal',
644	[
645	'label' => esc_html__('Normal', 'ultimate-post-kit'),
646	]
647	);
648
649	$this->add_control(
650	'category_color',
651	[
652	'label' => esc_html__('Color', 'ultimate-post-kit'),
653	'type' => Controls_Manager::COLOR,
654	'selectors' => [
655	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'color: {{VALUE}};',
656	],
657	]
658	);
659
660	$this->add_group_control(
661	Group_Control_Background::get_type(),
662	[
663	'name' => 'category_background',
664	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
665	]
666	);
667
668	$this->add_group_control(
669	Group_Control_Border::get_type(),
670	[
671	'name' => 'category_border',
672	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
673	]
674	);
675
676	$this->add_responsive_control(
677	'category_border_radius',
678	[
679	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
680	'type' => Controls_Manager::DIMENSIONS,
681	'size_units' => ['px', '%'],
682	'selectors' => [
683	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
684	],
685	]
686	);
687
688	$this->add_responsive_control(
689	'category_padding',
690	[
691	'label' => esc_html__('Padding', 'ultimate-post-kit'),
692	'type' => Controls_Manager::DIMENSIONS,
693	'size_units' => ['px', 'em', '%'],
694	'selectors' => [
695	'{{WRAPPER}} .upk-skide-slider .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
696	],
697	]
698	);
699
700	$this->add_responsive_control(
701	'category_spacing',
702	[
703	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
704	'type' => Controls_Manager::SLIDER,
705	'range' => [
706	'px' => [
707	'min' => 0,
708	'max' => 50,
709	],
710	],
711	'selectors' => [
712	'{{WRAPPER}} .upk-skide-slider .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
713	],
714	]
715	);
716
717	$this->add_group_control(
718	Group_Control_Box_Shadow::get_type(),
719	[
720	'name' => 'category_shadow',
721	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
722	]
723	);
724
725	$this->add_group_control(
726	Group_Control_Typography::get_type(),
727	[
728	'name' => 'category_typography',
729	'label' => esc_html__('Typography', 'ultimate-post-kit'),
730	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a',
731	]
732	);
733
734	$this->end_controls_tab();
735
736	$this->start_controls_tab(
737	'tab_category_hover',
738	[
739	'label' => esc_html__('Hover', 'ultimate-post-kit'),
740	'condition' => [
741	'show_category' => 'yes'
742	]
743	]
744	);
745
746	$this->add_control(
747	'category_hover_color',
748	[
749	'label' => esc_html__('Color', 'ultimate-post-kit'),
750	'type' => Controls_Manager::COLOR,
751	'selectors' => [
752	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'color: {{VALUE}};',
753	],
754	]
755	);
756
757	$this->add_group_control(
758	Group_Control_Background::get_type(),
759	[
760	'name' => 'category_hover_background',
761	'selector' => '{{WRAPPER}} .upk-skide-slider .upk-category a:hover',
762	]
763	);
764
765	$this->add_control(
766	'category_hover_border_color',
767	[
768	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
769	'type' => Controls_Manager::COLOR,
770	'condition' => [
771	'category_border_border!' => '',
772	],
773	'selectors' => [
774	'{{WRAPPER}} .upk-skide-slider .upk-category a:hover' => 'border-color: {{VALUE}};',
775	],
776	]
777	);
778
779	$this->end_controls_tab();
780
781	$this->end_controls_tabs();
782
783	$this->end_controls_section();
784
785	$this->start_controls_section(
786	'section_style_thumbs',
787	[
788	'label' => esc_html__('Thumbs', 'ultimate-post-kit'),
789	'tab' => Controls_Manager::TAB_STYLE,
790	]
791	);
792
793	$this->start_controls_tabs('tabs_thumbs_style');
794
795	$this->start_controls_tab(
796	'tab_thumbs_image',
797	[
798	'label' => esc_html__('Image', 'ultimate-post-kit'),
799	]
800	);
801
802	$this->add_group_control(
803	Group_Control_Border::get_type(),
804	[
805	'name' => 'thumbs_image_border',
806	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img',
807	]
808	);
809
810	$this->add_responsive_control(
811	'thumbs_image_border_radius',
812	[
813	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
814	'type' => Controls_Manager::DIMENSIONS,
815	'size_units' => ['px', '%'],
816	'selectors' => [
817	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img .upk-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
818	],
819	]
820	);
821
822	$this->add_responsive_control(
823	'thumbs_img_margin',
824	[
825	'label' => __('Margin', 'ultimate-post-kit'),
826	'type' => Controls_Manager::DIMENSIONS,
827	'size_units' => ['px', 'em', '%'],
828	'selectors' => [
829	'{{WRAPPER}} .upk-skide-thumbs .upk-thumbs-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
830	],
831	]
832	);
833
834	$this->end_controls_tab();
835
836	$this->start_controls_tab(
837	'tab_thumbs_title',
838	[
839	'label' => esc_html__('Title', 'ultimate-post-kit'),
840	]
841	);
842
843	$this->add_control(
844	'thumbs_title_color',
845	[
846	'label' => esc_html__('Color', 'ultimate-post-kit'),
847	'type' => Controls_Manager::COLOR,
848	'selectors' => [
849	'{{WRAPPER}} .upk-skide-thumbs .upk-title a' => 'color: {{VALUE}};',
850	],
851	]
852	);
853
854	$this->add_responsive_control(
855	'thumbs_title_margin',
856	[
857	'label' => __('Margin', 'ultimate-post-kit'),
858	'type' => Controls_Manager::DIMENSIONS,
859	'size_units' => ['px', 'em', '%'],
860	'selectors' => [
861	'{{WRAPPER}} .upk-skide-thumbs .upk-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
862	],
863	]
864	);
865
866	$this->add_group_control(
867	Group_Control_Typography::get_type(),
868	[
869	'name' => 'thumbs_title_typography',
870	'label' => esc_html__('Typography', 'ultimate-post-kit'),
871	'selector' => '{{WRAPPER}} .upk-skide-thumbs .upk-title',
872	]
873	);
874
875	$this->end_controls_tab();
876
877	$this->end_controls_tabs();
878
879	$this->end_controls_section();
880	}
881
882	/**
883	* Main query render for this widget
884	* @param $posts_per_page number item query limit
885	*/
886	public function query_posts($posts_per_page) {
887
888	$default = $this->getGroupControlQueryArgs();
889	$args = [];
890	if ($posts_per_page) {
891	$args['posts_per_page'] = $posts_per_page;
892	}
893	$args = array_merge($default, $args);
894	$this->_query = new WP_Query($args);
895	}
896
897	public function render_image($image_id, $size) {
898	$placeholder_image_src = Utils::get_placeholder_image_src();
899
900	$image_src = wp_get_attachment_image_src($image_id, $size);
901
902	if (!$image_src) {
903	$image_src = $placeholder_image_src;
904	} else {
905	$image_src = $image_src[0];
906	}
907
908	?>
909
910	<img class="upk-img swiper-lazy" src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
911
912	<?php
913	}
914
915	public function render_title() {
916	$settings = $this->get_settings_for_display();
917
918	if (!$this->get_settings('show_title')) {
919	return;
920	}
921
922	$title = get_the_title();
923	printf('<%1$s class="upk-title"><a href="%2$s" title="%4$s">%3$s</a></%1$s>', esc_attr(Utils::get_valid_html_tag($settings['title_tags'])), esc_url( get_permalink() ), esc_html( $title ), esc_attr( $title ));
924	}
925
926	public function render_excerpt($excerpt_length) {
927
928	if (!$this->get_settings('show_excerpt')) {
929	return;
930	}
931	$strip_shortcode = $this->get_settings_for_display('strip_shortcode');
932	?>
933	<div class="upk-skide-desc" data-swiper-parallax-y="-80" data-swiper-parallax-duration="900">
934	<?php
935	if (has_excerpt()) {
936	the_excerpt();
937	} else {
938	echo wp_kses_post( ultimate_post_kit_custom_excerpt($excerpt_length, $strip_shortcode) );
939	}
940	?>
941	</div>
942
943	<?php
944	}
945
946	public function render_category() {
947
948	if (!$this->get_settings('show_category')) {
949	return;
950	}
951	?>
952	<div class="upk-category" data-swiper-parallax="-300">
953	<?php echo wp_kses_post( get_the_category_list(' ') ); ?>
954	</div>
955	<?php
956	}
957
958	public function render_date() {
959	$settings = $this->get_settings_for_display();
960
961
962	if (!$this->get_settings('show_date')) {
963	return;
964	}
965
966	?>
967	<div class="upk-date upk-flex upk-flex-middle">
968	<div class="upk-date">
969	<?php if ($settings['human_diff_time'] == 'yes') {
970	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
971	} else {
972	echo get_the_date();
973	} ?>
974	</div>
975	<?php if ($settings['show_time']) : ?>
976	<div class="upk-post-time">
977	<i class="upk-icon-clock" aria-hidden="true"></i>
978	<?php echo esc_html( get_the_time() ); ?>
979	</div>
980	<?php endif; ?>
981	</div>
982
983	<?php
984	}
985
986	public function render_author() {
987
988	if (!$this->get_settings('show_author')) {
989	return;
990	}
991	?>
992	<div class="upk-author-wrap">
993	<span class="upk-by"><?php echo esc_html_x('by', 'Frontend', 'ultimate-post-kit'); ?></span>
994	<a class="upk-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
995	<?php echo esc_html( get_the_author() ); ?>
996	</a>
997	</div>
998	<?php
999	}
1000
1001	public function render_comments($id = 0) {
1002
1003	if (!$this->get_settings('show_comments')) {
1004	return;
1005	}
1006
1007	?>
1008	<div class="upk-comments">
1009	<?php echo esc_html( Utils::get_formatted_comments_count( $id ) ); ?>
1010	</div>
1011	<?php
1012	}
1013
1014	public function render_header() {
1015	$id = 'upk-skide-slider-' . $this->get_id();
1016	$settings = $this->get_settings_for_display();
1017
1018	$this->add_render_attribute('skide-slider', 'id', $id);
1019	$this->add_render_attribute('skide-slider', 'class', ['upk-skide-slider']);
1020
1021	$this->add_render_attribute(
1022	[
1023	'skide-slider' => [
1024	'data-settings' => [
1025	wp_json_encode(array_filter([
1026	"autoplay" => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
1027	"loop" => ($settings["loop"] == "yes") ? true : false,
1028	"speed" => $settings["speed"]["size"],
1029	"effect" => 'fade',
1030	"fadeEffect" => ['crossFade' => true],
1031	"lazy" => true,
1032	"parallax" => true,
1033	"grabCursor" => ($settings["grab_cursor"] === "yes") ? true : false,
1034	"pauseOnHover" => ("yes" == $settings["pauseonhover"]) ? true : false,
1035	"slidesPerView" => 1,
1036	"observer" => ($settings["observer"]) ? true : false,
1037	"observeParents" => ($settings["observer"]) ? true : false,
1038	"loopedSlides" => 4,
1039	"lazy" => [
1040	"loadPrevNext" => "true",
1041	],
1042	]))
1043	]
1044	]
1045	]
1046	);
1047
1048	$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
1049
1050	?>
1051	<div <?php $this->print_render_attribute_string('skide-slider'); ?>>
1052	<div <?php $this->print_render_attribute_string('swiper'); ?>>
1053	<div class="swiper-wrapper">
1054	<?php
1055	}
1056
1057	public function render_footer() {
1058	$settings = $this->get_settings_for_display();
1059
1060	?>
1061
1062	</div>
1063	</div>
1064	</div>
1065
1066	<?php
1067	}
1068
1069	public function render_post_grid_item($post_id, $image_size) {
1070	$settings = $this->get_settings_for_display();
1071
1072	$this->add_render_attribute('slider-item', 'class', 'upk-skide-item swiper-slide', true);
1073
1074	?>
1075	<div <?php $this->print_render_attribute_string('slider-item'); ?>>
1076	<div class="upk-image-wrap">
1077	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1078	</div>
1079	<div class="upk-content">
1080
1081	<?php $this->render_category(); ?>
1082
1083	<?php if ($settings['show_title']) : ?>
1084	<div data-swiper-parallax="-200">
1085	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1086	</div>
1087	<?php endif; ?>
1088
1089	<div class="upk-meta" data-swiper-parallax="-100">
1090	<?php if ('yes' === $settings['show_author']) : ?>
1091	<div class="upk-author-img">
1092	<?php echo get_avatar(get_the_author_meta('ID'), 48); ?>
1093	</div>
1094	<?php endif; ?>
1095	<div class="upk-meta-info">
1096	<?php if ('yes' === $settings['show_author']) : ?>
1097	<div class="upk-author-name">
1098	<a href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>">
1099	<?php echo esc_html( get_the_author() ); ?>
1100	</a>
1101	</div>
1102	<?php endif; ?>
1103	<?php if ($settings['show_comments'] or $settings['show_date'] or $settings['show_reading_time']) : ?>
1104	<div class="upk-date-comments">
1105	<?php $this->render_date(); ?>
1106
1107	<?php if ($settings['show_comments']) : ?>
1108	<div data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1109	<?php $this->render_comments($post_id); ?>
1110	</div>
1111	<?php endif; ?>
1112
1113	<?php if (_is_upk_pro_activated()) :
1114	if ('yes' === $settings['show_reading_time']) : ?>
1115	<div class="upk-reading-time" data-separator="<?php echo esc_attr($settings['meta_separator']); ?>">
1116	<?php echo esc_html( ultimate_post_kit_reading_time(get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no') ); ?>
1117	</div>
1118	<?php endif; ?>
1119	<?php endif; ?>
1120	</div>
1121	<?php endif; ?>
1122
1123	</div>
1124	</div>
1125
1126	</div>
1127	</div>
1128	<?php
1129	}
1130
1131	public function render_thumbnav($post_id, $image_size) {
1132	$settings = $this->get_settings_for_display();
1133
1134	$this->add_render_attribute('thumb-item', 'class', 'upk-skide-thumb-item swiper-slide', true);
1135
1136	?>
1137	<div <?php $this->print_render_attribute_string('thumb-item'); ?>>
1138	<div class="upk-thumbs-img">
1139	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1140	</div>
1141	<div class="upk-thumbs-content">
1142	<h3 class="upk-title">
1143	<a href="javascript:void(0);"><?php echo esc_html(get_the_title()); ?></a>
1144	</h3>
1145	</div>
1146	</div>
1147	<?php
1148	}
1149
1150	public function render() {
1151	$settings = $this->get_settings_for_display();
1152
1153	$this->query_posts($settings['item_limit']['size']);
1154	$wp_query = $this->get_query();
1155
1156	if (!$wp_query->found_posts) {
1157	return;
1158	}
1159
1160	$this->add_render_attribute('swiper-thumbs', 'class', 'upk-skide-thumbs swiper');
1161
1162	?>
1163	<div class="upk-skide-slider-wrap">
1164	<?php
1165
1166	$this->render_header();
1167
1168	while ($wp_query->have_posts()) {
1169	$wp_query->the_post();
1170	$thumbnail_size = $settings['primary_thumbnail_size'];
1171
1172	$this->render_post_grid_item(get_the_ID(), $thumbnail_size);
1173	}
1174	wp_reset_postdata();
1175
1176	$this->render_footer();
1177
1178
1179	?>
1180	<div thumbsSlider="" <?php $this->print_render_attribute_string('swiper-thumbs'); ?>>
1181	<div class="swiper-wrapper">
1182	<?php
1183
1184	while ($wp_query->have_posts()) {
1185	$wp_query->the_post();
1186	$thumbnail_size = $settings['primary_thumbnail_size'];
1187
1188	$this->render_thumbnav(get_the_ID(), $thumbnail_size);
1189	}
1190	wp_reset_postdata();
1191
1192	?>
1193	</div>
1194	</div>
1195	<?php
1196	if (_is_upk_pro_activated()) {
1197	apply_filters('show_top_stories', $this);
1198	}
1199	?>
1200
1201	</div>
1202
1203	<?php
1204	}
1205	}
1206