ultimate-post-kit / modules / maple-grid / widgets / maple-grid.php

maple-grid.php in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets 4.1.2, at modules/maple-grid/widgets/maple-grid.php

1,475 lines 43.7 KB

Raw Download Zip

1	<?php
2
3	namespace UltimatePostKit\Modules\MapleGrid\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 Maple_Grid 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-maple-grid';
31	}
32
33	public function get_title() {
34	return BDTUPK . esc_html__('Maple Grid', 'ultimate-post-kit');
35	}
36
37	public function get_icon() {
38	return 'upk-widget-icon upk-icon-maple-grid';
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', 'maple'];
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-maple-grid'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->upk_is_edit_mode()) {
59	return ['upk-all-scripts'];
60	} else {
61	return ['upk-ajax-loadmore'];
62	}
63	}
64
65	public function get_custom_help_url() {
66	return 'https://youtu.be/teraPP36sgQ';
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_control(
87	'grid_style',
88	[
89	'label' => esc_html__('Layout Style', 'ultimate-post-kit'),
90	'type' => Controls_Manager::SELECT,
91	'default' => '1',
92	'options' => [
93	'1' => esc_html__('Style 01', 'ultimate-post-kit'),
94	'2' => esc_html__('Style 02', 'ultimate-post-kit'),
95	'3' => esc_html__('Style 03', 'ultimate-post-kit'),
96	'4' => esc_html__('Style 04', 'ultimate-post-kit'),
97	'5' => esc_html__('Style 05', 'ultimate-post-kit'),
98	],
99	]
100	);
101
102	$column_size = apply_filters('upk_column_size', '');
103
104	$this->add_responsive_control(
105	'columns',
106	[
107	'label' => __('Columns', 'ultimate-post-kit') . BDTUPK_PC,
108	'type' => Controls_Manager::SELECT,
109	'default' => '2',
110	'tablet_default' => '2',
111	'mobile_default' => '1',
112	'options' => [
113	'1' => '1',
114	'2' => '2',
115	'3' => '3',
116	'4' => '4',
117	'5' => '5',
118	'6' => '6',
119	],
120	'selectors' => [
121	'{{WRAPPER}} .upk-maple-grid .upk-style-3, {{WRAPPER}} .upk-maple-grid .upk-style-4' => $column_size,
122	],
123	'condition' => [
124	'grid_style' => ['3', '4']
125	],
126	'classes' => BDTUPK_IS_PC
127	]
128	);
129
130	$this->add_responsive_control(
131	'row_gap',
132	[
133	'label' => esc_html__('Row Gap', 'ultimate-post-kit'),
134	'type' => Controls_Manager::SLIDER,
135	'selectors' => [
136	'{{WRAPPER}} .upk-maple-grid .upk-post-grid' => 'grid-row-gap: {{SIZE}}{{UNIT}};',
137	]
138	]
139	);
140
141	$this->add_responsive_control(
142	'column_gap',
143	[
144	'label' => esc_html__('Column Gap', 'ultimate-post-kit'),
145	'type' => Controls_Manager::SLIDER,
146	'selectors' => [
147	'{{WRAPPER}} .upk-maple-grid .upk-post-grid' => 'grid-column-gap: {{SIZE}}{{UNIT}};',
148	]
149	]
150	);
151
152	$this->add_responsive_control(
153	'primary_item_height',
154	[
155	'label' => esc_html__('Primary Image Height', 'ultimate-post-kit'),
156	'type' => Controls_Manager::SLIDER,
157	'range' => [
158	'px' => [
159	'min' => 100,
160	'max' => 800,
161	],
162	],
163	'selectors' => [
164	'{{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+1) .upk-main-image .upk-img, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+2) .upk-main-image .upk-img, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+1) .upk-main-image .upk-img, {{WRAPPER}} .upk-maple-grid .upk-style-4 .upk-item:nth-child(n+1) .upk-main-image .upk-img, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+3) .upk-main-image .upk-img, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+1) .upk-main-image .upk-img' => 'height: {{SIZE}}px;',
165	],
166	'condition' => [
167	'grid_style' => ['1', '2', '4', '5']
168	]
169	]
170	);
171
172	$this->add_responsive_control(
173	'secondary_image_height',
174	[
175	'label' => esc_html__('Secondary Image Height', 'ultimate-post-kit'),
176	'type' => Controls_Manager::SLIDER,
177	'range' => [
178	'px' => [
179	'min' => 100,
180	'max' => 800,
181	],
182	],
183	'selectors' => [
184	'{{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+3) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+6) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+2) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+3) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+2) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-3 .upk-item:nth-child(n+1) .upk-main-image' => 'height: {{SIZE}}px;',
185	],
186	'condition' => [
187	'grid_style!' => ['4']
188	]
189	]
190	);
191
192	$this->add_responsive_control(
193	'secondary_image_width',
194	[
195	'label' => esc_html__('Secondary Image Width', 'ultimate-post-kit'),
196	'type' => Controls_Manager::SLIDER,
197	'range' => [
198	'px' => [
199	'min' => 100,
200	'max' => 800,
201	],
202	],
203	'selectors' => [
204	'{{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+3) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+6) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+2) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+3) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+2) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+4) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+5) .upk-main-image, {{WRAPPER}} .upk-maple-grid .upk-style-3 .upk-item:nth-child(n+1) .upk-main-image' => 'width: {{SIZE}}px;',
205	],
206	'condition' => [
207	'grid_style!' => ['4']
208	]
209	]
210	);
211
212	$this->add_group_control(
213	Group_Control_Image_Size::get_type(),
214	[
215	'name' => 'primary_thumbnail',
216	'exclude' => ['custom'],
217	'default' => 'medium',
218	]
219	);
220
221	$this->add_control(
222	'content_alignment',
223	[
224	'label' => __('Alignment', 'ultimate-post-kit'),
225	'type' => Controls_Manager::CHOOSE,
226	'options' => [
227	'left' => [
228	'title' => __('Left', 'ultimate-post-kit'),
229	'icon' => 'eicon-text-align-left',
230	],
231	'center' => [
232	'title' => __('Center', 'ultimate-post-kit'),
233	'icon' => 'eicon-text-align-center',
234	],
235	'right' => [
236	'title' => __('Right', 'ultimate-post-kit'),
237	'icon' => 'eicon-text-align-right',
238	],
239	],
240	'selectors' => [
241	'{{WRAPPER}} .upk-maple-grid .upk-content-inner' => 'text-align: {{VALUE}};',
242	],
243	'prefix_class' => 'upk-maple-content--',
244	'render_type' => 'template'
245	]
246	);
247
248	$this->end_controls_section();
249
250	// Query Settings
251	$this->start_controls_section(
252	'section_post_query_builder',
253	[
254	'label' => __('Query', 'ultimate-post-kit'),
255	'tab' => Controls_Manager::TAB_CONTENT,
256	]
257	);
258
259	$this->add_control(
260	'item_limit',
261	[
262	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
263	'type' => Controls_Manager::SLIDER,
264	'range' => [
265	'px' => [
266	'min' => 0,
267	'max' => 24,
268	'step' => 6
269	],
270	],
271	'default' => [
272	'size' => 6,
273	],
274	'condition' => [
275	'grid_style!' => ['2', '5']
276	]
277	]
278	);
279
280	$this->add_control(
281	'item_limit_2',
282	[
283	'label' => esc_html__('Item Limit', 'ultimate-post-kit'),
284	'type' => Controls_Manager::SLIDER,
285	'range' => [
286	'px' => [
287	'min' => 0,
288	'max' => 20,
289	'step' => 5
290	],
291	],
292	'default' => [
293	'size' => 5,
294	],
295	'condition' => [
296	'grid_style' => ['2', '5']
297	]
298	]
299	);
300
301	$this->register_query_builder_controls();
302
303	$this->end_controls_section();
304
305	$this->start_controls_section(
306	'section_content_additional',
307	[
308	'label' => esc_html__('Additional Options', 'ultimate-post-kit'),
309	]
310	);
311
312	//Global Title Controls
313	$this->register_title_controls();
314
315	$this->add_control(
316	'show_excerpt',
317	[
318	'label' => esc_html__('Show Text', 'ultimate-post-kit'),
319	'type' => Controls_Manager::SWITCHER,
320	'default' => 'yes',
321	'condition' => [
322	'grid_style!' => '3'
323	]
324	]
325	);
326
327	$this->add_control(
328	'excerpt_length',
329	[
330	'label' => esc_html__('Text Limit', 'ultimate-post-kit'),
331	'description' => esc_html__('It\'s just work for main content, but not working with excerpt. If you set 0 so you will get full main content.', 'ultimate-post-kit'),
332	'type' => Controls_Manager::NUMBER,
333	'default' => 30,
334	'condition' => [
335	'show_excerpt' => 'yes',
336	'grid_style!' => '3'
337	],
338	]
339	);
340	$this->add_control(
341	'ellipsis',
342	[
343	'label' => esc_html__('Ellipsis', 'ultimate-post-kit'),
344	'type' => Controls_Manager::TEXT,
345	'condition' => [
346	'show_excerpt' => 'yes',
347	'excerpt_length!' => [0, ''],
348	'grid_style!' => '3'
349	],
350	'ai' => [
351	'active' => false,
352	],
353	]
354	);
355
356	$this->add_control(
357	'strip_shortcode',
358	[
359	'label' => esc_html__('Strip Shortcode', 'ultimate-post-kit'),
360	'type' => Controls_Manager::SWITCHER,
361	'default' => 'yes',
362	'condition' => [
363	'show_excerpt' => 'yes',
364	'grid_style!' => '3'
365	],
366	]
367	);
368
369	$this->add_control(
370	'show_author_avatar',
371	[
372	'label' => esc_html__('Show Author Avatar', 'ultimate-post-kit'),
373	'type' => Controls_Manager::SWITCHER,
374	'default' => 'yes',
375	'condition' => [
376	'grid_style!' => '3'
377	]
378	]
379	);
380
381	$this->add_control(
382	'show_author_name',
383	[
384	'label' => esc_html__('Show Author Name', 'ultimate-post-kit'),
385	'type' => Controls_Manager::SWITCHER,
386	'default' => 'yes',
387	'condition' => [
388	'grid_style!' => '3'
389	]
390	]
391	);
392
393	$this->add_control(
394	'show_category',
395	[
396	'label' => esc_html__('Show Category', 'ultimate-post-kit'),
397	'type' => Controls_Manager::SWITCHER,
398	'default' => 'yes',
399	'condition' => [
400	'grid_style!' => '3'
401	]
402	]
403	);
404
405	$this->add_control(
406	'show_post_format',
407	[
408	'label' => esc_html__('Show Post Format', 'ultimate-post-kit'),
409	'type' => Controls_Manager::SWITCHER,
410	'default' => 'yes',
411	'condition' => [
412	'grid_style!' => '3'
413	]
414	]
415	);
416
417	//Global Date Controls
418	$this->register_date_controls();
419
420	//Global Reading Time Controls
421	$this->register_reading_time_controls();
422
423	$this->add_control(
424	'meta_separator',
425	[
426	'label' => __('Separator', 'ultimate-post-kit'),
427	'type' => Controls_Manager::TEXT,
428	'default' => '-',
429	'label_block' => false,
430	]
431	);
432
433	$this->add_control(
434	'show_pagination',
435	[
436	'label' => esc_html__('Show Pagination', 'ultimate-post-kit'),
437	'type' => Controls_Manager::SWITCHER,
438	'separator' => 'before'
439	]
440	);
441
442	//Global Ajax Controls
443	$this->register_ajax_loadmore_controls();
444
445	$this->add_control(
446	'global_link',
447	[
448	'label' => __('Item Wrapper Link', 'ultimate-post-kit'),
449	'type' => Controls_Manager::SWITCHER,
450	'prefix_class' => 'upk-global-link-',
451	'description' => __('Be aware! When Item Wrapper Link activated then title link and read more link will not work', 'ultimate-post-kit'),
452	'separator' => 'before'
453	]
454	);
455
456	$this->end_controls_section();
457
458	$this->start_controls_section(
459	'upk_section_style',
460	[
461	'label' => esc_html__('Items', 'ultimate-post-kit'),
462	'tab' => Controls_Manager::TAB_STYLE,
463	]
464	);
465
466	$this->add_group_control(
467	Group_Control_Border::get_type(),
468	[
469	'name' => 'item_border',
470	'label' => __('Border', 'ultimate-post-kit'),
471	'placeholder' => '1px',
472	'default' => '1px',
473	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item',
474	]
475	);
476
477	$this->add_responsive_control(
478	'item_border_radius',
479	[
480	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
481	'type' => Controls_Manager::DIMENSIONS,
482	'size_units' => ['px', '%'],
483	'selectors' => [
484	'{{WRAPPER}} .upk-maple-grid .upk-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
485	],
486	]
487	);
488
489	$this->add_responsive_control(
490	'content_padding',
491	[
492	'label' => __('Content Padding', 'ultimate-post-kit'),
493	'type' => Controls_Manager::DIMENSIONS,
494	'size_units' => ['px', 'em', '%'],
495	'selectors' => [
496	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
497	],
498	]
499	);
500
501	$this->add_group_control(
502	Group_Control_Background::get_type(),
503	[
504	'name' => 'itam_background',
505	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item',
506	]
507	);
508
509	$this->add_control(
510	'item_image_heading',
511	[
512	'label' => esc_html__('Image', 'ultimate-post-kit'),
513	'type' => Controls_Manager::HEADING,
514	'separator' => 'before'
515	]
516	);
517
518	$this->add_responsive_control(
519	'item_image_border_radius',
520	[
521	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
522	'type' => Controls_Manager::DIMENSIONS,
523	'size_units' => ['px', '%'],
524	'selectors' => [
525	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-main-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
526	],
527	]
528	);
529
530	$this->end_controls_section();
531
532	$this->start_controls_section(
533	'section_style_title',
534	[
535	'label' => esc_html__('Title', 'ultimate-post-kit'),
536	'tab' => Controls_Manager::TAB_STYLE,
537	'condition' => [
538	'show_title' => 'yes',
539	],
540	]
541	);
542
543	$this->add_control(
544	'title_style',
545	[
546	'label' => esc_html__('Style', 'ultimate-post-kit'),
547	'type' => Controls_Manager::SELECT,
548	'default' => 'underline',
549	'options' => [
550	'' => esc_html__('Default', 'ultimate-post-kit'),
551	'underline' => esc_html__('Underline', 'ultimate-post-kit'),
552	'middle-underline' => esc_html__('Middle Underline', 'ultimate-post-kit'),
553	'overline' => esc_html__('Overline', 'ultimate-post-kit'),
554	'middle-overline' => esc_html__('Middle Overline', 'ultimate-post-kit'),
555	],
556	]
557	);
558
559	$this->add_control(
560	'title_color',
561	[
562	'label' => esc_html__('Color', 'ultimate-post-kit'),
563	'type' => Controls_Manager::COLOR,
564	'selectors' => [
565	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a' => 'color: {{VALUE}};',
566	],
567	]
568	);
569
570	$this->add_control(
571	'title_hover_color',
572	[
573	'label' => esc_html__('Hover Color', 'ultimate-post-kit'),
574	'type' => Controls_Manager::COLOR,
575	'selectors' => [
576	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a:hover' => 'color: {{VALUE}};',
577	],
578	]
579	);
580
581	$this->add_responsive_control(
582	'title_spacing',
583	[
584	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
585	'type' => Controls_Manager::SLIDER,
586	'range' => [
587	'px' => [
588	'min' => 0,
589	'max' => 50,
590	'step' => 2,
591	],
592	],
593	'selectors' => [
594	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
595	],
596	]
597	);
598
599	$this->add_group_control(
600	Group_Control_Typography::get_type(),
601	[
602	'name' => 'title_typography',
603	'label' => esc_html__('Typography', 'ultimate-post-kit'),
604	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-title',
605	]
606	);
607
608	$this->add_group_control(
609	Group_Control_Typography::get_type(),
610	[
611	'name' => 'secondary_title_typography',
612	'label' => esc_html__('Secondary Typography', 'ultimate-post-kit'),
613	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+3) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+4) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+5) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-1 .upk-item:nth-child(6n+6) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+2) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+3) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-2 .upk-item:nth-child(5n+5) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+2) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+4) .upk-title, {{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+5) .upk-title',
614	]
615	);
616
617	$this->add_control(
618	'title_advanced_style',
619	[
620	'label' => esc_html__('Advanced Style', 'ultimate-post-kit'),
621	'type' => Controls_Manager::SWITCHER,
622	]
623	);
624
625	$this->add_control(
626	'title_background',
627	[
628	'label' => esc_html__('Background Color', 'ultimate-post-kit'),
629	'type' => Controls_Manager::COLOR,
630	'selectors' => [
631	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a' => 'background-color: {{VALUE}};',
632	],
633	'condition' => [
634	'title_advanced_style' => 'yes'
635	]
636	]
637	);
638
639	$this->add_group_control(
640	Group_Control_Text_Shadow::get_type(),
641	[
642	'name' => 'title_text_shadow',
643	'label' => __('Text Shadow', 'ultimate-post-kit'),
644	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a',
645	'condition' => [
646	'title_advanced_style' => 'yes'
647	]
648	]
649	);
650
651	$this->add_group_control(
652	Group_Control_Border::get_type(),
653	[
654	'name' => 'title_border',
655	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a',
656	'condition' => [
657	'title_advanced_style' => 'yes'
658	]
659	]
660	);
661
662	$this->add_responsive_control(
663	'title_border_radius',
664	[
665	'label' => __('Border Radius', 'ultimate-post-kit'),
666	'type' => Controls_Manager::DIMENSIONS,
667	'size_units' => ['px', '%'],
668	'selectors' => [
669	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
670	],
671	'condition' => [
672	'title_advanced_style' => 'yes'
673	]
674	]
675	);
676
677	$this->add_group_control(
678	Group_Control_Box_Shadow::get_type(),
679	[
680	'name' => 'title_box_shadow',
681	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a',
682	'condition' => [
683	'title_advanced_style' => 'yes'
684	]
685	]
686	);
687
688	$this->add_responsive_control(
689	'title_text_padding',
690	[
691	'label' => __('Padding', 'ultimate-post-kit'),
692	'type' => Controls_Manager::DIMENSIONS,
693	'size_units' => ['px', 'em', '%'],
694	'selectors' => [
695	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-title a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
696	],
697	'condition' => [
698	'title_advanced_style' => 'yes'
699	]
700	]
701	);
702
703	$this->end_controls_section();
704
705	$this->start_controls_section(
706	'section_style_text',
707	[
708	'label' => esc_html__('Text', 'ultimate-post-kit'),
709	'tab' => Controls_Manager::TAB_STYLE,
710	'condition' => [
711	'show_excerpt' => 'yes',
712	'grid_style!' => '3'
713	],
714	]
715	);
716
717	$this->add_control(
718	'text_color',
719	[
720	'label' => esc_html__('Color', 'ultimate-post-kit'),
721	'type' => Controls_Manager::COLOR,
722	'selectors' => [
723	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-text' => 'color: {{VALUE}};',
724	],
725	]
726	);
727
728	$this->add_group_control(
729	Group_Control_Typography::get_type(),
730	[
731	'name' => 'text_typography',
732	'label' => esc_html__('Typography', 'ultimate-post-kit'),
733	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-text',
734	]
735	);
736
737	$this->end_controls_section();
738
739	$this->start_controls_section(
740	'section_style_meta',
741	[
742	'label' => esc_html__('Meta', 'ultimate-post-kit'),
743	'tab' => Controls_Manager::TAB_STYLE,
744	'conditions' => [
745	'relation' => 'or',
746	'terms' => [
747	[
748	'name' => 'show_author_avatar',
749	'value' => 'yes'
750	],
751	[
752	'name' => 'show_author_name',
753	'value' => 'yes'
754	],
755	[
756	'name' => 'show_date',
757	'value' => 'yes'
758	]
759	]
760	],
761	]
762	);
763
764	$this->add_control(
765	'meta_color',
766	[
767	'label' => esc_html__('Text Color', 'ultimate-post-kit'),
768	'type' => Controls_Manager::COLOR,
769	'selectors' => [
770	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta *' => 'color: {{VALUE}};',
771	],
772	]
773	);
774
775	$this->add_control(
776	'meta_hover_color',
777	[
778	'label' => esc_html__('Hover Text Color', 'ultimate-post-kit'),
779	'type' => Controls_Manager::COLOR,
780	'selectors' => [
781	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta .author-name:hover' => 'color: {{VALUE}};',
782	],
783	'condition' => [
784	'grid_style!' => '3'
785	],
786	]
787	);
788
789	// $this->add_control(
790	// 'meta_divider_color',
791	// [
792	// 'label' => esc_html__('Divider Color', 'ultimate-post-kit'),
793	// 'type' => Controls_Manager::COLOR,
794	// 'selectors' => [
795	// '{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta .upk-blog-date:before' => 'background: {{VALUE}};',
796	// ],
797	// 'condition' => [
798	// 'grid_style!' => '3'
799	// ],
800	// ]
801	// );
802
803	$this->add_responsive_control(
804	'avatar_spacing',
805	[
806	'label' => esc_html__('Avatar Spacing', 'ultimate-post-kit'),
807	'type' => Controls_Manager::SLIDER,
808	'range' => [
809	'px' => [
810	'min' => 0,
811	'max' => 50,
812	],
813	],
814	'selectors' => [
815	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta .upk-author img' => 'margin-right: {{SIZE}}{{UNIT}};',
816	],
817	'condition' => [
818	'grid_style!' => '3'
819	],
820	]
821	);
822
823	$this->add_responsive_control(
824	'avatar_border_radius',
825	[
826	'label' => esc_html__('Avatar Radius', 'ultimate-post-kit'),
827	'type' => Controls_Manager::DIMENSIONS,
828	'size_units' => ['px', '%'],
829	'selectors' => [
830	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta .upk-author img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
831	],
832	'condition' => [
833	'grid_style!' => '3'
834	],
835	]
836	);
837
838	$this->add_responsive_control(
839	'meta_space_between',
840	[
841	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
842	'type' => Controls_Manager::SLIDER,
843	'range' => [
844	'px' => [
845	'min' => 0,
846	'max' => 50,
847	],
848	],
849	'selectors' => [
850	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta > div:before' => 'margin: 0 {{SIZE}}{{UNIT}};',
851	],
852	]
853	);
854
855	$this->add_group_control(
856	Group_Control_Typography::get_type(),
857	[
858	'name' => 'meta_typography',
859	'label' => esc_html__('Typography', 'ultimate-post-kit'),
860	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-meta',
861	]
862	);
863
864	$this->end_controls_section();
865
866	$this->start_controls_section(
867	'section_style_category',
868	[
869	'label' => esc_html__('Category', 'ultimate-post-kit'),
870	'tab' => Controls_Manager::TAB_STYLE,
871	'condition' => [
872	'show_category' => 'yes',
873	'grid_style!' => '3'
874	],
875	]
876	);
877
878	$this->start_controls_tabs('tabs_category_style');
879
880	$this->start_controls_tab(
881	'tab_category_normal',
882	[
883	'label' => esc_html__('Normal', 'ultimate-post-kit'),
884	]
885	);
886
887	$this->add_control(
888	'category_color',
889	[
890	'label' => esc_html__('Color', 'ultimate-post-kit'),
891	'type' => Controls_Manager::COLOR,
892	'selectors' => [
893	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a' => 'color: {{VALUE}};',
894	],
895	]
896	);
897
898	$this->add_group_control(
899	Group_Control_Background::get_type(),
900	[
901	'name' => 'category_background',
902	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a',
903	]
904	);
905
906	$this->add_group_control(
907	Group_Control_Border::get_type(),
908	[
909	'name' => 'category_border',
910	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a',
911	'separator' => 'before'
912	]
913	);
914
915	$this->add_responsive_control(
916	'category_border_radius',
917	[
918	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
919	'type' => Controls_Manager::DIMENSIONS,
920	'size_units' => ['px', '%'],
921	'selectors' => [
922	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
923	],
924	]
925	);
926
927	$this->add_responsive_control(
928	'category_padding',
929	[
930	'label' => esc_html__('Padding', 'ultimate-post-kit'),
931	'type' => Controls_Manager::DIMENSIONS,
932	'size_units' => ['px', 'em', '%'],
933	'selectors' => [
934	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
935	],
936	]
937	);
938
939	$this->add_responsive_control(
940	'category_margin',
941	[
942	'label' => esc_html__('Margin', 'ultimate-post-kit'),
943	'type' => Controls_Manager::DIMENSIONS,
944	'size_units' => ['px', 'em', '%'],
945	'selectors' => [
946	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
947	],
948	]
949	);
950
951	$this->add_responsive_control(
952	'category_spacing',
953	[
954	'label' => esc_html__('Space Between', 'ultimate-post-kit'),
955	'type' => Controls_Manager::SLIDER,
956	'range' => [
957	'px' => [
958	'min' => 0,
959	'max' => 50,
960	'step' => 2,
961	],
962	],
963	'selectors' => [
964	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category' => 'gap: {{SIZE}}{{UNIT}};',
965	],
966	]
967	);
968
969	$this->add_group_control(
970	Group_Control_Box_Shadow::get_type(),
971	[
972	'name' => 'category_shadow',
973	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a',
974	]
975	);
976
977	$this->add_group_control(
978	Group_Control_Typography::get_type(),
979	[
980	'name' => 'category_typography',
981	'label' => esc_html__('Typography', 'ultimate-post-kit'),
982	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a',
983	]
984	);
985
986	$this->end_controls_tab();
987
988	$this->start_controls_tab(
989	'tab_category_hover',
990	[
991	'label' => esc_html__('Hover', 'ultimate-post-kit'),
992	]
993	);
994
995	$this->add_control(
996	'category_hover_color',
997	[
998	'label' => esc_html__('Color', 'ultimate-post-kit'),
999	'type' => Controls_Manager::COLOR,
1000	'selectors' => [
1001	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a:hover' => 'color: {{VALUE}};',
1002	],
1003	]
1004	);
1005
1006	$this->add_group_control(
1007	Group_Control_Background::get_type(),
1008	[
1009	'name' => 'category_hover_background',
1010	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a:hover',
1011	]
1012	);
1013
1014	$this->add_control(
1015	'category_hover_border_color',
1016	[
1017	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1018	'type' => Controls_Manager::COLOR,
1019	'condition' => [
1020	'category_border_border!' => '',
1021	],
1022	'selectors' => [
1023	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a:hover' => 'border-color: {{VALUE}};',
1024	],
1025	'separator' => 'before'
1026	]
1027	);
1028
1029	$this->add_group_control(
1030	Group_Control_Box_Shadow::get_type(),
1031	[
1032	'name' => 'category_shadow_hover',
1033	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-category a:hover',
1034	]
1035	);
1036
1037	$this->end_controls_tab();
1038
1039	$this->end_controls_tabs();
1040
1041	$this->end_controls_section();
1042
1043	$this->start_controls_section(
1044	'section_style_post_format',
1045	[
1046	'label' => esc_html__('Post Format', 'ultimate-post-kit'),
1047	'tab' => Controls_Manager::TAB_STYLE,
1048	'condition' => [
1049	'show_post_format' => 'yes',
1050	'grid_style!' => '3'
1051	],
1052	]
1053	);
1054
1055	$this->start_controls_tabs('tabs_post_format_style');
1056
1057	$this->start_controls_tab(
1058	'tab_post_format_normal',
1059	[
1060	'label' => esc_html__('Normal', 'ultimate-post-kit'),
1061	]
1062	);
1063
1064	$this->add_control(
1065	'post_format_color',
1066	[
1067	'label' => esc_html__('Color', 'ultimate-post-kit'),
1068	'type' => Controls_Manager::COLOR,
1069	'selectors' => [
1070	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a' => 'color: {{VALUE}};',
1071	],
1072	]
1073	);
1074
1075	$this->add_group_control(
1076	Group_Control_Background::get_type(),
1077	[
1078	'name' => 'post_format_background',
1079	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a',
1080	]
1081	);
1082
1083	$this->add_group_control(
1084	Group_Control_Border::get_type(),
1085	[
1086	'name' => 'post_format_border',
1087	'label' => __('Border', 'ultimate-post-kit'),
1088	'fields_options' => [
1089	'border' => [
1090	'default' => 'solid',
1091	],
1092	'width' => [
1093	'default' => [
1094	'top' => '5',
1095	'right' => '5',
1096	'bottom' => '5',
1097	'left' => '5',
1098	'isLinked' => false,
1099	],
1100	],
1101	'color' => [
1102	'default' => '#fff',
1103	],
1104	],
1105	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a',
1106	]
1107	);
1108
1109	$this->add_responsive_control(
1110	'post_format_border_radius',
1111	[
1112	'label' => esc_html__('Border Radius', 'ultimate-post-kit'),
1113	'type' => Controls_Manager::DIMENSIONS,
1114	'size_units' => ['px', '%'],
1115	'selectors' => [
1116	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1117	],
1118	]
1119	);
1120
1121	$this->add_responsive_control(
1122	'post_format_padding',
1123	[
1124	'label' => esc_html__('Padding', 'ultimate-post-kit'),
1125	'type' => Controls_Manager::DIMENSIONS,
1126	'size_units' => ['px', 'em', '%'],
1127	'selectors' => [
1128	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1129	],
1130	]
1131	);
1132
1133	$this->add_responsive_control(
1134	'post_format_spacing',
1135	[
1136	'label' => esc_html__('Spacing', 'ultimate-post-kit'),
1137	'type' => Controls_Manager::SLIDER,
1138	'range' => [
1139	'px' => [
1140	'min' => 10,
1141	'max' => 100,
1142	],
1143	],
1144	'selectors' => [
1145	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format' => 'right: {{SIZE}}{{UNIT}};',
1146	'{{WRAPPER}} .upk-maple-grid .upk-style-5 .upk-item:nth-child(5n+1) .upk-post-format' => 'bottom: {{SIZE}}{{UNIT}}; right: 0px !important;',
1147	],
1148	]
1149	);
1150
1151	$this->add_group_control(
1152	Group_Control_Box_Shadow::get_type(),
1153	[
1154	'name' => 'post_format_shadow',
1155	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a',
1156	]
1157	);
1158
1159	$this->add_group_control(
1160	Group_Control_Typography::get_type(),
1161	[
1162	'name' => 'post_format_typography',
1163	'label' => esc_html__('Typography', 'ultimate-post-kit'),
1164	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a',
1165	]
1166	);
1167
1168	$this->end_controls_tab();
1169
1170	$this->start_controls_tab(
1171	'tab_post_format_hover',
1172	[
1173	'label' => esc_html__('Hover', 'ultimate-post-kit'),
1174	]
1175	);
1176
1177	$this->add_control(
1178	'post_format_hover_color',
1179	[
1180	'label' => esc_html__('Color', 'ultimate-post-kit'),
1181	'type' => Controls_Manager::COLOR,
1182	'selectors' => [
1183	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a:hover' => 'color: {{VALUE}};',
1184	],
1185	]
1186	);
1187
1188	$this->add_group_control(
1189	Group_Control_Background::get_type(),
1190	[
1191	'name' => 'post_format_hover_background',
1192	'selector' => '{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a:hover',
1193	]
1194	);
1195
1196	$this->add_control(
1197	'post_format_hover_border_color',
1198	[
1199	'label' => esc_html__('Border Color', 'ultimate-post-kit'),
1200	'type' => Controls_Manager::COLOR,
1201	'condition' => [
1202	'post_format_border_border!' => '',
1203	],
1204	'selectors' => [
1205	'{{WRAPPER}} .upk-maple-grid .upk-item .upk-post-format a:hover' => 'border-color: {{VALUE}};',
1206	],
1207	]
1208	);
1209
1210	$this->end_controls_tab();
1211
1212	$this->end_controls_tabs();
1213
1214	$this->end_controls_section();
1215
1216	//Global Pagination Controls
1217	$this->register_pagination_controls();
1218
1219	//Global Ajax Loadmore Controls
1220	$this->register_ajax_loadmore_style_controls();
1221	}
1222
1223	/**
1224	* Main query render for this widget
1225	* @param $posts_per_page number item query limit
1226	*/
1227	public function query_posts($posts_per_page) {
1228
1229	$default = $this->getGroupControlQueryArgs();
1230	$args = [];
1231	if ($posts_per_page) {
1232	$args['posts_per_page'] = $posts_per_page;
1233	$args['paged'] = max(1, get_query_var('paged'), get_query_var('page'));
1234	}
1235	$args = array_merge($default, $args);
1236	$this->_query = new WP_Query($args);
1237	}
1238
1239	public function render_author() {
1240	$settings = $this->get_settings_for_display();
1241
1242	?>
1243	<?php if ($settings['show_author_avatar'] == 'yes' or $settings['show_author_name'] == 'yes') : ?>
1244	<div class="upk-author">
1245	<?php if ($settings['show_author_avatar'] == 'yes') : ?>
1246	<?php echo get_avatar(get_the_author_meta('ID'), 36); ?>
1247	<?php endif; ?>
1248
1249	<?php if ($settings['show_author_name'] == 'yes') : ?>
1250	<a class="author-name" href="<?php echo esc_url( get_author_posts_url(get_the_author_meta('ID')) ); ?>"><?php echo esc_html( get_the_author() ); ?></a>
1251	<?php endif; ?>
1252	</div>
1253	<?php endif; ?>
1254
1255	<?php
1256	}
1257
1258	public function render_date() {
1259	$settings = $this->get_settings_for_display();
1260
1261	if (!$this->get_settings('show_date')) {
1262	return;
1263	}
1264
1265	if ($settings['human_diff_time'] == 'yes') {
1266	echo esc_html( ultimate_post_kit_post_time_diff( ($settings['human_diff_time_short'] == 'yes') ? 'short' : '' ) );
1267	} else {
1268	echo get_the_date();
1269	}
1270	}
1271
1272	public function render_post_grid_item($post_id, $image_size, $excerpt_length) {
1273	$settings = $this->get_settings_for_display();
1274
1275	if ('yes' == $settings['global_link']) {
1276
1277	$this->add_render_attribute('grid-item', 'onclick', "window.open('" . esc_url(get_permalink()) . "', '_self')", true);
1278	}
1279	$this->add_render_attribute('grid-item', 'class', 'upk-item', true);
1280
1281	?>
1282	<div <?php $this->print_render_attribute_string('grid-item'); ?>>
1283	<div class="upk-item-box">
1284	<div class="upk-image-wrap">
1285	<div class="upk-main-image">
1286	<?php $this->render_image(get_post_thumbnail_id($post_id), $image_size); ?>
1287	</div>
1288
1289	<?php if ($settings['grid_style'] != '3') : ?>
1290	<?php $this->render_post_format(); ?>
1291	<?php $this->render_category(); ?>
1292	<?php endif; ?>
1293
1294	</div>
1295
1296	<div class="upk-content">
1297	<div class="upk-content-inner">
1298
1299	<?php if ($settings['show_author_avatar'] == 'yes' or $settings['show_author_name'] == 'yes' or $settings['show_date'] or $settings['show_reading_time']) : ?>
1300	<div class="upk-meta">
1301	<?php if ($settings['grid_style'] != '3') : ?>
1302	<?php $this->render_author(); ?>
1303	<?php endif; ?>
1304
1305	<?php if ($settings['show_date'] == 'yes') : ?>
1306	<div class="upk-blog-date" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1307	<div class="upk-blog-date">
1308	<a class="date" href="#">
1309	<i class="upk-icon-calendar" aria-hidden="true"></i><?php $this->render_date(); ?>
1310	</a>
1311	</div>
1312
1313	<?php if ($settings['show_time']) : ?>
1314	<div class="upk-post-time">
1315	<i class="upk-icon-clock" aria-hidden="true"></i>
1316	<?php echo esc_html( get_the_time() ); ?>
1317	</div>
1318	<?php endif; ?>
1319	</div>
1320	<?php endif; ?>
1321
1322	<?php if (_is_upk_pro_activated()) :
1323	if ('yes' === $settings['show_reading_time']) : ?>
1324	<div class="upk-reading-time" data-separator="<?php echo esc_html($settings['meta_separator']); ?>">
1325	<?php echo esc_html( ultimate_post_kit_reading_time( get_the_content(), $settings['avg_reading_speed'], $settings['hide_seconds'] ?? 'no', $settings['hide_minutes'] ?? 'no' ) ); ?>
1326	</div>
1327	<?php endif; ?>
1328	<?php endif; ?>
1329
1330	</div>
1331	<?php endif; ?>
1332
1333	<?php $this->render_title(substr($this->get_name(), 4)); ?>
1334
1335	<?php if ($settings['grid_style'] != '3') : ?>
1336	<?php $this->render_excerpt($excerpt_length); ?>
1337	<?php endif; ?>
1338	</div>
1339	</div>
1340
1341	</div>
1342	</div>
1343
1344
1345	<?php
1346	}
1347
1348	protected function render() {
1349	$settings = $this->get_settings_for_display();
1350
1351	if ($settings['grid_style'] == '2' or $settings['grid_style'] == '5') {
1352	$this->query_posts($settings['item_limit_2']['size']);
1353	} else {
1354	$this->query_posts($settings['item_limit']['size']);
1355	}
1356
1357	$wp_query = $this->get_query();
1358
1359	if (!$wp_query->found_posts) {
1360	return;
1361	}
1362
1363	$this->add_render_attribute('grid-wrap', 'class', 'upk-post-grid upk-ajax-grid-wrap');
1364	$this->add_render_attribute('grid-wrap', 'class', 'upk-style-' . $settings['grid_style']);
1365
1366	$this->add_render_attribute(
1367	[
1368	'upk-maple-grid' => [
1369	'class' => 'upk-maple-grid upk-ajax-grid',
1370	'data-loadmore' => [
1371	wp_json_encode(
1372	array_filter([
1373	'loadmore_enable' => $settings['ajax_loadmore_enable'],
1374	'loadmore_btn' => $settings['ajax_loadmore_btn'],
1375	'infinite_scroll' => $settings['ajax_loadmore_infinite_scroll'],
1376	])
1377	),
1378	],
1379	],
1380	]
1381	);
1382
1383	if ($settings['ajax_loadmore_enable'] == 'yes') {
1384	$ajax_settings = [
1385	'posts_source' => isset($settings['posts_source']) ? $settings['posts_source'] : 'post',
1386	'posts_per_page' => isset($posts_load) ? $posts_load : 6,
1387	'ajax_item_load' => isset($settings['ajax_loadmore_items']) ? $settings['ajax_loadmore_items'] : 3,
1388	'posts_selected_ids' => isset($settings['posts_selected_ids']) ? $settings['posts_selected_ids'] : '',
1389	'posts_include_by' => isset($settings['posts_include_by']) ? $settings['posts_include_by'] : [],
1390	'posts_include_author_ids' => isset($settings['posts_include_author_ids']) ? $settings['posts_include_author_ids'] : '',
1391	'posts_include_term_ids' => isset($settings['posts_include_term_ids']) ? $settings['posts_include_term_ids'] : '',
1392	'posts_exclude_by' => isset($settings['posts_exclude_by']) ? $settings['posts_exclude_by'] : [],
1393	'posts_exclude_ids' => isset($settings['posts_exclude_ids']) ? $settings['posts_exclude_ids'] : '',
1394	'posts_exclude_author_ids' => isset($settings['posts_exclude_author_ids']) ? $settings['posts_exclude_author_ids'] : '',
1395	'posts_exclude_term_ids' => isset($settings['posts_exclude_term_ids']) ? $settings['posts_exclude_term_ids'] : '',
1396	'posts_offset' => isset($settings['posts_offset']) ? $settings['posts_offset'] : 0,
1397	'posts_select_date' => isset($settings['posts_select_date']) ? $settings['posts_select_date'] : '',
1398	'posts_date_before' => isset($settings['posts_date_before']) ? $settings['posts_date_before'] : '',
1399	'posts_date_after' => isset($settings['posts_date_after']) ? $settings['posts_date_after'] : '',
1400	'posts_orderby' => isset($settings['posts_orderby']) ? $settings['posts_orderby'] : 'date',
1401	'posts_order' => isset($settings['posts_order']) ? $settings['posts_order'] : 'DESC',
1402	'posts_ignore_sticky_posts' => isset($settings['posts_ignore_sticky_posts']) ? $settings['posts_ignore_sticky_posts'] : 'no',
1403	'posts_only_with_featured_image'=> isset($settings['posts_only_with_featured_image']) ? $settings['posts_only_with_featured_image'] : 'no',
1404	// Grid Settings
1405	'show_title' => isset($settings['show_title']) ? $settings['show_title'] : 'yes',
1406	'title_tags' => isset( $settings['title_tags'] ) ? $settings['title_tags'] : 'h3',
1407	'show_excerpt' => isset($settings['show_excerpt']) ? $settings['show_excerpt'] : 'yes',
1408	'show_author_avatar' => isset($settings['show_author_avatar']) ? $settings['show_author_avatar'] : 'yes',
1409	'show_author_name' => isset($settings['show_author_name']) ? $settings['show_author_name'] : 'yes',
1410	'show_date' => isset($settings['show_date']) ? $settings['show_date'] : 'yes',
1411	'show_time' => isset($settings['show_time']) ? $settings['show_time'] : 'no',
1412	'show_category' => isset($settings['show_category']) ? $settings['show_category'] : 'yes',
1413	'show_post_format' => isset($settings['show_post_format']) ? $settings['show_post_format'] : 'yes',
1414	'show_reading_time' => isset($settings['show_reading_time']) ? $settings['show_reading_time'] : 'no',
1415	'avg_reading_speed' => isset($settings['avg_reading_speed']) ? $settings['avg_reading_speed'] : 200,
1416	'hide_seconds' => isset($settings['hide_seconds']) ? $settings['hide_seconds'] : 'no',
1417	'hide_minutes' => isset($settings['hide_minutes']) ? $settings['hide_minutes'] : 'no',
1418	'meta_separator' => isset($settings['meta_separator']) ? $settings['meta_separator'] : '\|',
1419	'human_diff_time' => isset($settings['human_diff_time']) ? $settings['human_diff_time'] : 'no',
1420	'human_diff_time_short' => isset($settings['human_diff_time_short']) ? $settings['human_diff_time_short'] : 'no',
1421	'excerpt_length' => isset($settings['excerpt_length']) ? $settings['excerpt_length'] : 20,
1422	'title_style' => isset($settings['title_style']) ? $settings['title_style'] : '',
1423	'upk_link_new_tab' => isset($settings['upk_link_new_tab']) ? $settings['upk_link_new_tab'] : 'no',
1424	'global_link' => isset($settings['global_link']) ? $settings['global_link'] : 'no',
1425	];
1426
1427	$this->add_render_attribute(
1428	[
1429	'upk-maple-grid' => [
1430	'data-settings' => [
1431	wp_json_encode($ajax_settings)
1432	],
1433	],
1434	]
1435	);
1436	}
1437
1438	if (isset($settings['upk_in_animation_show']) && ($settings['upk_in_animation_show'] == 'yes')) {
1439	$this->add_render_attribute('grid-wrap', 'class', 'upk-in-animation');
1440	if (isset($settings['upk_in_animation_delay']['size'])) {
1441	$this->add_render_attribute('grid-wrap', 'data-in-animation-delay', $settings['upk_in_animation_delay']['size']);
1442	}
1443	}
1444
1445	?>
1446	<div <?php $this->print_render_attribute_string('upk-maple-grid'); ?>>
1447	<div <?php $this->print_render_attribute_string('grid-wrap'); ?>>
1448
1449	<?php while ($wp_query->have_posts()) :
1450	$wp_query->the_post();
1451
1452	$thumbnail_size = $settings['primary_thumbnail_size'];
1453
1454	?>
1455
1456	<?php $this->render_post_grid_item(get_the_ID(), $thumbnail_size, $settings['excerpt_length']); ?>
1457
1458	<?php endwhile; ?>
1459	</div>
1460	</div>
1461
1462	<?php $this->render_ajax_loadmore(); ?>
1463
1464	<?php
1465
1466	if ($settings['show_pagination']) { ?>
1467	<div class="ep-pagination">
1468	<?php ultimate_post_kit_post_pagination($wp_query, $this->get_id()); ?>
1469	</div>
1470	<?php
1471	}
1472	wp_reset_postdata();
1473	}
1474	}
1475