PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.81
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.81
51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Blog_Posts / Blog_Posts.php

Blog_Posts.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.81, at includes/widgets/Blog_Posts/Blog_Posts.php

2,579 lines 96.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3 namespace King_Addons;
4
5 use Elementor\Controls_Manager;
6 use Elementor\Group_Control_Background;
7 use Elementor\Group_Control_Border;
8 use Elementor\Group_Control_Box_Shadow;
9 use Elementor\Group_Control_Css_Filter;
10 use Elementor\Group_Control_Typography;
11 use Elementor\Icons_Manager;
12 use Elementor\Utils;
13 use Elementor\Widget_Base;
14 use WP_Query;
15
16 if (!defined('ABSPATH')) {
17 exit; // Exit if accessed directly.
18 }
19
20
21
22 class Blog_Posts extends Widget_Base
23 {
24
25
26 public function get_name(): string
27 {
28 return 'king-addons-blog-posts';
29 }
30
31 public function get_title(): string
32 {
33 return esc_html__(' Advanced Blog Posts Carousel', 'king-addons');
34 }
35
36 public function get_icon(): string
37 {
38 return 'king-addons-icon king-addons-blog-posts';
39 }
40
41 public function get_script_depends(): array
42 {
43 return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper'];
44 }
45
46 public function get_style_depends(): array
47 {
48 return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper', KING_ADDONS_ASSETS_UNIQUE_KEY . '-blog-posts-style'];
49 }
50
51 public function get_categories(): array
52 {
53 return ['king-addons'];
54 }
55
56 public function get_keywords(): array
57 {
58 return ['card', 'carousel', 'slider', 'scroller', 'swiper', 'content', 'button', 'dot', 'dots', 'navigation',
59 'cards', 'wheel', 'touch', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link',
60 'left', 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'dragging', 'hover', 'over',
61 'hover over', 'picture', 'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons',
62 'mouseover', 'page', 'blog posts', 'kingaddons', 'king-addons', 'team', 'members', 'testimonial',
63 'testimonials', 'reviews', ' team memebers', 'drag', 'scroll', 'scrolling', 'tabs', 'tab'];
64 }
65
66 public function get_custom_help_url()
67 {
68 return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
69 }
70
71 protected function register_controls(): void
72 {
73 /** START TAB: CONTENT ===================== */
74 /** SECTION: Carousel Settings */
75 $this->start_controls_section(
76 'kng_blog_posts_content_section_caousel_settings',
77 [
78 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Carousel Settings', 'king-addons'),
79 'tab' => Controls_Manager::TAB_CONTENT,
80 ]
81 );
82
83 $this->add_control(
84 'kng_blog_posts_number_of_posts',
85 [
86 'label' => esc_html__('Number of latest posts', 'king-addons'),
87 'type' => Controls_Manager::NUMBER,
88 'min' => 1,
89 'step' => 1,
90 'default' => 5,
91 ]
92 );
93
94 $this->add_control(
95 'kng_blog_posts_number_of_words',
96 [
97 'label' => esc_html__('Trim description to a certain number of words.', 'king-addons'),
98 'type' => Controls_Manager::NUMBER,
99 'min' => 1,
100 'step' => 1,
101 'default' => 30,
102 ]
103 );
104
105 $this->add_control(
106 'kng_blog_posts_loop_switcher',
107 [
108 'label' => esc_html__('Loop Cards', 'king-addons'),
109 'type' => Controls_Manager::SWITCHER,
110 'default' => 'yes'
111 ]
112 );
113
114 $this->add_control(
115 'kng_blog_posts_rewind_switcher',
116 [
117 'label' => esc_html__('Rewind Cards', 'king-addons'),
118 'description' => esc_html__('When enabled, clicking the next navigation button when on last slide will slide back to the first slide. Clicking the prev navigation button when on first slide will slide forward to the last slide. Should not be used together with loop mode.', 'king-addons'),
119 'type' => Controls_Manager::SWITCHER
120 ]
121 );
122
123 $this->add_control(
124 'kng_blog_posts_ignore_sticky_posts_switcher',
125 [
126 'label' => esc_html__('Ignore sticky posts', 'king-addons'),
127 'description' => esc_html__('Check the page on live preview to see sticky posts.', 'king-addons'),
128 'type' => Controls_Manager::SWITCHER,
129 'default' => 'no'
130 ]
131 );
132
133 $this->add_control(
134 'kng_blog_posts_autoplay_switcher',
135 [
136 'label' => esc_html__('Autoplay Carousel Cards', 'king-addons'),
137 'type' => Controls_Manager::SWITCHER,
138 'separator' => 'before',
139 ]
140 );
141
142 $this->add_control(
143 'kng_blog_posts_autoplay_delay',
144 [
145 'label' => esc_html__('Delay between transitions (ms)', 'king-addons'),
146 'type' => Controls_Manager::NUMBER,
147 'min' => 0,
148 'step' => 10,
149 'default' => 2000,
150 'condition' => [
151 'kng_blog_posts_autoplay_switcher!' => '',
152 'kng_blog_posts_autoplay_like_ticker_switcher!' => 'yes',
153 ]
154 ]
155 );
156
157 $this->add_control(
158 'kng_blog_posts_autoplay_disableoninteraction_switcher',
159 [
160 'label' => esc_html__('Disable on interaction', 'king-addons'),
161 'description' => esc_html__('Autoplay will be disabled after user interactions (swipes), it will not be restarted every time after interaction.', 'king-addons'),
162 'type' => Controls_Manager::SWITCHER,
163 'condition' => [
164 'kng_blog_posts_autoplay_switcher!' => '',
165 ]
166 ]
167 );
168
169 $this->add_control(
170 'kng_blog_posts_autoplay_pausedonmouseenter_switcher',
171 [
172 'label' => esc_html__('Pause on mouse enter', 'king-addons'),
173 'description' => esc_html__('When enabled autoplay will be paused on pointer (mouse) enter over carousel container.', 'king-addons'),
174 'type' => Controls_Manager::SWITCHER,
175 'condition' => [
176 'kng_blog_posts_autoplay_switcher!' => '',
177 ]
178 ]
179 );
180
181 $this->add_control(
182 'kng_blog_posts_autoplay_reversedirection_switcher',
183 [
184 'label' => esc_html__('Reverse Direction', 'king-addons'),
185 'description' => esc_html__('Enables autoplay in reverse direction.', 'king-addons'),
186 'type' => Controls_Manager::SWITCHER,
187 'condition' => [
188 'kng_blog_posts_autoplay_switcher!' => '',
189 ]
190 ]
191 );
192
193 $this->add_control(
194 'kng_blog_posts_autoplay_like_ticker_switcher',
195 [
196 'label' => esc_html__('Autoplay Like Ticker (marquee effect)', 'king-addons'),
197 'description' => esc_html__('Autoscrolls cards as on ticker, also known as marquee effect.', 'king-addons'),
198 'type' => Controls_Manager::SWITCHER,
199 'condition' => [
200 'kng_blog_posts_autoplay_switcher!' => '',
201 ],
202 ]
203 );
204
205 $this->add_control(
206 'kng_blog_posts_autoplay_like_ticker_autoplay_speed',
207 [
208 'label' => esc_html__('Autoplay Speed (ms)', 'king-addons'),
209 'type' => Controls_Manager::NUMBER,
210 'min' => 0,
211 'step' => 10,
212 'default' => 6000,
213 'condition' => [
214 'kng_blog_posts_autoplay_like_ticker_switcher' => 'yes',
215 ]
216 ]
217 );
218
219 $this->add_control(
220 'kng_blog_posts_scrolling_speed',
221 [
222 'label' => esc_html__('Scrolling Speed (ms)', 'king-addons'),
223 'type' => Controls_Manager::NUMBER,
224 'min' => 0,
225 'step' => 10,
226 'default' => 600,
227 'separator' => 'before',
228 'condition' => [
229 'kng_blog_posts_autoplay_like_ticker_switcher!' => 'yes',
230 ]
231 ]
232 );
233
234 $this->end_controls_section();
235 /** END SECTION: Carousel Settings */
236
237
238 /** SECTION: Disable Card Items */
239 $this->start_controls_section(
240 'kng_blog_posts_content_section_disable_card_items',
241 [
242 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Disable Card Items', 'king-addons'),
243 'tab' => Controls_Manager::TAB_CONTENT,
244 ]
245 );
246
247 $this->add_control(
248 'kng_blog_posts_cards_image_switcher',
249 [
250 'label' => esc_html__('Disable image', 'king-addons'),
251 'type' => Controls_Manager::SWITCHER,
252 'separator' => 'before',
253 ]
254 );
255
256 $this->add_control(
257 'kng_blog_posts_cards_title_switcher',
258 [
259 'label' => esc_html__('Disable Title', 'king-addons'),
260 'type' => Controls_Manager::SWITCHER,
261 ]
262 );
263
264 $this->add_control(
265 'kng_blog_posts_cards_description_switcher',
266 [
267 'label' => esc_html__('Disable Description', 'king-addons'),
268 'type' => Controls_Manager::SWITCHER,
269 ]
270 );
271
272 $this->add_control(
273 'kng_blog_posts_cards_whole_text_container_switcher',
274 [
275 'label' => esc_html__('Disable whole text container', 'king-addons'),
276 'description' => esc_html__('Text container includes title and description.', 'king-addons'),
277 'type' => Controls_Manager::SWITCHER,
278 ]
279 );
280
281 $this->end_controls_section();
282 /** END SECTION: Disable Card Items */
283
284 /** SECTION: Card Layout */
285 $this->start_controls_section(
286 'kng_blog_posts_content_section_card_layout',
287 [
288 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Card Layout', 'king-addons'),
289 'tab' => Controls_Manager::TAB_CONTENT,
290 ]
291 );
292
293 $this->add_control(
294 'kng_blog_posts_cards_whole_card_title',
295 [
296 'label' => '<b>' . esc_html__('Whole Card', 'king-addons') . '</b>',
297 'type' => Controls_Manager::RAW_HTML,
298 ]
299 );
300
301 $this->add_responsive_control(
302 'kng_blog_posts_cards_whole_card_align_card_full_height',
303 [
304 'label' => esc_html__('Make card full height', 'king-addons'),
305 'type' => Controls_Manager::SELECT,
306 'default' => '100%',
307 'options' => [
308 '100%' => esc_html__('No', 'king-addons'),
309 'auto' => esc_html__('Yes', 'king-addons'),
310 ],
311 'selectors' => [
312 '{{WRAPPER}} .king-addons-blog-posts-card' => 'height: {{VALUE}};'
313 ],
314 ]
315 );
316
317 $this->add_responsive_control(
318 'kng_blog_posts_cards_whole_card_align_card',
319 [
320 'label' => esc_html__('Align Whole Card', 'king-addons'),
321 'type' => Controls_Manager::SELECT,
322 'options' => [
323 'unset' => esc_html__('Default', 'king-addons'),
324 'start' => esc_html__('Start', 'king-addons'),
325 'center' => esc_html__('Center', 'king-addons'),
326 'end' => esc_html__('End', 'king-addons'),
327 ],
328 'default' => 'unset',
329 'selectors' => [
330 '{{WRAPPER}} .king-addons-blog-posts-card' => 'align-self: {{VALUE}};'
331 ],
332 'condition' => [
333 'kng_blog_posts_cards_whole_card_align_card_full_height' => '100%'
334 ],
335 ]
336 );
337
338 $this->add_responsive_control(
339 'kng_blog_posts_cards_whole_card_align_card_content',
340 [
341 'label' => esc_html__('Align Card Content', 'king-addons'),
342 'type' => Controls_Manager::SELECT,
343 'options' => [
344 'unset' => esc_html__('Default', 'king-addons'),
345 'start' => esc_html__('Start', 'king-addons'),
346 'center' => esc_html__('Center', 'king-addons'),
347 'end' => esc_html__('End', 'king-addons'),
348 ],
349 'default' => 'start',
350 'selectors' => [
351 '{{WRAPPER}} .king-addons-blog-posts-card .king-addons-blog-posts-card-inner' => 'justify-content: {{VALUE}};'
352 ],
353 'condition' => [
354 'kng_blog_posts_cards_whole_card_align_card_full_height' => 'auto'
355 ],
356 ]
357 );
358
359 $this->add_control(
360 'kng_blog_posts_cards_image_container_title',
361 [
362 'label' => '<b>' . esc_html__('Image Container', 'king-addons') . '</b>',
363 'description' => esc_html__('Image container includes paddings and background color.', 'king-addons'),
364 'type' => Controls_Manager::RAW_HTML,
365 ]
366 );
367
368 $this->add_responsive_control(
369 'kng_blog_posts_cards_image_container_position',
370 [
371 'label' => esc_html__('Position', 'king-addons'),
372 'type' => Controls_Manager::CHOOSE,
373 'default' => 'column',
374 'options' => [
375 'row' => [
376 'title' => esc_html__('Left', 'king-addons'),
377 'icon' => 'eicon-h-align-left',
378 ],
379 'column' => [
380 'title' => esc_html__('Top', 'king-addons'),
381 'icon' => 'eicon-v-align-top',
382 ],
383 'column-reverse' => [
384 'title' => esc_html__('Bottom', 'king-addons'),
385 'icon' => 'eicon-v-align-bottom',
386 ],
387 'row-reverse' => [
388 'title' => esc_html__('Right', 'king-addons'),
389 'icon' => 'eicon-h-align-right',
390 ],
391 ],
392 'selectors' => [
393 '{{WRAPPER}} .king-addons-blog-posts-card-inner a' => 'flex-flow: {{VALUE}};',
394 ],
395 ]
396 );
397
398 $this->add_responsive_control(
399 'kng_blog_posts_cards_image_container_height_type',
400 [
401 'label' => esc_html__('Height', 'king-addons'),
402 'type' => Controls_Manager::SELECT,
403 'options' => [
404 'auto' => esc_html__('Auto', 'king-addons'),
405 'custom' => esc_html__('Custom (%)', 'king-addons'),
406 ],
407 'default' => 'auto',
408 'selectors' => [
409 '{{WRAPPER}} .king-addons-blog-posts-card-container-1, {{WRAPPER}} .king-addons-blog-posts-image' => 'height: {{VALUE}};',
410 ],
411 ]
412 );
413
414 $this->add_responsive_control(
415 'kng_blog_posts_cards_image_container_height',
416 [
417 'label' => esc_html__('Custom height (%)', 'king-addons'),
418 'type' => Controls_Manager::NUMBER,
419 'min' => 0,
420 'max' => 100,
421 'step' => 1,
422 'default' => 100,
423 'selectors' => [
424 '{{WRAPPER}} .king-addons-blog-posts-card-container-1, {{WRAPPER}} .king-addons-blog-posts-image' => 'height: {{SIZE}}%;'
425 ],
426 'condition' => [
427 'kng_blog_posts_cards_image_container_height_type' => 'custom'
428 ],
429 ]
430 );
431
432 $this->add_responsive_control(
433 'kng_blog_posts_cards_image_container_align_content',
434 [
435 'label' => esc_html__('Align Content', 'king-addons'),
436 'type' => Controls_Manager::SELECT,
437 'options' => [
438 'unset' => esc_html__('Default', 'king-addons'),
439 'start' => esc_html__('Start', 'king-addons'),
440 'center' => esc_html__('Center', 'king-addons'),
441 'end' => esc_html__('End', 'king-addons'),
442 ],
443 'default' => 'center',
444 'selectors' => [
445 '{{WRAPPER}} .king-addons-blog-posts-card-container-1' => 'justify-content: {{VALUE}}; align-items: {{VALUE}}; align-self: {{VALUE}};',
446 '{{WRAPPER}} .king-addons-blog-posts-image' => 'justify-content: {{VALUE}}; align-items: {{VALUE}}; align-self: {{VALUE}};'
447 ],
448 ]
449 );
450
451 $this->add_control(
452 'kng_blog_posts_cards_text_container_title',
453 [
454 'label' => '<b>' . esc_html__('Text Container', 'king-addons') . '</b>' .
455 '<div class="elementor-control-field-description">' .
456 esc_html__('Text container includes title and description.', 'king-addons') .
457 '</div>',
458 'type' => Controls_Manager::RAW_HTML,
459 'separator' => 'before',
460 ]
461 );
462
463 $this->add_responsive_control(
464 'kng_blog_posts_cards_text_container_width_type',
465 [
466 'label' => esc_html__('Width', 'king-addons'),
467 'type' => Controls_Manager::SELECT,
468 'options' => [
469 'auto' => esc_html__('Auto', 'king-addons'),
470 'custom' => esc_html__('Custom (%)', 'king-addons'),
471 ],
472 'default' => 'custom',
473 ]
474 );
475
476 $this->add_responsive_control(
477 'kng_blog_posts_cards_text_container_width',
478 [
479 'label' => esc_html__('Custom width (%)', 'king-addons'),
480 'type' => Controls_Manager::NUMBER,
481 'min' => 0,
482 'step' => 1,
483 'max' => 100,
484 'default' => 100,
485 'selectors' => [
486 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'width: {{SIZE}}%;'
487 ],
488 'condition' => [
489 'kng_blog_posts_cards_text_container_width_type' => 'custom'
490 ],
491 ]
492 );
493
494 $this->add_responsive_control(
495 'kng_blog_posts_cards_text_container_align_content',
496 [
497 'label' => esc_html__('Align Content', 'king-addons'),
498 'type' => Controls_Manager::SELECT,
499 'options' => [
500 'unset' => esc_html__('Default', 'king-addons'),
501 'start' => esc_html__('Start', 'king-addons'),
502 'center' => esc_html__('Center', 'king-addons'),
503 'end' => esc_html__('End', 'king-addons'),
504 ],
505 'default' => 'start',
506 'selectors' => [
507 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'justify-content: {{VALUE}}; align-items: {{VALUE}}; align-self: {{VALUE}};'
508 ],
509 ]
510 );
511
512 $this->end_controls_section();
513 /** END SECTION: Card Layout ===================== */
514
515 /** SECTION: Responsive Settings */
516 $this->start_controls_section(
517 'kng_blog_posts_content_section_responsive_settings',
518 [
519 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Responsive Settings', 'king-addons'),
520 'tab' => Controls_Manager::TAB_CONTENT,
521 ]
522 );
523
524 $this->add_control(
525 'kng_blog_posts_desktop_title',
526 [
527 'label' => '<b>' . esc_html__('Desktop', 'king-addons') . '</b>',
528 'type' => Controls_Manager::RAW_HTML,
529 ]
530 );
531
532 $this->add_control(
533 'kng_blog_posts_desktop_cards_per_view',
534 [
535 'label' => esc_html__('Cards per view', 'king-addons'),
536 'description' => esc_html__('The number of slides per view can be a fractional number like 4.5, 5.25, 6.45, etc., to indicate that further slides exist.', 'king-addons'),
537 'type' => Controls_Manager::NUMBER,
538 'min' => 1,
539 'step' => 0.1,
540 'default' => 4.0,
541 ]
542 );
543
544 $this->add_control(
545 'kng_blog_posts_desktop_space_between_cards',
546 [
547 'label' => esc_html__('Space between cards (px)', 'king-addons'),
548 'type' => Controls_Manager::NUMBER,
549 'min' => 0,
550 'step' => 1,
551 'default' => 30,
552 'separator' => 'after',
553 ]
554 );
555
556 $this->add_control(
557 'kng_blog_posts_tablet_title',
558 [
559 'label' => '<b>' . esc_html__('Tablet', 'king-addons') . '</b>',
560 'type' => Controls_Manager::RAW_HTML,
561 ]
562 );
563
564 $this->add_control(
565 'kng_blog_posts_tablet_cards_per_view',
566 [
567 'label' => esc_html__('Cards per view', 'king-addons'),
568 'type' => Controls_Manager::NUMBER,
569 'min' => 1,
570 'step' => 0.1,
571 'default' => 3.0,
572 ]
573 );
574
575 $this->add_control(
576 'kng_blog_posts_tablet_space_between_cards',
577 [
578 'label' => esc_html__('Space between cards (px)', 'king-addons'),
579 'type' => Controls_Manager::NUMBER,
580 'min' => 0,
581 'step' => 1,
582 'default' => 30,
583 'separator' => 'after',
584 ]
585 );
586
587 $this->add_control(
588 'kng_blog_posts_tablet_breakpoint',
589 [
590 'label' => esc_html__('Breakpoint (px)', 'king-addons'),
591 'type' => Controls_Manager::NUMBER,
592 'min' => 1,
593 'step' => 1,
594 'default' => 1024,
595 ]
596 );
597
598 $this->add_control(
599 'kng_blog_posts_mobile_title',
600 [
601 'label' => '<b>' . esc_html__('Mobile', 'king-addons') . '</b>',
602 'type' => Controls_Manager::RAW_HTML,
603 ]
604 );
605
606 $this->add_control(
607 'kng_blog_posts_mobile_cards_per_view',
608 [
609 'label' => esc_html__('Cards per view', 'king-addons'),
610 'type' => Controls_Manager::NUMBER,
611 'min' => 1,
612 'step' => 0.1,
613 'default' => 1.0,
614 ]
615 );
616
617 $this->add_control(
618 'kng_blog_posts_mobile_space_between_cards',
619 [
620 'label' => esc_html__('Space between cards (px)', 'king-addons'),
621 'type' => Controls_Manager::NUMBER,
622 'min' => 0,
623 'step' => 1,
624 'default' => 30,
625 ]
626 );
627
628 $this->add_control(
629 'kng_blog_posts_mobile_breakpoint',
630 [
631 'label' => esc_html__('Breakpoint (px)', 'king-addons'),
632 'type' => Controls_Manager::NUMBER,
633 'min' => 1,
634 'step' => 1,
635 'default' => 767,
636 ]
637 );
638
639 $this->end_controls_section();
640 /** END SECTION: Responsive Settings */
641
642 /** START SECTION: Navigation */
643 $this->start_controls_section(
644 'kng_blog_posts_content_section_nav',
645 [
646 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
647 'tab' => Controls_Manager::TAB_CONTENT,
648 ]
649 );
650
651 $this->add_control(
652 'kng_blog_posts_nav_switcher',
653 [
654 'label' => esc_html__('Enable navigation', 'king-addons'),
655 'type' => Controls_Manager::SWITCHER,
656 'default' => 'yes',
657 ]
658 );
659
660 $this->add_responsive_control(
661 'kng_blog_posts_nav_display',
662 [
663 'label' => esc_html__('Display on different screen sizes', 'king-addons'),
664 'type' => Controls_Manager::SELECT,
665 'options' => [
666 'flex' => esc_html__('Show', 'king-addons'),
667 'none' => esc_html__('Hide', 'king-addons'),
668 ],
669 'desktop_default' => 'flex',
670 'tablet_default' => 'none',
671 'mobile_default' => 'none',
672 'selectors' => [
673 '{{WRAPPER}} .king-addons-blog-posts-nav' => 'display: {{VALUE}};'
674 ],
675 'condition' => [
676 'kng_blog_posts_nav_switcher' => 'yes'
677 ]
678 ]
679 );
680
681 $this->end_controls_section();
682 /** END SECTION: Navigation */
683
684 /** START SECTION: Pagination */
685 $this->start_controls_section(
686 'kng_blog_posts_content_section_pag',
687 [
688 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
689 'tab' => Controls_Manager::TAB_CONTENT,
690 ]
691 );
692
693 $this->add_control(
694 'kng_blog_posts_pag_switcher',
695 [
696 'label' => esc_html__('Enable pagination', 'king-addons'),
697 'type' => Controls_Manager::SWITCHER,
698 'default' => 'yes',
699 ]
700 );
701
702 $this->add_control(
703 'kng_blog_posts_pag_type',
704 [
705 'label' => esc_html__('Type', 'king-addons'),
706 'type' => Controls_Manager::SELECT,
707 'options' => [
708 'bullets' => esc_html__('Bullets', 'king-addons'),
709 'progressbar' => esc_html__('Progress Bar', 'king-addons'),
710 'fraction' => esc_html__('Fraction', 'king-addons'),
711 ],
712 'default' => 'bullets',
713 'condition' => [
714 'kng_blog_posts_pag_switcher' => 'yes'
715 ]
716 ]
717 );
718
719 // position top / bottom
720 $this->add_responsive_control(
721 'kng_blog_posts_pag_progressbar_position',
722 [
723 'label' => esc_html__('Progress bar position', 'king-addons'),
724 'description' => esc_html__('Check margin settings to properly set the position of the progress bar.', 'king-addons'),
725 'type' => Controls_Manager::SELECT,
726 'options' => [
727 '0' => esc_html__('Top', 'king-addons'),
728 'unset' => esc_html__('Bottom', 'king-addons'),
729 ],
730 'default' => 'unset',
731 'selectors' => [
732 '{{WRAPPER}} .king-addons-blog-posts-pagination' => 'top: {{VALUE}}; bottom: 0;'
733 ],
734 'condition' => [
735 'kng_blog_posts_pag_type' => 'progressbar',
736 ]
737 ]
738 );
739
740 $this->add_control(
741 'kng_blog_posts_pag_clickable_switcher',
742 [
743 'label' => esc_html__('Clickable Bullets', 'king-addons'),
744 'type' => Controls_Manager::SWITCHER,
745 'default' => 'yes',
746 'condition' => [
747 'kng_blog_posts_pag_type' => 'bullets',
748 ]
749 ]
750 );
751
752 $this->add_control(
753 'kng_blog_posts_pag_dynamic_switcher',
754 [
755 'label' => esc_html__('Dynamic Bullets', 'king-addons'),
756 'description' => esc_html__('Good to enable if you use bullets pagination with a lot of cards. So it will keep only few bullets visible at the same time.', 'king-addons'),
757 'type' => Controls_Manager::SWITCHER,
758 'default' => '',
759 'condition' => [
760 'kng_blog_posts_pag_type' => 'bullets',
761 ]
762 ]
763 );
764
765 $this->add_control(
766 'kng_blog_posts_pag_dynamic_number',
767 [
768 'label' => esc_html__('Number of Dynamic Bullets', 'king-addons'),
769 'description' => esc_html__('The number of main bullets visible when Dynamic Bullets enabled.', 'king-addons'),
770 'type' => Controls_Manager::NUMBER,
771 'min' => 1,
772 'step' => 1,
773 'default' => 1,
774 'condition' => [
775 'kng_blog_posts_pag_dynamic_switcher' => 'yes',
776 'kng_blog_posts_pag_type' => 'bullets',
777 ]
778 ]
779 );
780
781 $this->add_responsive_control(
782 'kng_blog_posts_pag_display',
783 [
784 'label' => esc_html__('Display on different screen sizes', 'king-addons'),
785 'type' => Controls_Manager::SELECT,
786 'options' => [
787 'block' => esc_html__('Show', 'king-addons'),
788 'none' => esc_html__('Hide', 'king-addons'),
789 ],
790 'desktop_default' => 'block',
791 'tablet_default' => 'block',
792 'mobile_default' => 'block',
793 'selectors' => [
794 '{{WRAPPER}} .king-addons-blog-posts-pagination' => 'display: {{VALUE}};'
795 ],
796 'condition' => [
797 'kng_blog_posts_pag_switcher' => 'yes'
798 ]
799 ]
800 );
801
802 $this->end_controls_section();
803 /** END SECTION: Pagination */
804
805 /** END TAB: CONTENT ===================== */
806
807 /** START TAB: STYLE ===================== */
808 $this->start_controls_section(
809 'kng_blog_posts_style_section_image',
810 [
811 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
812 'tab' => Controls_Manager::TAB_STYLE,
813 ]
814 );
815
816 $this->add_control(
817 'kng_blog_posts_image_size',
818 [
819 'label' => esc_html__('Image Resolution', 'king-addons'),
820 'type' => Controls_Manager::SELECT,
821 'options' => [
822 'thumbnail' => esc_html__('Thumbnail', 'king-addons'),
823 'medium' => esc_html__('Medium', 'king-addons'),
824 'large' => esc_html__('Large', 'king-addons'),
825 'full' => esc_html__('Full', 'king-addons'),
826 ],
827 'default' => 'large',
828 ]
829 );
830
831 $this->add_responsive_control(
832 'kng_blog_posts_image_height_type',
833 [
834 'label' => esc_html__('Height', 'king-addons'),
835 'type' => Controls_Manager::SELECT,
836 'options' => [
837 'auto' => esc_html__('Auto', 'king-addons'),
838 'custom-px' => esc_html__('Custom (px)', 'king-addons'),
839 'custom-pct' => esc_html__('Custom (%)', 'king-addons'),
840 ],
841 'default' => 'custom-px',
842 ]
843 );
844
845 $this->add_responsive_control(
846 'kng_blog_posts_image_width_type',
847 [
848 'label' => esc_html__('Width', 'king-addons'),
849 'type' => Controls_Manager::SELECT,
850 'options' => [
851 'auto' => esc_html__('Auto', 'king-addons'),
852 'custom-pct' => esc_html__('Width (%)', 'king-addons'),
853 'custom-px' => esc_html__('Maximum Width (px)', 'king-addons'),
854 ],
855 'default' => 'auto',
856 ]
857 );
858
859 $this->add_responsive_control(
860 'kng_blog_posts_image_width_pct',
861 [
862 'label' => esc_html__('Width (%)', 'king-addons'),
863 'type' => Controls_Manager::NUMBER,
864 'min' => 0,
865 'max' => 100,
866 'step' => 1,
867 'default' => 100,
868 'selectors' => [
869 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'width: {{SIZE}}%;'
870 ],
871 'condition' => [
872 'kng_blog_posts_image_width_type' => 'custom-pct'
873 ]
874 ]
875 );
876
877 $this->add_responsive_control(
878 'kng_blog_posts_image_width_px',
879 [
880 'label' => esc_html__('Maximum Width (px)', 'king-addons'),
881 'type' => Controls_Manager::NUMBER,
882 'min' => 0,
883 'step' => 1,
884 'default' => 200,
885 'selectors' => [
886 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'max-width: {{SIZE}}px;'
887 ],
888 'condition' => [
889 'kng_blog_posts_image_width_type' => 'custom-px'
890 ]
891 ]
892 );
893
894 $this->add_responsive_control(
895 'kng_blog_posts_image_height_px',
896 [
897 'label' => esc_html__('Height (px)', 'king-addons'),
898 'type' => Controls_Manager::NUMBER,
899 'min' => 0,
900 'step' => 1,
901 'default' => 200,
902 'selectors' => [
903 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'height: {{SIZE}}px;'
904 ],
905 'condition' => [
906 'kng_blog_posts_image_height_type' => 'custom-px'
907 ]
908 ]
909 );
910
911 $this->add_responsive_control(
912 'kng_blog_posts_image_height_pct',
913 [
914 'label' => esc_html__('Height (%)', 'king-addons'),
915 'type' => Controls_Manager::NUMBER,
916 'min' => 0,
917 'step' => 1,
918 'default' => 100,
919 'selectors' => [
920 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'height: {{SIZE}}%;'
921 ],
922 'condition' => [
923 'kng_blog_posts_image_height_type' => 'custom-pct'
924 ]
925 ]
926 );
927
928 $this->add_responsive_control(
929 'kng_blog_posts_image_fit',
930 [
931 'label' => esc_html__('Image Fit', 'king-addons'),
932 'type' => Controls_Manager::SELECT,
933 'options' => [
934 'cover' => esc_html__('Cover', 'king-addons'),
935 'contain' => esc_html__('Contain', 'king-addons'),
936 ],
937 'default' => 'cover',
938 'selectors' => [
939 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'object-fit: {{VALUE}};',
940 ],
941 ]
942 );
943
944 $this->add_responsive_control(
945 'kng_blog_posts_image_fit_position',
946 [
947 'label' => esc_html__('Image Fit Position', 'king-addons'),
948 'type' => Controls_Manager::SELECT,
949 'options' => [
950 'top' => esc_html__('Top', 'king-addons'),
951 'bottom' => esc_html__('Bottom', 'king-addons'),
952 'left' => esc_html__('Left', 'king-addons'),
953 'right' => esc_html__('Right', 'king-addons'),
954 'center' => esc_html__('Center', 'king-addons'),
955 ],
956 'default' => 'center',
957 'selectors' => [
958 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'object-position: {{VALUE}};',
959 ],
960 'condition' => [
961 'kng_blog_posts_image_fit' => 'cover'
962 ]
963 ]
964 );
965
966 $this->add_control(
967 'kng_blog_posts_image_bg_color',
968 [
969 'label' => esc_html__('Background Color', 'king-addons'),
970 'type' => Controls_Manager::COLOR,
971 'default' => '',
972 'selectors' => [
973 '{{WRAPPER}} .king-addons-blog-posts-image' => 'background-color: {{VALUE}}',
974 ],
975 'separator' => 'before',
976 ]
977 );
978
979 $this->add_group_control(
980 Group_Control_Css_Filter::get_type(),
981 [
982 'label' => esc_html__('CSS Filter', 'king-addons'),
983 'name' => 'kng_blog_posts_image_css_filters',
984 'selector' => '{{WRAPPER}} .king-addons-blog-posts-image img',
985 ]
986 );
987
988 $this->add_group_control(
989 Group_Control_Css_Filter::get_type(),
990 [
991 'label' => esc_html__('CSS Filter for image on card hover', 'king-addons'),
992 'name' => 'kng_blog_posts_image_css_filters_hover',
993 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card:hover .king-addons-blog-posts-image img',
994 ]
995 );
996
997 $this->add_responsive_control(
998 'kng_blog_posts_image_transition',
999 [
1000 'label' => esc_html__('Transition duration on hover (ms)', 'king-addons'),
1001 'type' => Controls_Manager::NUMBER,
1002 'min' => 0,
1003 'step' => 10,
1004 'default' => 300,
1005 'selectors' => [
1006 '{{WRAPPER}} .king-addons-blog-posts-image img' => 'transition: all {{SIZE}}ms;'
1007 ],
1008 ]
1009 );
1010
1011 $this->add_control(
1012 'kng_blog_posts_image_scale_switcher',
1013 [
1014 'label' => esc_html__('Scale image on card hover', 'king-addons'),
1015 'type' => Controls_Manager::SWITCHER,
1016 ]
1017 );
1018
1019 $this->add_responsive_control(
1020 'kng_blog_posts_image_scale_hover',
1021 [
1022 'label' => esc_html__('Scale on hover', 'king-addons'),
1023 'type' => Controls_Manager::NUMBER,
1024 'min' => 0,
1025 'step' => 0.01,
1026 'default' => 1.3,
1027 'selectors' => [
1028 '{{WRAPPER}} .king-addons-blog-posts-card:hover .king-addons-blog-posts-image img' => 'transform: scale({{SIZE}});'
1029 ],
1030 'condition' => [
1031 'kng_blog_posts_image_scale_switcher' => 'yes',
1032 ]
1033 ]
1034 );
1035
1036 $this->add_responsive_control(
1037 'kng_blog_posts_image_padding',
1038 [
1039 'label' => esc_html__('Padding', 'king-addons'),
1040 'type' => Controls_Manager::DIMENSIONS,
1041 'size_units' => ['px', '%'],
1042 'default' => [
1043 'top' => 0,
1044 'right' => 0,
1045 'bottom' => 0,
1046 'left' => 0,
1047 'unit' => 'px',
1048 ],
1049 'selectors' => [
1050 '{{WRAPPER}} .king-addons-blog-posts-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1051 ]
1052 ]
1053 );
1054
1055 $this->add_responsive_control(
1056 'kng_blog_posts_image_margin',
1057 [
1058 'label' => esc_html__('Margin', 'king-addons'),
1059 'type' => Controls_Manager::DIMENSIONS,
1060 'size_units' => ['px', '%'],
1061 'default' => [
1062 'top' => 0,
1063 'right' => 0,
1064 'bottom' => 0,
1065 'left' => 0,
1066 'unit' => 'px',
1067 ],
1068 'selectors' => [
1069 '{{WRAPPER}} .king-addons-blog-posts-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1070 ]
1071 ]
1072 );
1073
1074 $this->add_group_control(
1075 Group_Control_Box_Shadow::get_type(),
1076 [
1077 'name' => 'kng_blog_posts_image_box_shadow',
1078 'selector' => '{{WRAPPER}} .king-addons-blog-posts-image',
1079 ]
1080 );
1081
1082 $this->add_group_control(
1083 Group_Control_Border::get_type(),
1084 [
1085 'name' => 'kng_blog_posts_image_border',
1086 'selector' => '{{WRAPPER}} .king-addons-blog-posts-image',
1087 'fields_options' => [
1088 'border' => [
1089 'default' => 'none',
1090 ],
1091 ],
1092 ]
1093 );
1094
1095 $this->add_responsive_control(
1096 'kng_blog_posts_image_border_radius',
1097 [
1098 'label' => esc_html__('Border Radius', 'king-addons'),
1099 'type' => Controls_Manager::DIMENSIONS,
1100 'size_units' => ['px', '%'],
1101 'default' => [
1102 'top' => 0,
1103 'right' => 0,
1104 'bottom' => 0,
1105 'left' => 0,
1106 'unit' => 'px',
1107 ],
1108 'selectors' => [
1109 '{{WRAPPER}} .king-addons-blog-posts-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1110 ]
1111 ]
1112 );
1113
1114 $this->end_controls_section();
1115
1116 $this->start_controls_section(
1117 'kng_blog_posts_style_section_title',
1118 [
1119 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
1120 'tab' => Controls_Manager::TAB_STYLE,
1121 ]
1122 );
1123
1124 $this->add_group_control(
1125 Group_Control_Typography::get_type(),
1126 [
1127 'name' => 'kng_blog_posts_title_typography',
1128 'selector' => '{{WRAPPER}} .king-addons-blog-posts-title',
1129 ]
1130 );
1131
1132 $this->add_control(
1133 'kng_blog_posts_title_txt_color',
1134 [
1135 'label' => esc_html__('Text Color', 'king-addons'),
1136 'type' => Controls_Manager::COLOR,
1137 'default' => '',
1138 'selectors' => [
1139 '{{WRAPPER}} .king-addons-blog-posts-title' => 'color: {{VALUE}}'
1140 ],
1141 ]
1142 );
1143
1144 $this->add_control(
1145 'kng_blog_posts_title_txt_color_hover',
1146 [
1147 'label' => esc_html__('Text Color on hover', 'king-addons'),
1148 'type' => Controls_Manager::COLOR,
1149 'default' => '',
1150 'selectors' => [
1151 '{{WRAPPER}} .king-addons-blog-posts-title:hover' => 'color: {{VALUE}}'
1152 ],
1153 ]
1154 );
1155
1156 $this->add_responsive_control(
1157 'kng_blog_posts_title_txt_color_transition',
1158 [
1159 'label' => esc_html__('Transition duration on hover (ms)', 'king-addons'),
1160 'type' => Controls_Manager::NUMBER,
1161 'min' => 0,
1162 'step' => 10,
1163 'default' => 300,
1164 'selectors' => [
1165 '{{WRAPPER}} .king-addons-blog-posts-title' => 'transition: color {{SIZE}}ms;'
1166 ],
1167 ]
1168 );
1169
1170 $this->add_control(
1171 'kng_blog_posts_title_bg_color',
1172 [
1173 'label' => esc_html__('Background Color', 'king-addons'),
1174 'type' => Controls_Manager::COLOR,
1175 'default' => '',
1176 'selectors' => [
1177 '{{WRAPPER}} .king-addons-blog-posts-title' => 'background-color: {{VALUE}}',
1178 ],
1179 ]
1180 );
1181
1182 $this->add_control(
1183 'kng_blog_posts_title_txt_align',
1184 [
1185 'label' => esc_html__('Text Align', 'king-addons'),
1186 'type' => Controls_Manager::CHOOSE,
1187 'default' => 'center',
1188 'options' => [
1189 'left' => [
1190 'title' => esc_html__('Left', 'king-addons'),
1191 'icon' => 'eicon-h-align-left',
1192 ],
1193 'center' => [
1194 'title' => esc_html__('Center', 'king-addons'),
1195 'icon' => 'eicon-h-align-center',
1196 ],
1197 'right' => [
1198 'title' => esc_html__('Right', 'king-addons'),
1199 'icon' => 'eicon-h-align-right',
1200 ],
1201 ],
1202 'selectors' => [
1203 '{{WRAPPER}} .king-addons-blog-posts-title' => 'text-align: {{VALUE}};',
1204 ]
1205 ]
1206 );
1207
1208 $this->add_responsive_control(
1209 'kng_blog_posts_title_padding',
1210 [
1211 'label' => esc_html__('Padding', 'king-addons'),
1212 'type' => Controls_Manager::DIMENSIONS,
1213 'size_units' => ['px', '%'],
1214 'default' => [
1215 'top' => 10,
1216 'right' => 10,
1217 'bottom' => 10,
1218 'left' => 10,
1219 'unit' => 'px',
1220 ],
1221 'selectors' => [
1222 '{{WRAPPER}} .king-addons-blog-posts-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1223 ]
1224 ]
1225 );
1226
1227 $this->add_responsive_control(
1228 'kng_blog_posts_title_margin',
1229 [
1230 'label' => esc_html__('Margin', 'king-addons'),
1231 'type' => Controls_Manager::DIMENSIONS,
1232 'size_units' => ['px', '%'],
1233 'default' => [
1234 'top' => 0,
1235 'right' => 0,
1236 'bottom' => 0,
1237 'left' => 0,
1238 'unit' => 'px',
1239 ],
1240 'selectors' => [
1241 '{{WRAPPER}} .king-addons-blog-posts-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1242 ]
1243 ]
1244 );
1245
1246 $this->add_group_control(
1247 Group_Control_Box_Shadow::get_type(),
1248 [
1249 'name' => 'kng_blog_posts_title_box_shadow',
1250 'selector' => '{{WRAPPER}} .king-addons-blog-posts-title',
1251 ]
1252 );
1253
1254 $this->add_group_control(
1255 Group_Control_Border::get_type(),
1256 [
1257 'name' => 'kng_blog_posts_title_border',
1258 'selector' => '{{WRAPPER}} .king-addons-blog-posts-title',
1259 'fields_options' => [
1260 'border' => [
1261 'default' => 'none',
1262 ],
1263 ],
1264 ]
1265 );
1266
1267 $this->add_responsive_control(
1268 'kng_blog_posts_title_border_radius',
1269 [
1270 'label' => esc_html__('Border Radius', 'king-addons'),
1271 'type' => Controls_Manager::DIMENSIONS,
1272 'size_units' => ['px', '%'],
1273 'default' => [
1274 'top' => 0,
1275 'right' => 0,
1276 'bottom' => 0,
1277 'left' => 0,
1278 'unit' => 'px',
1279 ],
1280 'selectors' => [
1281 '{{WRAPPER}} .king-addons-blog-posts-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1282 ]
1283 ]
1284 );
1285
1286 $this->end_controls_section();
1287
1288 $this->start_controls_section(
1289 'kng_blog_posts_style_section_description',
1290 [
1291 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
1292 'tab' => Controls_Manager::TAB_STYLE,
1293 ]
1294 );
1295
1296 $this->add_group_control(
1297 Group_Control_Typography::get_type(),
1298 [
1299 'name' => 'kng_blog_posts_description_typography',
1300 'selector' => '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover',
1301 ]
1302 );
1303
1304 $this->add_control(
1305 'kng_blog_posts_description_txt_color',
1306 [
1307 'label' => esc_html__('Text Color', 'king-addons'),
1308 'type' => Controls_Manager::COLOR,
1309 'default' => '#000000',
1310 'selectors' => [
1311 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'color: {{VALUE}}'
1312 ],
1313 ]
1314 );
1315
1316 $this->add_control(
1317 'kng_blog_posts_description_bg_color',
1318 [
1319 'label' => esc_html__('Background Color', 'king-addons'),
1320 'type' => Controls_Manager::COLOR,
1321 'default' => '',
1322 'selectors' => [
1323 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'background-color: {{VALUE}}',
1324 ],
1325 ]
1326 );
1327
1328 $this->add_control(
1329 'kng_blog_posts_description_txt_align',
1330 [
1331 'label' => esc_html__('Text Align', 'king-addons'),
1332 'type' => Controls_Manager::CHOOSE,
1333 'default' => 'center',
1334 'options' => [
1335 'left' => [
1336 'title' => esc_html__('Left', 'king-addons'),
1337 'icon' => 'eicon-h-align-left',
1338 ],
1339 'center' => [
1340 'title' => esc_html__('Center', 'king-addons'),
1341 'icon' => 'eicon-h-align-center',
1342 ],
1343 'right' => [
1344 'title' => esc_html__('Right', 'king-addons'),
1345 'icon' => 'eicon-h-align-right',
1346 ],
1347 ],
1348 'selectors' => [
1349 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'text-align: {{VALUE}};',
1350 ]
1351 ]
1352 );
1353
1354 $this->add_responsive_control(
1355 'kng_blog_posts_description_padding',
1356 [
1357 'label' => esc_html__('Padding', 'king-addons'),
1358 'type' => Controls_Manager::DIMENSIONS,
1359 'size_units' => ['px', '%'],
1360 'default' => [
1361 'top' => 10,
1362 'right' => 10,
1363 'bottom' => 10,
1364 'left' => 10,
1365 'unit' => 'px',
1366 ],
1367 'selectors' => [
1368 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1369 ]
1370 ]
1371 );
1372
1373 $this->add_responsive_control(
1374 'kng_blog_posts_description_margin',
1375 [
1376 'label' => esc_html__('Margin', 'king-addons'),
1377 'type' => Controls_Manager::DIMENSIONS,
1378 'size_units' => ['px', '%'],
1379 'default' => [
1380 'top' => 0,
1381 'right' => 0,
1382 'bottom' => 0,
1383 'left' => 0,
1384 'unit' => 'px',
1385 ],
1386 'selectors' => [
1387 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1388 ]
1389 ]
1390 );
1391
1392 $this->add_group_control(
1393 Group_Control_Box_Shadow::get_type(),
1394 [
1395 'name' => 'kng_blog_posts_description_box_shadow',
1396 'selector' => '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover',
1397 ]
1398 );
1399
1400 $this->add_group_control(
1401 Group_Control_Border::get_type(),
1402 [
1403 'name' => 'kng_blog_posts_description_border',
1404 'selector' => '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover',
1405 'fields_options' => [
1406 'border' => [
1407 'default' => 'none',
1408 ],
1409 ],
1410 ]
1411 );
1412
1413 $this->add_responsive_control(
1414 'kng_blog_posts_description_border_radius',
1415 [
1416 'label' => esc_html__('Border Radius', 'king-addons'),
1417 'type' => Controls_Manager::DIMENSIONS,
1418 'size_units' => ['px', '%'],
1419 'default' => [
1420 'top' => 0,
1421 'right' => 0,
1422 'bottom' => 0,
1423 'left' => 0,
1424 'unit' => 'px',
1425 ],
1426 'selectors' => [
1427 '{{WRAPPER}} .king-addons-blog-posts-description, {{WRAPPER}} .king-addons-blog-posts-description:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1428 ]
1429 ]
1430 );
1431
1432 $this->end_controls_section();
1433
1434 /** START SECTION: Navigation */
1435 $this->start_controls_section(
1436 'kng_blog_posts_style_section_nav',
1437 [
1438 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Navigation', 'king-addons'),
1439 'tab' => Controls_Manager::TAB_STYLE,
1440 ]
1441 );
1442
1443 $this->add_control(
1444 'kng_blog_posts_nav_icon_prev_title',
1445 [
1446 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Previous button', 'king-addons'),
1447 'type' => Controls_Manager::HEADING,
1448 ]
1449 );
1450
1451 $this->add_control(
1452 'kng_blog_posts_nav_icon_prev',
1453 [
1454 'label' => esc_html__('Icon', 'king-addons'),
1455 'type' => Controls_Manager::ICONS,
1456 'skin' => 'inline',
1457 'label_block' => false,
1458 'default' => [
1459 'value' => 'fas fa-chevron-left',
1460 'library' => 'fa-solid',
1461 ],
1462 ]
1463 );
1464
1465 $this->add_responsive_control(
1466 'kng_blog_posts_nav_margin_prev',
1467 [
1468 'label' => esc_html__('Margin', 'king-addons'),
1469 'type' => Controls_Manager::DIMENSIONS,
1470 'size_units' => ['px'],
1471 'default' => [
1472 'top' => 0,
1473 'right' => 0,
1474 'bottom' => 0,
1475 'left' => 0,
1476 'unit' => 'px',
1477 'isLinked' => false
1478 ],
1479 'selectors' => [
1480 '{{WRAPPER}} .king-addons-blog-posts-nav-prev .king-addons-blog-posts-nav-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1481 ]
1482 ]
1483 );
1484
1485
1486 $this->add_responsive_control(
1487 'kng_blog_posts_nav_prev_transform_scale',
1488 [
1489 'label' => esc_html__('Scale on hover (%)', 'king-addons'),
1490 'type' => Controls_Manager::NUMBER,
1491 'step' => 0.1,
1492 'min' => 0,
1493 'default' => 1.3,
1494 'selectors' => [
1495 '{{WRAPPER}} .king-addons-blog-posts-nav-prev:hover .king-addons-blog-posts-nav-inner' => 'transform: scale({{VALUE}});',
1496 ],
1497 ]
1498 );
1499
1500 $this->add_responsive_control(
1501 'kng_blog_posts_nav_position_v_prev',
1502 [
1503 'type' => Controls_Manager::SLIDER,
1504 'label' => esc_html__('Vertical position (%)', 'king-addons'),
1505 'size_units' => ['%'],
1506 'range' => [
1507 '%' => [
1508 'min' => 0,
1509 'max' => 100,
1510 ],
1511 ],
1512 'default' => [
1513 'unit' => '%',
1514 'size' => 50,
1515 ],
1516 'selectors' => [
1517 '{{WRAPPER}} .king-addons-blog-posts-nav-prev' => 'top: {{SIZE}}{{UNIT}};',
1518 ],
1519 ]
1520 );
1521
1522 $this->add_responsive_control(
1523 'kng_blog_posts_nav_position_h_prev',
1524 [
1525 'type' => Controls_Manager::SLIDER,
1526 'label' => esc_html__('Horizontal position (%)', 'king-addons'),
1527 'size_units' => ['%'],
1528 'range' => [
1529 '%' => [
1530 'min' => 0,
1531 'max' => 100,
1532 ],
1533 ],
1534 'default' => [
1535 'unit' => '%',
1536 'size' => 0,
1537 ],
1538 'selectors' => [
1539 '{{WRAPPER}} .king-addons-blog-posts-nav-prev' => 'left: {{SIZE}}{{UNIT}};',
1540 ],
1541 ]
1542 );
1543
1544 $this->add_control(
1545 'kng_blog_posts_nav_icon_next_title',
1546 [
1547 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Next button', 'king-addons'),
1548 'type' => Controls_Manager::HEADING,
1549 'separator' => 'before',
1550 ]
1551 );
1552
1553 $this->add_control(
1554 'kng_blog_posts_nav_icon_next',
1555 [
1556 'label' => esc_html__('Icon', 'king-addons'),
1557 'type' => Controls_Manager::ICONS,
1558 'skin' => 'inline',
1559 'label_block' => false,
1560 'default' => [
1561 'value' => 'fas fa-chevron-right',
1562 'library' => 'fa-solid',
1563 ],
1564 ]
1565 );
1566
1567 $this->add_responsive_control(
1568 'kng_blog_posts_nav_margin_next',
1569 [
1570 'label' => esc_html__('Margin', 'king-addons'),
1571 'type' => Controls_Manager::DIMENSIONS,
1572 'size_units' => ['px'],
1573 'default' => [
1574 'top' => 0,
1575 'right' => 0,
1576 'bottom' => 0,
1577 'left' => 0,
1578 'unit' => 'px',
1579 'isLinked' => false
1580 ],
1581 'selectors' => [
1582 '{{WRAPPER}} .king-addons-blog-posts-nav-next .king-addons-blog-posts-nav-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1583 ]
1584 ]
1585 );
1586
1587 $this->add_responsive_control(
1588 'kng_blog_posts_nav_next_transform_scale',
1589 [
1590 'label' => esc_html__('Scale on hover (%)', 'king-addons'),
1591 'type' => Controls_Manager::NUMBER,
1592 'step' => 0.1,
1593 'min' => 0,
1594 'default' => 1.3,
1595 'selectors' => [
1596 '{{WRAPPER}} .king-addons-blog-posts-nav-next:hover .king-addons-blog-posts-nav-inner' => 'transform: scale({{VALUE}});',
1597 ],
1598 ]
1599 );
1600
1601 $this->add_responsive_control(
1602 'kng_blog_posts_nav_position_v_next',
1603 [
1604 'type' => Controls_Manager::SLIDER,
1605 'label' => esc_html__('Vertical position (%)', 'king-addons'),
1606 'size_units' => ['%'],
1607 'range' => [
1608 '%' => [
1609 'min' => 0,
1610 'max' => 100,
1611 ],
1612 ],
1613 'default' => [
1614 'unit' => '%',
1615 'size' => 50,
1616 ],
1617 'selectors' => [
1618 '{{WRAPPER}} .king-addons-blog-posts-nav-next' => 'top: {{SIZE}}{{UNIT}};',
1619 ],
1620 ]
1621 );
1622
1623 $this->add_responsive_control(
1624 'kng_blog_posts_nav_position_h_next',
1625 [
1626 'type' => Controls_Manager::SLIDER,
1627 'label' => esc_html__('Horizontal position (%)', 'king-addons'),
1628 'size_units' => ['%'],
1629 'range' => [
1630 '%' => [
1631 'min' => 0,
1632 'max' => 100,
1633 ],
1634 ],
1635 'default' => [
1636 'unit' => '%',
1637 'size' => 100,
1638 ],
1639 'selectors' => [
1640 '{{WRAPPER}} .king-addons-blog-posts-nav-next' => 'right: calc(100% - {{SIZE}}{{UNIT}});',
1641 ],
1642 ]
1643 );
1644
1645 // common
1646 $this->add_control(
1647 'kng_blog_posts_nav_icon_common_title',
1648 [
1649 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Common settings', 'king-addons'),
1650 'type' => Controls_Manager::HEADING,
1651 'separator' => 'before',
1652 ]
1653 );
1654
1655 $this->add_responsive_control(
1656 'kng_blog_posts_nav_icon_size',
1657 [
1658 'label' => esc_html__('Icon Size', 'king-addons'),
1659 'type' => Controls_Manager::NUMBER,
1660 'step' => 1,
1661 'min' => 0,
1662 'default' => 32,
1663 'selectors' => [
1664 '{{WRAPPER}} .king-addons-blog-posts-nav i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
1665 '{{WRAPPER}} .king-addons-blog-posts-nav img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
1666 '{{WRAPPER}} .king-addons-blog-posts-nav svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
1667 ],
1668 ]
1669 );
1670
1671 $this->add_responsive_control(
1672 'kng_blog_posts_nav_transition_icon',
1673 [
1674 'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
1675 'type' => Controls_Manager::NUMBER,
1676 'min' => 0,
1677 'step' => 10,
1678 'default' => 300,
1679 'selectors' => [
1680 '{{WRAPPER}} .king-addons-blog-posts-nav i' => 'transition: all {{SIZE}}ms;',
1681 '{{WRAPPER}} .king-addons-blog-posts-nav img' => 'transition: all {{SIZE}}ms;',
1682 '{{WRAPPER}} .king-addons-blog-posts-nav svg' => 'transition: all {{SIZE}}ms;',
1683 '{{WRAPPER}} .king-addons-blog-posts-nav .king-addons-blog-posts-nav-inner' => 'transition: all {{SIZE}}ms;',
1684 ],
1685 ]
1686 );
1687
1688 $this->add_responsive_control(
1689 'kng_blog_posts_nav_padding',
1690 [
1691 'label' => esc_html__('Padding', 'king-addons'),
1692 'type' => Controls_Manager::DIMENSIONS,
1693 'size_units' => ['px', '%'],
1694 'default' => [
1695 'top' => 10,
1696 'right' => 10,
1697 'bottom' => 10,
1698 'left' => 10,
1699 'unit' => 'px',
1700 ],
1701 'selectors' => [
1702 '{{WRAPPER}} .king-addons-blog-posts-nav-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1703 ]
1704 ]
1705 );
1706
1707 $this->start_controls_tabs('kng_blog_posts_nav_tabs');
1708
1709 $this->start_controls_tab(
1710 'kng_blog_posts_nav_tab_normal',
1711 [
1712 'label' => esc_html__('Normal', 'king-addons'),
1713 ]
1714 );
1715
1716 $this->add_control(
1717 'kng_blog_posts_nav_color',
1718 [
1719 'label' => esc_html__('Color', 'king-addons'),
1720 'type' => Controls_Manager::COLOR,
1721 'default' => '#00000033',
1722 'selectors' => [
1723 '{{WRAPPER}} .king-addons-blog-posts-nav i' => 'color: {{VALUE}};',
1724 '{{WRAPPER}} .king-addons-blog-posts-nav svg' => 'fill: {{VALUE}};'
1725 ],
1726 ]
1727 );
1728
1729 $this->add_control(
1730 'kng_blog_posts_nav_bg_color',
1731 [
1732 'label' => esc_html__('Background Color', 'king-addons'),
1733 'type' => Controls_Manager::COLOR,
1734 'default' => '',
1735 'selectors' => [
1736 '{{WRAPPER}} .king-addons-blog-posts-nav-inner' => 'background-color: {{VALUE}}',
1737 ],
1738 ]
1739 );
1740
1741 $this->add_group_control(
1742 Group_Control_Box_Shadow::get_type(),
1743 [
1744 'name' => 'kng_blog_posts_nav_box_shadow',
1745 'selector' => '{{WRAPPER}} .king-addons-blog-posts-nav-inner',
1746 ]
1747 );
1748
1749 $this->add_group_control(
1750 Group_Control_Border::get_type(),
1751 [
1752 'name' => 'kng_blog_posts_nav_border',
1753 'selector' => '{{WRAPPER}} .king-addons-blog-posts-nav-inner',
1754 'fields_options' => [
1755 'border' => [
1756 'default' => 'none',
1757 ],
1758 ],
1759 ]
1760 );
1761
1762 $this->add_responsive_control(
1763 'kng_blog_posts_nav_border_radius',
1764 [
1765 'label' => esc_html__('Border Radius', 'king-addons'),
1766 'type' => Controls_Manager::DIMENSIONS,
1767 'size_units' => ['px', '%'],
1768 'default' => [
1769 'top' => 100,
1770 'right' => 100,
1771 'bottom' => 100,
1772 'left' => 100,
1773 'unit' => '%',
1774 ],
1775 'selectors' => [
1776 '{{WRAPPER}} .king-addons-blog-posts-nav-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1777 ]
1778 ]
1779 );
1780 $this->end_controls_tab();
1781
1782 $this->start_controls_tab(
1783 'kng_blog_posts_nav_tab_hover',
1784 [
1785 'label' => esc_html__('Hover', 'king-addons'),
1786 ]
1787 );
1788
1789 $this->add_control(
1790 'kng_blog_posts_nav_color_hover',
1791 [
1792 'label' => esc_html__('Color', 'king-addons'),
1793 'type' => Controls_Manager::COLOR,
1794 'selectors' => [
1795 '{{WRAPPER}} .king-addons-blog-posts-nav i:hover' => 'color: {{VALUE}};',
1796 '{{WRAPPER}} .king-addons-blog-posts-nav svg:hover' => 'fill: {{VALUE}};'
1797 ],
1798 ]
1799 );
1800
1801 $this->add_control(
1802 'kng_blog_posts_nav_bg_color_hover',
1803 [
1804 'label' => esc_html__('Background Color', 'king-addons'),
1805 'type' => Controls_Manager::COLOR,
1806 'selectors' => [
1807 '{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover' => 'background-color: {{VALUE}}',
1808 ],
1809 ]
1810 );
1811
1812 $this->add_group_control(
1813 Group_Control_Box_Shadow::get_type(),
1814 [
1815 'name' => 'kng_blog_posts_nav_box_shadow_hover',
1816 'selector' => '{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover',
1817 ]
1818 );
1819
1820 $this->add_group_control(
1821 Group_Control_Border::get_type(),
1822 [
1823 'name' => 'kng_blog_posts_nav_border_hover',
1824 'selector' => '{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover',
1825 ]
1826 );
1827
1828 $this->add_responsive_control(
1829 'kng_blog_posts_nav_border_radius_hover',
1830 [
1831 'label' => esc_html__('Border Radius', 'king-addons'),
1832 'type' => Controls_Manager::DIMENSIONS,
1833 'size_units' => ['px', '%'],
1834 'selectors' => [
1835 '{{WRAPPER}} .king-addons-blog-posts-nav-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1836 ]
1837 ]
1838 );
1839
1840 $this->end_controls_tab();
1841
1842 $this->end_controls_tabs();
1843 $this->end_controls_section();
1844 /** END SECTION: Navigation */
1845
1846 /** SECTION: Pagination */
1847 $this->start_controls_section(
1848 'kng_blog_posts_style_section_pag',
1849 [
1850 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Pagination', 'king-addons'),
1851 'tab' => Controls_Manager::TAB_STYLE,
1852 ]
1853 );
1854
1855 $this->add_control(
1856 'kng_blog_posts_pag_color',
1857 [
1858 'label' => esc_html__('Color', 'king-addons'),
1859 'type' => Controls_Manager::COLOR,
1860 'default' => '#000000',
1861 'selectors' => [
1862 '{{WRAPPER}} .king-addons-blog-posts-pagination' => '--swiper-theme-color: {{VALUE}}; --swiper-pagination-fraction-color: {{VALUE}};',
1863 ],
1864 ]
1865 );
1866
1867 $this->add_control(
1868 'kng_blog_posts_pag_color_second',
1869 [
1870 'label' => esc_html__('Second Color', 'king-addons'),
1871 'type' => Controls_Manager::COLOR,
1872 'default' => '#00000033',
1873 'selectors' => [
1874 '{{WRAPPER}} .king-addons-blog-posts-pagination' => '--swiper-pagination-progressbar-bg-color: {{VALUE}}; --swiper-pagination-bullet-inactive-color: {{VALUE}}; --swiper-pagination-bullet-inactive-opacity: 1;',
1875 ],
1876 ]
1877 );
1878
1879 $this->add_control(
1880 'kng_blog_posts_pag_bullets_title',
1881 [
1882 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Bullets type', 'king-addons'),
1883 'type' => Controls_Manager::HEADING,
1884 'separator' => 'before',
1885 ]
1886 );
1887
1888 $this->add_responsive_control(
1889 'kng_blog_posts_pag_bullets_size',
1890 [
1891 'label' => esc_html__('Size', 'king-addons'),
1892 'type' => Controls_Manager::NUMBER,
1893 'min' => 0,
1894 'step' => 1,
1895 'default' => 8,
1896 'selectors' => [
1897 '{{WRAPPER}} .king-addons-blog-posts-pagination' => '--swiper-pagination-bullet-size: {{SIZE}}px;'
1898 ],
1899 ]
1900 );
1901
1902 $this->add_responsive_control(
1903 'kng_blog_posts_pag_bullets_gap',
1904 [
1905 'label' => esc_html__('Bullets gap', 'king-addons'),
1906 'type' => Controls_Manager::NUMBER,
1907 'min' => 0,
1908 'step' => 1,
1909 'default' => 4,
1910 'selectors' => [
1911 '{{WRAPPER}} .king-addons-blog-posts-pagination' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}px;'
1912 ],
1913 ]
1914 );
1915
1916 $this->add_control(
1917 'kng_blog_posts_pag_progressbar_title',
1918 [
1919 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Progress bar type', 'king-addons'),
1920 'type' => Controls_Manager::HEADING,
1921 'separator' => 'before',
1922 ]
1923 );
1924
1925 $this->add_responsive_control(
1926 'kng_blog_posts_pag_progressbar_size',
1927 [
1928 'label' => esc_html__('Size', 'king-addons'),
1929 'type' => Controls_Manager::NUMBER,
1930 'min' => 0,
1931 'step' => 1,
1932 'default' => 4,
1933 'selectors' => [
1934 '{{WRAPPER}} .king-addons-blog-posts-pagination' => '--swiper-pagination-progressbar-size: {{SIZE}}px;'
1935 ],
1936 ]
1937 );
1938
1939 $this->add_control(
1940 'kng_blog_posts_pag_fraction_title',
1941 [
1942 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Fraction type', 'king-addons'),
1943 'type' => Controls_Manager::HEADING,
1944 'separator' => 'before',
1945 ]
1946 );
1947
1948 $this->add_group_control(
1949 Group_Control_Typography::get_type(),
1950 [
1951 'name' => 'kng_blog_posts_pag_fraction_typography',
1952 'selector' => '{{WRAPPER}} .king-addons-blog-posts-pagination.swiper-pagination-fraction',
1953 ]
1954 );
1955
1956 $this->end_controls_section();
1957 /** END SECTION: Pagination */
1958
1959 /** SECTION: Whole Carousel */
1960 $this->start_controls_section(
1961 'kng_blog_posts_style_section_whole_carousel',
1962 [
1963 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Carousel', 'king-addons'),
1964 'tab' => Controls_Manager::TAB_STYLE,
1965 ]
1966 );
1967
1968 $this->add_group_control(
1969 Group_Control_Background::get_type(),
1970 [
1971 'name' => 'kng_blog_posts_whole_carousel_bg',
1972 'selector' => '{{WRAPPER}} .king-addons-blog-posts-items'
1973 ]
1974 );
1975
1976 $this->add_responsive_control(
1977 'kng_blog_posts_whole_carousel_margin',
1978 [
1979 'label' => esc_html__('Whole carousel margin', 'king-addons'),
1980 'type' => Controls_Manager::DIMENSIONS,
1981 'size_units' => ['px', '%'],
1982 'default' => [
1983 'top' => 0,
1984 'right' => 42,
1985 'bottom' => 10,
1986 'left' => 42,
1987 'unit' => 'px',
1988 ],
1989 'tablet_default' => [
1990 'top' => 0,
1991 'right' => 0,
1992 'bottom' => 0,
1993 'left' => 0,
1994 'unit' => 'px',
1995 ],
1996 'mobile_default' => [
1997 'top' => 0,
1998 'right' => 0,
1999 'bottom' => 0,
2000 'left' => 0,
2001 'unit' => 'px',
2002 ],
2003 'selectors' => [
2004 '{{WRAPPER}} .king-addons-blog-posts-items' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2005 ]
2006 ]
2007 );
2008
2009 $this->add_responsive_control(
2010 'kng_blog_posts_whole_carousel_margin_wrapper',
2011 [
2012 'label' => esc_html__('Cards wrapper margin', 'king-addons'),
2013 'type' => Controls_Manager::DIMENSIONS,
2014 'size_units' => ['px', '%'],
2015 'default' => [
2016 'top' => 10,
2017 'right' => 0,
2018 'bottom' => 42,
2019 'left' => 0,
2020 'unit' => 'px',
2021 ],
2022 'tablet_default' => [
2023 'top' => 10,
2024 'right' => 0,
2025 'bottom' => 42,
2026 'left' => 0,
2027 'unit' => 'px',
2028 ],
2029 'mobile_default' => [
2030 'top' => 10,
2031 'right' => 0,
2032 'bottom' => 42,
2033 'left' => 0,
2034 'unit' => 'px',
2035 ],
2036 'selectors' => [
2037 '{{WRAPPER}} .king-addons-blog-posts-items .swiper-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2038 ]
2039 ]
2040 );
2041
2042 $this->add_responsive_control(
2043 'kng_blog_posts_whole_carousel_padding',
2044 [
2045 'label' => esc_html__('Padding', 'king-addons'),
2046 'type' => Controls_Manager::DIMENSIONS,
2047 'size_units' => ['px', '%'],
2048 'default' => [
2049 'top' => 0,
2050 'right' => 0,
2051 'bottom' => 0,
2052 'left' => 0,
2053 'unit' => 'px',
2054 ],
2055 'selectors' => [
2056 '{{WRAPPER}} .king-addons-blog-posts-items' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2057 ]
2058 ]
2059 );
2060
2061 $this->add_group_control(
2062 Group_Control_Box_Shadow::get_type(),
2063 [
2064 'name' => 'kng_blog_posts_whole_carousel_box_shadow',
2065 'selector' => '{{WRAPPER}} .king-addons-blog-posts-items',
2066 ]
2067 );
2068
2069 $this->add_group_control(
2070 Group_Control_Border::get_type(),
2071 [
2072 'name' => 'kng_blog_posts_whole_carousel_border',
2073 'selector' => '{{WRAPPER}} .king-addons-blog-posts-items',
2074 'fields_options' => [
2075 'border' => [
2076 'default' => 'none',
2077 ],
2078 ],
2079 ]
2080 );
2081
2082 $this->add_responsive_control(
2083 'kng_blog_posts_whole_carousel_border_radius',
2084 [
2085 'label' => esc_html__('Border Radius', 'king-addons'),
2086 'type' => Controls_Manager::DIMENSIONS,
2087 'size_units' => ['px', '%'],
2088 'default' => [
2089 'top' => 0,
2090 'right' => 0,
2091 'bottom' => 0,
2092 'left' => 0,
2093 'unit' => 'px',
2094 ],
2095 'selectors' => [
2096 '{{WRAPPER}} .king-addons-blog-posts-items' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2097 ]
2098 ]
2099 );
2100
2101 $this->end_controls_section();
2102 /** END SECTION: Whole Carousel */
2103
2104 $this->start_controls_section(
2105 'kng_blog_posts_style_section_whole_card',
2106 [
2107 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Card', 'king-addons'),
2108 'tab' => Controls_Manager::TAB_STYLE,
2109 ]
2110 );
2111
2112 $this->add_responsive_control(
2113 'kng_blog_posts_whole_card_transition',
2114 [
2115 'label' => esc_html__('Transition duration on card hover (ms)', 'king-addons'),
2116 'type' => Controls_Manager::NUMBER,
2117 'min' => 0,
2118 'step' => 10,
2119 'default' => 300,
2120 'selectors' => [
2121 '{{WRAPPER}} .king-addons-blog-posts-card-inner' => 'transition: all {{SIZE}}ms;'
2122 ],
2123 ]
2124 );
2125
2126 $this->start_controls_tabs('kng_blog_posts_whole_card_tabs');
2127
2128 $this->start_controls_tab(
2129 'kng_blog_posts_whole_card_tab_normal',
2130 [
2131 'label' => esc_html__('Normal', 'king-addons'),
2132 ]
2133 );
2134
2135 $this->add_group_control(
2136 Group_Control_Background::get_type(),
2137 [
2138 'name' => 'kng_blog_posts_whole_card_bg',
2139 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner'
2140 ]
2141 );
2142
2143 $this->add_responsive_control(
2144 'kng_blog_posts_whole_card_padding',
2145 [
2146 'label' => esc_html__('Padding', 'king-addons'),
2147 'type' => Controls_Manager::DIMENSIONS,
2148 'size_units' => ['px', '%'],
2149 'default' => [
2150 'top' => 0,
2151 'right' => 0,
2152 'bottom' => 0,
2153 'left' => 0,
2154 'unit' => 'px',
2155 ],
2156 'selectors' => [
2157 '{{WRAPPER}} .king-addons-blog-posts-card-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2158 ]
2159 ]
2160 );
2161
2162 $this->add_group_control(
2163 Group_Control_Box_Shadow::get_type(),
2164 [
2165 'name' => 'kng_blog_posts_whole_card_box_shadow',
2166 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner',
2167 ]
2168 );
2169
2170 $this->add_group_control(
2171 Group_Control_Border::get_type(),
2172 [
2173 'name' => 'kng_blog_posts_whole_card_border',
2174 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner',
2175 'fields_options' => [
2176 'border' => [
2177 'default' => 'none',
2178 ],
2179 ],
2180 ]
2181 );
2182
2183 $this->add_responsive_control(
2184 'kng_blog_posts_whole_card_border_radius',
2185 [
2186 'label' => esc_html__('Border Radius', 'king-addons'),
2187 'type' => Controls_Manager::DIMENSIONS,
2188 'size_units' => ['px', '%'],
2189 'default' => [
2190 'top' => 0,
2191 'right' => 0,
2192 'bottom' => 0,
2193 'left' => 0,
2194 'unit' => 'px',
2195 ],
2196 'selectors' => [
2197 '{{WRAPPER}} .king-addons-blog-posts-card-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2198 ]
2199 ]
2200 );
2201
2202 $this->end_controls_tab();
2203
2204 $this->start_controls_tab(
2205 'kng_blog_posts_whole_card_tab_hover',
2206 [
2207 'label' => esc_html__('Hover', 'king-addons'),
2208 ]
2209 );
2210
2211 $this->add_group_control(
2212 Group_Control_Background::get_type(),
2213 [
2214 'name' => 'kng_blog_posts_whole_card_bg_hover',
2215 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner:hover'
2216 ]
2217 );
2218
2219 $this->add_responsive_control(
2220 'kng_blog_posts_whole_card_padding_hover',
2221 [
2222 'label' => esc_html__('Padding', 'king-addons'),
2223 'type' => Controls_Manager::DIMENSIONS,
2224 'size_units' => ['px', '%'],
2225 'selectors' => [
2226 '{{WRAPPER}} .king-addons-blog-posts-card-inner:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2227 ]
2228 ]
2229 );
2230
2231 $this->add_group_control(
2232 Group_Control_Box_Shadow::get_type(),
2233 [
2234 'name' => 'kng_blog_posts_whole_card_box_shadow_hover',
2235 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner:hover',
2236 ]
2237 );
2238
2239 $this->add_group_control(
2240 Group_Control_Border::get_type(),
2241 [
2242 'name' => 'kng_blog_posts_whole_card_border_hover',
2243 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-inner:hover',
2244 ]
2245 );
2246
2247 $this->add_responsive_control(
2248 'kng_blog_posts_whole_card_border_radius_hover',
2249 [
2250 'label' => esc_html__('Border Radius', 'king-addons'),
2251 'type' => Controls_Manager::DIMENSIONS,
2252 'size_units' => ['px', '%'],
2253 'selectors' => [
2254 '{{WRAPPER}} .king-addons-blog-posts-card-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2255 ]
2256 ]
2257 );
2258
2259 $this->end_controls_tab();
2260 $this->end_controls_tabs();
2261 $this->end_controls_section();
2262
2263 $this->start_controls_section(
2264 'kng_blog_posts_style_section_whole_text_container',
2265 [
2266 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Text Container', 'king-addons'),
2267 'tab' => Controls_Manager::TAB_STYLE,
2268 ]
2269 );
2270
2271 $this->add_control(
2272 'kng_blog_posts_style_section_whole_text_container_title',
2273 [
2274 'label' => '<span class="elementor-control-field-description">' .
2275 esc_html__('Text container includes title and description.', 'king-addons') .
2276 '</span>',
2277 'type' => Controls_Manager::RAW_HTML,
2278 ]
2279 );
2280
2281 $this->add_responsive_control(
2282 'kng_blog_posts_whole_text_container_bg_color',
2283 [
2284 'label' => esc_html__('Background Color', 'king-addons'),
2285 'type' => Controls_Manager::COLOR,
2286 'default' => '',
2287 'selectors' => [
2288 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'background-color: {{VALUE}}',
2289 ],
2290 ]
2291 );
2292
2293 $this->add_responsive_control(
2294 'kng_blog_posts_whole_text_container_padding',
2295 [
2296 'label' => esc_html__('Padding', 'king-addons'),
2297 'type' => Controls_Manager::DIMENSIONS,
2298 'size_units' => ['px', '%'],
2299 'default' => [
2300 'top' => 0,
2301 'right' => 0,
2302 'bottom' => 0,
2303 'left' => 0,
2304 'unit' => 'px',
2305 ],
2306 'selectors' => [
2307 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2308 ]
2309 ]
2310 );
2311
2312 $this->add_responsive_control(
2313 'kng_blog_posts_whole_text_container_margin',
2314 [
2315 'label' => esc_html__('Margin', 'king-addons'),
2316 'type' => Controls_Manager::DIMENSIONS,
2317 'size_units' => ['px', '%'],
2318 'default' => [
2319 'top' => 0,
2320 'right' => 0,
2321 'bottom' => 0,
2322 'left' => 0,
2323 'unit' => 'px',
2324 ],
2325 'selectors' => [
2326 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2327 ]
2328 ]
2329 );
2330
2331 $this->add_group_control(
2332 Group_Control_Box_Shadow::get_type(),
2333 [
2334 'name' => 'kng_blog_posts_whole_text_container_box_shadow',
2335 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-container-2',
2336 ]
2337 );
2338
2339 $this->add_group_control(
2340 Group_Control_Border::get_type(),
2341 [
2342 'name' => 'kng_blog_posts_whole_text_container_border',
2343 'selector' => '{{WRAPPER}} .king-addons-blog-posts-card-container-2',
2344 'fields_options' => [
2345 'border' => [
2346 'default' => 'none',
2347 ],
2348 ],
2349 ]
2350 );
2351
2352 $this->add_responsive_control(
2353 'kng_blog_posts_whole_text_container_border_radius',
2354 [
2355 'label' => esc_html__('Border Radius', 'king-addons'),
2356 'type' => Controls_Manager::DIMENSIONS,
2357 'size_units' => ['px', '%'],
2358 'default' => [
2359 'top' => 0,
2360 'right' => 0,
2361 'bottom' => 0,
2362 'left' => 0,
2363 'unit' => 'px',
2364 ],
2365 'selectors' => [
2366 '{{WRAPPER}} .king-addons-blog-posts-card-container-2' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2367 ]
2368 ]
2369 );
2370
2371 $this->end_controls_section();
2372
2373 /** END TAB: STYLE ===================== */
2374 }
2375
2376 protected function render(): void
2377 {
2378 $settings = Core::displaySettings($this);
2379 $this_ID = $this->get_id();
2380
2381 $query_args = [
2382 'posts_per_page' => $settings['kng_blog_posts_number_of_posts'],
2383 'post_type' => 'post',
2384 'post_status' => 'publish',
2385 'ignore_sticky_posts' => 'yes' === $settings['kng_blog_posts_ignore_sticky_posts_switcher'],
2386 ];
2387
2388 $query = new WP_Query($query_args);
2389
2390 /** START: BLOG POSTS===================== */
2391 ?>
2392 <div class="king-addons-blog-posts-items-wrap">
2393 <div class="king-addons-blog-posts-items king-addons-blog-posts-items-<?php echo esc_attr($this_ID); ?> swiper-container swiper">
2394 <div class="swiper-wrapper<?php if ('yes' === $settings['kng_blog_posts_autoplay_like_ticker_switcher']) {
2395 echo ' king-addons-blog-posts-autoplay-like-ticker';
2396 } ?>">
2397 <?php
2398 /** Blog Item */
2399
2400 if ($query->have_posts()) {
2401
2402 while ($query->have_posts()) {
2403
2404 $query->the_post();
2405
2406 global $post;
2407
2408 $excerpt = $post->post_excerpt ? wp_trim_words($post->post_excerpt, $settings['kng_blog_posts_number_of_words'], '...') : wp_trim_words($post->post_content, $settings['kng_blog_posts_number_of_words'], '...');
2409
2410 /** open card div */
2411 echo '<div class="swiper-slide king-addons-blog-posts-card king-addons-blog-posts-cursor-pointer">';
2412
2413 /** open inner div */
2414 echo '<div class="king-addons-blog-posts-card-inner">';
2415 echo '<a href="' . esc_url(get_permalink($post->ID)) . '">';
2416
2417 // CONTAINER 1
2418 if ('yes' !== $settings['kng_blog_posts_cards_image_switcher']) {
2419 // Without a fallback, a post that has no featured image loses
2420 // the whole image block and stops lining up with the cards beside it.
2421 $thumbnail_url = has_post_thumbnail($post->ID)
2422 ? get_the_post_thumbnail_url($post->ID, $settings['kng_blog_posts_image_size'])
2423 : Utils::get_placeholder_image_src();
2424
2425 echo '<div class="king-addons-blog-posts-card-container-1">';
2426
2427 // image
2428 echo '<div class="king-addons-blog-posts-image">';
2429 echo '<img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($post->post_title) . '">';
2430 echo '</div>';
2431
2432 echo '</div>';
2433 }
2434 // END CONTAINER 1
2435
2436 // CONTAINER 2
2437 if ('yes' !== $settings['kng_blog_posts_cards_whole_text_container_switcher']) {
2438 echo '<div class="king-addons-blog-posts-card-container-2">';
2439
2440 // post title
2441 if ('yes' !== $settings['kng_blog_posts_cards_title_switcher']) {
2442 echo '<div class="king-addons-blog-posts-title">';
2443 echo esc_html($post->post_title);
2444 echo '</div>';
2445 }
2446
2447 // post description
2448 if ('yes' !== $settings['kng_blog_posts_cards_description_switcher']) {
2449 echo '<div class="king-addons-blog-posts-description">';
2450 echo esc_html($excerpt);
2451 echo '</div>';
2452 }
2453 echo '</div>';
2454 }
2455 // END CONTAINER 2
2456
2457 echo '</a>';
2458 /** close card inner div */
2459 echo '</div>';
2460
2461 /** close card div */
2462 echo '</div>';
2463 }
2464 wp_reset_postdata();
2465 }
2466 /** END: Blog Item */
2467 ?>
2468 </div>
2469 </div>
2470 <?php
2471
2472 // pagination
2473 if ('yes' === $settings['kng_blog_posts_pag_switcher']) {
2474 echo '<div class="swiper-pagination king-addons-blog-posts-pagination king-addons-blog-posts-pagination-' .
2475 esc_attr($this_ID) .
2476 (('yes' === $settings['kng_blog_posts_autoplay_like_ticker_switcher']) ? ' king-addons-blog-posts-autoplay-like-ticker-pag' : '') .
2477 '"></div>';
2478 }
2479
2480 // navigation
2481 if ('yes' === $settings['kng_blog_posts_nav_switcher']) {
2482
2483 echo '<div class="king-addons-blog-posts-nav-prev king-addons-blog-posts-nav-prev-' . esc_attr($this_ID) . ' king-addons-blog-posts-nav">';
2484 echo '<div class="king-addons-blog-posts-nav-inner">';
2485 Icons_Manager::render_icon($settings['kng_blog_posts_nav_icon_prev']);
2486 echo '</div>';
2487 echo '</div>';
2488
2489 echo '<div class="king-addons-blog-posts-nav-next king-addons-blog-posts-nav-next-' . esc_attr($this_ID) . ' king-addons-blog-posts-nav">';
2490 echo '<div class="king-addons-blog-posts-nav-inner">';
2491 Icons_Manager::render_icon($settings['kng_blog_posts_nav_icon_next']);
2492 echo '</div>';
2493 echo '</div>';
2494
2495 }
2496 ?>
2497 </div>
2498 <?php
2499
2500 $js_swiper_check_if_DOM_already_loaded = "document.readyState === 'complete'";
2501 $js_swiper_check_if_DOM_not_already_loaded = "window.addEventListener('load', function () {";
2502
2503 $js_swiper = "new Swiper('.king-addons-blog-posts-items-" . esc_js($this_ID) . "', {";
2504 $js_swiper .= "direction: 'horizontal',";
2505
2506 $js_swiper .= "slidesPerView: " . Core::jsNumber($settings, 'kng_blog_posts_desktop_cards_per_view', 4) . ",";
2507 $js_swiper .= "spaceBetween: " . Core::jsNumber($settings, 'kng_blog_posts_desktop_space_between_cards', 30) . ",";
2508
2509 // Responsive breakpoints
2510 $js_swiper .= 'breakpoints: {0: {slidesPerView: ' .
2511 Core::jsNumber($settings, 'kng_blog_posts_mobile_cards_per_view', 1) . ', spaceBetween: ' .
2512 Core::jsNumber($settings, 'kng_blog_posts_mobile_space_between_cards', 30) . '}, ';
2513 $js_swiper .=
2514 (Core::jsNumber($settings, 'kng_blog_posts_mobile_breakpoint', 767) + 1) . ': {slidesPerView: ' .
2515 Core::jsNumber($settings, 'kng_blog_posts_tablet_cards_per_view', 3) . ', spaceBetween: ' .
2516 Core::jsNumber($settings, 'kng_blog_posts_tablet_space_between_cards', 30) . '}, ';
2517 $js_swiper .=
2518 (Core::jsNumber($settings, 'kng_blog_posts_tablet_breakpoint', 1024) + 1) . ': {slidesPerView: ' .
2519 Core::jsNumber($settings, 'kng_blog_posts_desktop_cards_per_view', 4) . ', spaceBetween: ' .
2520 Core::jsNumber($settings, 'kng_blog_posts_desktop_space_between_cards', 30) . '}},';
2521
2522 // Scrolling speed
2523 if ('yes' !== $settings['kng_blog_posts_autoplay_like_ticker_switcher']) {
2524 $js_swiper .= "speed: " . Core::jsNumber($settings, 'kng_blog_posts_scrolling_speed', 600) . ",";
2525 } else {
2526 $js_swiper .= "speed: " . Core::jsNumber($settings, 'kng_blog_posts_autoplay_like_ticker_autoplay_speed', 6000) . ",";
2527 }
2528
2529 // Pagination
2530 if ('yes' === $settings['kng_blog_posts_pag_switcher']) {
2531 $js_swiper .= "pagination: {el: '.king-addons-blog-posts-pagination-" .
2532 esc_js($this_ID) . "', " .
2533 ('yes' === $settings['kng_blog_posts_pag_clickable_switcher'] ? 'clickable: true, ' : '');
2534 if ('yes' === $settings['kng_blog_posts_pag_dynamic_switcher']) {
2535 $js_swiper .= 'dynamicBullets: true, ';
2536 $js_swiper .= 'dynamicMainBullets: ' . Core::jsNumber($settings, 'kng_blog_posts_pag_dynamic_number', 1) . ', ';
2537 }
2538 $js_swiper .= "type: '" . esc_js($settings['kng_blog_posts_pag_type']) . "'},";
2539 }
2540
2541 // Navigation
2542 if ('yes' === $settings['kng_blog_posts_nav_switcher']) {
2543 $js_swiper .= "navigation: {nextEl: '.king-addons-blog-posts-nav-next-" .
2544 esc_js($this_ID) . "', prevEl: '.king-addons-blog-posts-nav-prev-" .
2545 esc_js($this_ID) . "'},";
2546 }
2547
2548 // Loop
2549 if ('yes' === $settings['kng_blog_posts_loop_switcher']) {
2550 $js_swiper .= "loop: true,";
2551 }
2552
2553 // Rewind
2554 if ('yes' === $settings['kng_blog_posts_rewind_switcher']) {
2555 $js_swiper .= "rewind: true,";
2556 }
2557
2558 // Autoplay
2559 if ('yes' === $settings['kng_blog_posts_autoplay_switcher']) {
2560 $js_swiper .= "autoplay: {";
2561 if ('yes' !== $settings['kng_blog_posts_autoplay_like_ticker_switcher']) {
2562 $js_swiper .= "delay: " . Core::jsNumber($settings, 'kng_blog_posts_autoplay_delay', 2000) . ",";
2563 } else {
2564 $js_swiper .= "delay: 0,";
2565 }
2566 $js_swiper .= "disableOnInteraction: " . ('yes' === $settings['kng_blog_posts_autoplay_disableoninteraction_switcher'] ? 'true' : 'false') . ",";
2567 $js_swiper .= "pauseOnMouseEnter: " . ('yes' === $settings['kng_blog_posts_autoplay_pausedonmouseenter_switcher'] ? 'true' : 'false') . ",";
2568 $js_swiper .= "reverseDirection: " . ('yes' === $settings['kng_blog_posts_autoplay_reversedirection_switcher'] ? 'true' : 'false') . ",";
2569 $js_swiper .= "},";
2570 }
2571
2572 $js_swiper .= "})";
2573
2574 $js_swiper_full = $js_swiper_check_if_DOM_already_loaded . ' ?' . $js_swiper . ' : ' . $js_swiper_check_if_DOM_not_already_loaded . $js_swiper . '; });';
2575
2576 wp_print_inline_script_tag($js_swiper_full);
2577 /** END: BLOG POSTS ===================== */
2578 }
2579 }