ultimate-post-kit / modules / exotic-list / widgets / exotic-list.php

exotic-list.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.16, at modules/exotic-list/widgets/exotic-list.php

911 lines 23.8 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\ExoticList\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_Image_Size;
11	use Elementor\Group_Control_Background;
12
13	use UltimatePostKit\Traits\Global_Widget_Controls;
14	use UltimatePostKit\Traits\Global_Widget_Functions;
15	use UltimatePostKit\Includes\Controls\GroupQuery\Group_Control_Query;
16	use WP_Query;
17
18	if ( ! defined( 'ABSPATH' ) ) {
19	exit;
20	} // Exit if accessed directly
21
22	class Exotic_List extends Group_Control_Query {
23
24	use Global_Widget_Controls;
25	use Global_Widget_Functions;
26
27	private $_query = null;
28
29	public function get_name() {
30	return 'upk-exotic-list';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__( 'Exotic List', 'ultimate-post-kit' );
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-exotic-list upk-new';
39	}
40
41	public function get_categories() {
42	return [ 'ultimate-post-kit' ];
43	}
44
45	public function get_keywords() {
46	return [ 'post', 'grid', 'blog', 'recent', 'news', 'exotic', 'list' ];
47	}
48
49	public function get_style_depends() {
50	if ( $this->upk_is_edit_mode() ) {
51	return [ 'upk-all-styles' ];
52	} else {
53	return [ 'upk-font', 'upk-exotic-list' ];
54	}
55	}
56
57	public function get_custom_help_url() {
58	return 'https://youtu.be/WROTolCKOmE';
59	}
60
61	public function get_query() {
62	return $this->_query;
63	}
64
65	public function has_widget_inner_wrapper(): bool {
66	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
67	}
68
69
70	protected function register_controls() {
71	$this->start_controls_section(
72	'section_content_layout',
73	[
74	'label' => esc_html__( 'Layout', 'ultimate-post-kit' ),
75	]
76	);
77
78
79	$this->add_responsive_control(
80	'row_gap',
81	[
82	'label' => esc_html__( 'Row Gap', 'ultimate-post-kit' ),
83	'type' => Controls_Manager::SLIDER,
84	'selectors' => [
85	'{{WRAPPER}} .upk-exotic-list .upk-item' => 'margin-bottom: {{SIZE}}{{UNIT}};',
86	],
87	]
88	);
89
90	$this->add_control(
91	'image_direction_style',
92	[
93	'label' => esc_html__('Image Direction', 'ultimate-post-kit'),
94	'type' => Controls_Manager::SELECT,
95	'default' => 'right',
96	'options' => [
97	'right' => esc_html__('Right', 'ultimate-post-kit'),
98	'left' => esc_html__('Left', 'ultimate-post-kit'),
99	],
100	]
101	);
102
103	$this->add_responsive_control(
104	'content_alignment',
105	[
106	'label' => __('Alignment', 'ultimate-post-kit'),
107	'type' => Controls_Manager::CHOOSE,
108	'options' => [
109	'left' => [
110	'title' => __('Left', 'ultimate-post-kit'),
111	'icon' => 'eicon-h-align-left',
112	],
113	'center' => [
114	'title' => __('Center', 'ultimate-post-kit'),
115	'icon' => 'eicon-h-align-center',
116	],
117	'right' => [
118	'title' => __('Right', 'ultimate-post-kit'),
119	'icon' => 'eicon-h-align-right',
120	],
121	],
122	'selectors' => [
123	'{{WRAPPER}} .upk-exotic-list .upk-content-wrap' => 'text-align: {{VALUE}};',
124	],
125	]
126	);
127
128	$this->add_group_control(
129	Group_Control_Image_Size::get_type(),
130	[
131	'name' => 'primary_thumbnail',
132	'exclude' => [ 'custom' ],
133	'default' => 'medium',
134	]
135	);
136
137	$this->end_controls_section();
138
139	// Query Settings
140	$this->start_controls_section(
141	'section_post_query_builder',
142	[
143	'label' => __( 'Query', 'ultimate-post-kit' ),
144	'tab' => Controls_Manager::TAB_CONTENT,
145	]
146	);
147
148	$this->add_control(
149	'item_limit',
150	[
151	'label' => esc_html__( 'Item Limit', 'ultimate-post-kit' ),
152	'type' => Controls_Manager::SLIDER,
153	'range' => [
154	'px' => [
155	'min' => 1,
156	'max' => 20,
157	],
158	],
159	'default' => [
160	'size' => 3,
161	],
162	'condition' => [
163	'posts_source!' => 'current_query',
164	]
165	]
166	);
167
168	$this->register_query_builder_controls();
169
170	$this->end_controls_section();
171
172	$this->start_controls_section(
173	'section_content_additional',
174	[
175	'label' => esc_html__( 'Additional Options', 'ultimate-post-kit' ),
176	]
177	);
178
179	$this->add_control(
180	'show_image',
181	[
182	'label' => esc_html__( 'Show Image', 'ultimate-post-kit' ),
183	'type' => Controls_Manager::SWITCHER,
184	'default' => 'yes',
185	]
186	);
187
188	//Global Title Controls
189	$this->register_title_controls();
190
191	$this->add_control(
192	'show_category',
193	[
194	'label' => esc_html__( 'Show Category', 'ultimate-post-kit' ),
195	'type' => Controls_Manager::SWITCHER,
196	'default' => 'yes',
197	]
198	);
199
200	$this->add_control(
201	'show_author',
202	[
203	'label' => esc_html__( 'Show Author', 'ultimate-post-kit' ),
204	'type' => Controls_Manager::SWITCHER,
205	'default' => 'yes',
206	]
207	);
208
209	$this->add_control(
210	'meta_separator',
211	[
212	'label' => __('Separator', 'ultimate-post-kit'),
213	'type' => Controls_Manager::TEXT,
214	'default' => '//',
215	'label_block' => false,
216	'conditions' => [
217	'relation' => 'or',
218	'terms' => [
219	[
220	'name' => 'show_category',
221	'operator' => '===',
222	'value' => 'yes',
223	],
224	[
225	'name' => 'show_author',
226	'operator' => '===',
227	'value' => 'yes',
228	],
229	],
230	],
231	]
232	);
233
234	//Global Date Controls
235	$this->register_date_controls();
236
237	//Global Reading Time Controls
238	$this->register_reading_time_controls();
239
240	$this->add_control(
241	'show_pagination',
242	[
243	'label' => esc_html__( 'Show Pagination', 'ultimate-post-kit' ),
244	'type' => Controls_Manager::SWITCHER,
245	'separator' => 'before'
246	]
247	);
248
249	$this->add_control(
250	'global_link',
251	[
252	'label' => __( 'Item Wrapper Link', 'ultimate-post-kit' ),
253	'type' => Controls_Manager::SWITCHER,
254	'prefix_class' => 'upk-global-link-',
255	'description' => __( 'Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit' ),
256	]
257	);
258
259	$this->end_controls_section();
260
261	$this->start_controls_section(
262	'section_style_image',
263	[
264	'label' => esc_html__( 'Image', 'ultimate-post-kit' ),
265	'tab' => Controls_Manager::TAB_STYLE,
266	'condition' => [
267	'show_image' => 'yes'
268	]
269	]
270	);
271
272	$this->add_responsive_control(
273	'content_gap',
274	[
275	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
276	'type' => Controls_Manager::SLIDER,
277	'selectors' => [
278	'{{WRAPPER}} .upk-exotic-list .upk-content-wrap' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
279	],
280	]
281	);
282
283	$this->add_group_control(
284	Group_Control_Border::get_type(),
285	[
286	'name' => 'item_image_border',
287	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-image-wrap',
288	]
289	);
290
291	$this->add_responsive_control(
292	'item_image_border_radius',
293	[
294	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
295	'type' => Controls_Manager::DIMENSIONS,
296	'size_units' => [ 'px', '%' ],
297	'selectors' => [
298	'{{WRAPPER}} .upk-exotic-list .upk-image-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
299	],
300	]
301	);
302
303	$this->add_responsive_control(
304	'item_image_height',
305	[
306	'label' => esc_html__( 'Height', 'ultimate-post-kit' ),
307	'type' => Controls_Manager::SLIDER,
308	'range' => [
309	'px' => [
310	'min' => 100,
311	'max' => 500,
312	],
313	],
314	'selectors' => [
315	'{{WRAPPER}} .upk-exotic-list' => 'height: {{SIZE}}{{UNIT}};',
316	],
317	]
318	);
319
320	$this->end_controls_section();
321
322	$this->start_controls_section(
323	'section_style_title',
324	[
325	'label' => esc_html__( 'Title', 'ultimate-post-kit' ),
326	'tab' => Controls_Manager::TAB_STYLE,
327	'condition' => [
328	'show_title' => 'yes',
329	],
330	]
331	);
332
333	$this->add_control(
334	'title_style',
335	[
336	'label' => esc_html__('Style', 'ultimate-post-kit'),
337	'type' => Controls_Manager::SELECT,
338	'default' => 'underline',
339	'options' => [
340	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
341	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
342	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
343	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
344	],
345	]
346	);
347
348	$this->add_control(
349	'title_color',
350	[
351	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
352	'type' => Controls_Manager::COLOR,
353	'selectors' => [
354	'{{WRAPPER}} .upk-exotic-list .upk-title a' => 'color: {{VALUE}};',
355	],
356	]
357	);
358
359	$this->add_control(
360	'title_hover_color',
361	[
362	'label' => esc_html__( 'Hover Color', 'ultimate-post-kit' ),
363	'type' => Controls_Manager::COLOR,
364	'selectors' => [
365	'{{WRAPPER}} .upk-exotic-list .upk-title a:hover' => 'color: {{VALUE}};',
366	],
367	]
368	);
369
370	$this->add_responsive_control(
371	'title_spacing',
372	[
373	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
374	'type' => Controls_Manager::SLIDER,
375	'range' => [
376	'px' => [
377	'min' => 0,
378	'max' => 50,
379	],
380	],
381	'selectors' => [
382	'{{WRAPPER}} .upk-exotic-list .upk-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
383	],
384	]
385	);
386
387	$this->add_group_control(
388	Group_Control_Typography::get_type(),
389	[
390	'name' => 'title_typography',
391	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
392	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-title',
393	]
394	);
395
396	$this->add_group_control(
397	Group_Control_Text_Shadow::get_type(),
398	[
399	'name' => 'title_text_shadow',
400	'label' => __( 'Text Shadow', 'ultimate-post-kit' ),
401	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-title a',
402	]
403	);
404
405	$this->end_controls_section();
406
407	$this->start_controls_section(
408	'section_style_date',
409	[
410	'label' => esc_html__( 'Date', 'ultimate-post-kit' ),
411	'tab' => Controls_Manager::TAB_STYLE,
412	'conditions' => [
413	'relation' => 'or',
414	'terms' => [
415	[
416	'name' => 'show_date',
417	'value' => 'yes'
418	],
419	]
420	],
421	]
422	);
423
424	$this->add_control(
425	'date_color',
426	[
427	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
428	'type' => Controls_Manager::COLOR,
429	'selectors' => [
430	'{{WRAPPER}} .upk-exotic-list .upk-date-wrap' => 'color: {{VALUE}};',
431	],
432	]
433	);
434
435
436	$this->add_group_control(
437	Group_Control_Background::get_type(),
438	[
439	'name' => 'date_background',
440	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-date-wrap',
441	]
442	);
443
444	$this->add_group_control(
445	Group_Control_Border::get_type(),
446	[
447	'name' => 'date_border',
448	'label' => __( 'Border', 'ultimate-post-kit' ),
449	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-date-wrap',
450	]
451	);
452
453	$this->add_responsive_control(
454	'date_border_radius',
455	[
456	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
457	'type' => Controls_Manager::DIMENSIONS,
458	'size_units' => [ 'px', '%' ],
459	'selectors' => [
460	'{{WRAPPER}} .upk-exotic-list .upk-date-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
461	],
462	]
463	);
464
465	$this->add_responsive_control(
466	'date_padding',
467	[
468	'label' => esc_html__( 'Padding', 'ultimate-post-kit' ),
469	'type' => Controls_Manager::DIMENSIONS,
470	'size_units' => [ 'px', 'em', '%' ],
471	'selectors' => [
472	'{{WRAPPER}} .upk-exotic-list .upk-date-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
473	],
474	]
475	);
476
477
478	$this->add_responsive_control(
479	'date_spacing',
480	[
481	'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
482	'type' => Controls_Manager::SLIDER,
483	'range' => [
484	'px' => [
485	'min' => 0,
486	'max' => 50,
487	'step' => 2,
488	],
489	],
490	'selectors' => [
491	'{{WRAPPER}} .upk-exotic-list .upk-content-wrap' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
492	],
493	]
494	);
495
496	$this->add_group_control(
497	Group_Control_Typography::get_type(),
498	[
499	'name' => 'date_typography',
500	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
501	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-date-wrap',
502	]
503	);
504
505	$this->end_controls_section();
506
507
508	$this->start_controls_section(
509	'section_style_author',
510	[
511	'label' => esc_html__( 'Author', 'ultimate-post-kit' ),
512	'tab' => Controls_Manager::TAB_STYLE,
513	'conditions' => [
514	'relation' => 'or',
515	'terms' => [
516	[
517	'name' => 'show_author',
518	'value' => 'yes'
519	],
520	]
521	],
522	]
523	);
524
525	$this->add_control(
526	'author_color',
527	[
528	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
529	'type' => Controls_Manager::COLOR,
530	'selectors' => [
531	'{{WRAPPER}} .upk-exotic-list .upk-author a' => 'color: {{VALUE}};',
532	],
533	]
534	);
535
536	$this->add_control(
537	'author_hover_color',
538	[
539	'label' => esc_html__( 'Hover Color', 'ultimate-post-kit' ),
540	'type' => Controls_Manager::COLOR,
541	'selectors' => [
542	'{{WRAPPER}} .upk-exotic-list .upk-author a:hover' => 'color: {{VALUE}};',
543	],
544	]
545	);
546
547	// $this->add_responsive_control(
548	// 'author_spacing',
549	// [
550	// 'label' => esc_html__( 'Spacing', 'ultimate-post-kit' ),
551	// 'type' => Controls_Manager::SLIDER,
552	// 'range' => [
553	// 'px' => [
554	// 'min' => 0,
555	// 'max' => 50,
556	// 'step' => 2,
557	// ],
558	// ],
559	// 'selectors' => [
560	// '{{WRAPPER}} .upk-exotic-list .upk-meta' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
561	// ],
562	// ]
563	// );
564	$this->add_responsive_control(
565	'author_spacing',
566	[
567	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
568	'type' => Controls_Manager::SLIDER,
569	'range' => [
570	'px' => [
571	'min' => 0,
572	'max' => 50,
573	],
574	],
575	'selectors' => [
576	'{{WRAPPER}} .upk-exotic-list .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
577	],
578	]
579	);
580
581	$this->add_group_control(
582	Group_Control_Typography::get_type(),
583	[
584	'name' => 'author_typography',
585	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
586	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-author',
587	]
588	);
589
590	$this->end_controls_section();
591
592	$this->start_controls_section(
593	'section_style_category',
594	[
595	'label' => esc_html__( 'Category', 'ultimate-post-kit' ),
596	'tab' => Controls_Manager::TAB_STYLE,
597	'condition' => [
598	'show_category' => 'yes',
599	],
600	]
601	);
602
603	$this->start_controls_tabs( 'tabs_category_style' );
604
605	$this->start_controls_tab(
606	'tab_category_normal',
607	[
608	'label' => esc_html__( 'Normal', 'ultimate-post-kit' ),
609	]
610	);
611
612	$this->add_control(
613	'category_color',
614	[
615	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
616	'type' => Controls_Manager::COLOR,
617	'selectors' => [
618	'{{WRAPPER}} .upk-exotic-list .upk-category a' => 'color: {{VALUE}};',
619	],
620	]
621	);
622
623	$this->add_group_control(
624	Group_Control_Background::get_type(),
625	[
626	'name' => 'category_background',
627	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-category a',
628	]
629	);
630
631	$this->add_group_control(
632	Group_Control_Border::get_type(),
633	[
634	'name' => 'category_border',
635	'label' => __( 'Border', 'ultimate-post-kit' ),
636	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-category a',
637	]
638	);
639
640	$this->add_responsive_control(
641	'category_border_radius',
642	[
643	'label' => esc_html__( 'Border Radius', 'ultimate-post-kit' ),
644	'type' => Controls_Manager::DIMENSIONS,
645	'size_units' => [ 'px', '%' ],
646	'selectors' => [
647	'{{WRAPPER}} .upk-exotic-list .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
648	],
649	]
650	);
651
652	$this->add_responsive_control(
653	'category_padding',
654	[
655	'label' => esc_html__( 'Padding', 'ultimate-post-kit' ),
656	'type' => Controls_Manager::DIMENSIONS,
657	'size_units' => [ 'px', 'em', '%' ],
658	'selectors' => [
659	'{{WRAPPER}} .upk-exotic-list .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
660	],
661	]
662	);
663
664	$this->add_responsive_control(
665	'category_spacing',
666	[
667	'label' => esc_html__( 'Space Between', 'ultimate-post-kit' ),
668	'type' => Controls_Manager::SLIDER,
669	'range' => [
670	'px' => [
671	'min' => 0,
672	'max' => 50,
673	'step' => 2,
674	],
675	],
676	'selectors' => [
677	'{{WRAPPER}} .upk-exotic-list .upk-category a+a' => 'margin-left: {{SIZE}}{{UNIT}};',
678	],
679	]
680	);
681
682
683	$this->add_group_control(
684	Group_Control_Box_Shadow::get_type(),
685	[
686	'name' => 'category_shadow',
687	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-category a',
688	]
689	);
690
691	$this->add_group_control(
692	Group_Control_Typography::get_type(),
693	[
694	'name' => 'category_typography',
695	'label' => esc_html__( 'Typography', 'ultimate-post-kit' ),
696	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-category a',
697	]
698	);
699
700	$this->end_controls_tab();
701
702	$this->start_controls_tab(
703	'tab_category_hover',
704	[
705	'label' => esc_html__( 'Hover', 'ultimate-post-kit' ),
706	]
707	);
708
709	$this->add_control(
710	'category_hover_color',
711	[
712	'label' => esc_html__( 'Color', 'ultimate-post-kit' ),
713	'type' => Controls_Manager::COLOR,
714	'selectors' => [
715	'{{WRAPPER}} .upk-exotic-list .upk-category a:hover' => 'color: {{VALUE}};',
716	],
717	]
718	);
719
720	$this->add_group_control(
721	Group_Control_Background::get_type(),
722	[
723	'name' => 'category_hover_background',
724	'selector' => '{{WRAPPER}} .upk-exotic-list .upk-category a:hover',
725	]
726	);
727
728	$this->add_control(
729	'category_hover_border_color',
730	[
731	'label' => esc_html__( 'Border Color', 'ultimate-post-kit' ),
732	'type' => Controls_Manager::COLOR,
733	'condition' => [
734	'category_border_border!' => '',
735	],
736	'selectors' => [
737	'{{WRAPPER}} .upk-exotic-list .upk-category a:hover' => 'border-color: {{VALUE}};',
738	],
739	]
740	);
741
742	$this->end_controls_tab();
743
744	$this->end_controls_tabs();
745
746	$this->end_controls_section();
747
748	//Global Pagination Controls
749	$this->register_pagination_controls();
750	}
751
752	/**
753	* Get post query builder arguments
754	*/
755	public function query_posts( $posts_per_page ) {
756	$settings = $this->get_settings();
757	$posts_per_page = isset( $posts_per_page ) ? (int) $posts_per_page : 0;
758	$args = $this->getGroupControlQueryArgs();
759	$is_current_query = ( ! empty( $settings['posts_source'] ) && $settings['posts_source'] === 'current_query' );
760
761	if ( $is_current_query ) {
762	unset( $args['offset'] );
763	unset( $args['no_found_rows'] );
764	$posts_per_page = 0;
765	}
766
767	if ( $posts_per_page > 0 ) {
768	$args['posts_per_page'] = $posts_per_page;
769	} else {
770	$args['posts_per_page'] = (int) get_option( 'posts_per_page', 10 );
771	}
772
773	if ( $settings['show_pagination'] ) {
774	$args['paged'] = max( 1, (int) get_query_var( 'paged' ), (int) get_query_var( 'page' ) );
775	}
776
777	$this->_query = new \WP_Query( $args );
778	}
779
780	public function render_author() {
781
782	if ( ! $this->get_settings( 'show_author' ) ) {
783	return;
784	}
785
786	?>
787	<div class="upk-author">
788	<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) ?>">
789	<?php echo esc_html( get_the_author() ) ?>
790	</a>
791	</div>
792
793	<?php
794	}
795
796	public function render_date() {
797	$settings = $this->get_settings_for_display();
798
799	if ( ! $this->get_settings( 'show_date' ) ) {
800	return;
801	}
802
803	?>
804	<div class="upk-date-wrap">
805	<span>
806	<?php if ($settings['human_diff_time'] == 'yes') {
807	echo esc_html( ultimate_post_kit_post_time_diff( ( $settings['human_diff_time_short'] == 'yes' ) ? 'short' : '' ) );
808	} else {
809	echo get_the_date();
810	} ?>
811	</span>
812	</div>
813	<?php if ($settings['show_time']) : ?>
814	<div class="upk-post-time">
815	<i class="upk-icon-clock" aria-hidden="true"></i>
816	<?php echo esc_html( get_the_time() ); ?>
817	</div>
818	<?php endif; ?>
819
820	<?php
821	}
822
823	public function render_post_grid_item( $post_id, $image_size ) {
824	$settings = $this->get_settings_for_display();
825
826	if ( 'yes' == $settings['global_link'] ) {
827
828	$this->add_render_attribute( 'list-item', 'onclick', "window.open('" . esc_url( get_permalink() ) . "', '_self')", true );
829	}
830	$this->add_render_attribute( 'list-item', 'class', 'upk-item', true );
831
832	?>
833	<div <?php $this->print_render_attribute_string( 'list-item' ); ?>>
834
835	<div class="upk-content-wrap">
836	<?php $this->render_date(); ?>
837	<div class="upk-inner-content">
838	<?php $this->render_title(substr($this->get_name(), 4)); ?>
839	<div class="upk-meta">
840	<?php $this->render_category(); ?>
841
842	<?php if ($settings['show_author']) : ?>
843	<div data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
844	<?php $this->render_author(); ?>
845	</div>
846	<?php endif; ?>
847	<?php if (_is_upk_pro_activated()) :
848	if ('yes' === $settings['show_reading_time']) : ?>
849	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
850	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
851	</div>
852	<?php endif; ?>
853	<?php endif; ?>
854	</div>
855	</div>
856	</div>
857	<?php if ( 'yes' == $settings['show_image'] ) : ?>
858	<div class="upk-image-wrap">
859	<?php $this->render_image( get_post_thumbnail_id( $post_id ), $image_size ); ?>
860	</div>
861	<?php endif; ?>
862	</div>
863
864	<?php
865	}
866
867	protected function render() {
868	$settings = $this->get_settings_for_display();
869
870	$this->query_posts( $settings['item_limit']['size'] );
871	$wp_query = $this->get_query();
872
873	if ( ! $wp_query->found_posts ) {
874	return;
875	}
876	$this->add_render_attribute( 'list-wrap', 'class', 'upk-exotic-list upk-image-direction-' . $settings['image_direction_style']);
877
878	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
879	$this->add_render_attribute( 'list-wrap', 'class', 'upk-in-animation' );
880	if (isset($settings['upk_in_animation_delay']['size'])) {
881	$this->add_render_attribute( 'list-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size'] );
882	}
883	}
884
885	?>
886	<div <?php $this->print_render_attribute_string('list-wrap'); ?>>
887
888	<?php while ( $wp_query->have_posts() ) :
889	$wp_query->the_post();
890
891	$thumbnail_size = $settings['primary_thumbnail_size'];
892
893	?>
894
895	<?php $this->render_post_grid_item( get_the_ID(), $thumbnail_size ); ?>
896
897	<?php endwhile; ?>
898	</div>
899
900	<?php
901
902	if ( $settings['show_pagination'] ) { ?>
903	<div class="ep-pagination">
904	<?php ultimate_post_kit_post_pagination( $wp_query, $this->get_id() ); ?>
905	</div>
906	<?php
907	}
908	wp_reset_postdata();
909	}
910	}
911