PluginProbe
Elementor Website Builder – more than just a page builder / 3.14.0-beta4
Elementor Website Builder – more than just a page builder v3.14.0-beta4
4.3.4 4.3.3 4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 All 457 releases
← All changes | includes/widgets/image-carousel.php +52 -187 4.1.2 → 3.14.0-beta4 View file →
@@ -5,9 +5,8 @@
5 5 exit; // Exit if accessed directly.
6 6 }
7 7
8 8 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9 -use Elementor\Modules\Promotions\Controls\Promotion_Control;
10 9
11 10 /**
12 11 * Elementor image carousel widget.
13 12 *
@@ -73,66 +72,9 @@
73 72 public function get_keywords() {
74 73 return [ 'image', 'photo', 'visual', 'carousel', 'slider' ];
75 74 }
76 75
77 - protected function is_dynamic_content(): bool {
78 - return false;
79 - }
80 -
81 76 /**
82 - * Get style dependencies.
83 - *
84 - * Retrieve the list of style dependencies the widget requires.
85 - *
86 - * @since 3.24.0
87 - * @access public
88 - *
89 - * @return array Widget style dependencies.
90 - */
91 - public function get_style_depends(): array {
92 - return [ 'e-swiper', 'widget-image-carousel' ];
93 - }
94 -
95 - /**
96 - * Get script dependencies.
97 - *
98 - * Retrieve the list of script dependencies the widget requires.
99 - *
100 - * @since 3.27.0
101 - * @access public
102 - *
103 - * @return array Widget script dependencies.
104 - */
105 - public function get_script_depends(): array {
106 - return [ 'swiper' ];
107 - }
108 -
109 - public function has_widget_inner_wrapper(): bool {
110 - return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
111 - }
112 -
113 - /**
114 - * Get widget upsale data.
115 - *
116 - * Retrieve the widget promotion data.
117 - *
118 - * @since 3.18.0
119 - * @access protected
120 - *
121 - * @return array Widget promotion data.
122 - */
123 - protected function get_upsale_data() {
124 - return [
125 - 'condition' => ! Utils::has_pro(),
126 - 'image' => esc_url( ELEMENTOR_ASSETS_URL . 'images/go-pro.svg' ),
127 - 'image_alt' => esc_attr__( 'Upgrade', 'elementor' ),
128 - 'description' => esc_html__( 'Gain complete freedom to design every slide with Elementor"s Pro Carousel.', 'elementor' ),
129 - 'upgrade_url' => esc_url( 'https://go.elementor.com/go-pro-image-carousel-widget/' ),
130 - 'upgrade_text' => esc_html__( 'Upgrade Now', 'elementor' ),
131 - ];
132 - }
133 -
134 - /**
135 77 * Register image carousel widget controls.
136 78 *
137 79 * Adds different input fields to allow the user to change and customize the widget settings.
138 80 *
@@ -147,17 +89,8 @@
147 89 ]
148 90 );
149 91
150 92 $this->add_control(
151 - 'carousel_name',
152 - [
153 - 'label' => esc_html__( 'Carousel Name', 'elementor' ),
154 - 'type' => Controls_Manager::TEXT,
155 - 'default' => esc_html__( 'Image Carousel', 'elementor' ),
156 - ]
157 - );
158 -
159 - $this->add_control(
160 93 'carousel',
161 94 [
162 95 'label' => esc_html__( 'Add Images', 'elementor' ),
163 96 'type' => Controls_Manager::GALLERY,
@@ -172,8 +105,9 @@
172 105 $this->add_group_control(
173 106 Group_Control_Image_Size::get_type(),
174 107 [
175 108 'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
109 + 'separator' => 'none',
176 110 ]
177 111 );
178 112
179 113 $slides_to_show = range( 1, 10 );
@@ -370,8 +304,9 @@
370 304 'link',
371 305 [
372 306 'label' => esc_html__( 'Link', 'elementor' ),
373 307 'type' => Controls_Manager::URL,
308 + 'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
374 309 'condition' => [
375 310 'link_to' => 'custom',
376 311 ],
377 312 'show_label' => false,
@@ -418,8 +353,17 @@
418 353 ],
419 354 ]
420 355 );
421 356
357 + $this->add_control(
358 + 'view',
359 + [
360 + 'label' => esc_html__( 'View', 'elementor' ),
361 + 'type' => Controls_Manager::HIDDEN,
362 + 'default' => 'traditional',
363 + ]
364 + );
365 +
422 366 $this->end_controls_section();
423 367
424 368 $this->start_controls_section(
425 369 'section_additional_options',
@@ -440,13 +384,14 @@
440 384 $this->add_control(
441 385 'autoplay',
442 386 [
443 387 'label' => esc_html__( 'Autoplay', 'elementor' ),
444 - 'type' => Controls_Manager::SWITCHER,
445 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
446 - 'label_off' => esc_html__( 'No', 'elementor' ),
447 - 'return_value' => 'yes',
388 + 'type' => Controls_Manager::SELECT,
448 389 'default' => 'yes',
390 + 'options' => [
391 + 'yes' => esc_html__( 'Yes', 'elementor' ),
392 + 'no' => esc_html__( 'No', 'elementor' ),
393 + ],
449 394 'frontend_available' => true,
450 395 ]
451 396 );
452 397
@@ -453,13 +398,14 @@
453 398 $this->add_control(
454 399 'pause_on_hover',
455 400 [
456 401 'label' => esc_html__( 'Pause on Hover', 'elementor' ),
457 - 'type' => Controls_Manager::SWITCHER,
458 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
459 - 'label_off' => esc_html__( 'No', 'elementor' ),
460 - 'return_value' => 'yes',
402 + 'type' => Controls_Manager::SELECT,
461 403 'default' => 'yes',
404 + 'options' => [
405 + 'yes' => esc_html__( 'Yes', 'elementor' ),
406 + 'no' => esc_html__( 'No', 'elementor' ),
407 + ],
462 408 'condition' => [
463 409 'autoplay' => 'yes',
464 410 ],
465 411 'render_type' => 'none',
@@ -470,13 +416,14 @@
470 416 $this->add_control(
471 417 'pause_on_interaction',
472 418 [
473 419 'label' => esc_html__( 'Pause on Interaction', 'elementor' ),
474 - 'type' => Controls_Manager::SWITCHER,
475 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
476 - 'label_off' => esc_html__( 'No', 'elementor' ),
477 - 'return_value' => 'yes',
420 + 'type' => Controls_Manager::SELECT,
478 421 'default' => 'yes',
422 + 'options' => [
423 + 'yes' => esc_html__( 'Yes', 'elementor' ),
424 + 'no' => esc_html__( 'No', 'elementor' ),
425 + ],
479 426 'condition' => [
480 427 'autoplay' => 'yes',
481 428 ],
482 429 'frontend_available' => true,
@@ -501,13 +448,14 @@
501 448 $this->add_control(
502 449 'infinite',
503 450 [
504 451 'label' => esc_html__( 'Infinite Loop', 'elementor' ),
505 - 'type' => Controls_Manager::SWITCHER,
506 - 'label_on' => esc_html__( 'Yes', 'elementor' ),
507 - 'label_off' => esc_html__( 'No', 'elementor' ),
508 - 'return_value' => 'yes',
452 + 'type' => Controls_Manager::SELECT,
509 453 'default' => 'yes',
454 + 'options' => [
455 + 'yes' => esc_html__( 'Yes', 'elementor' ),
456 + 'no' => esc_html__( 'No', 'elementor' ),
457 + ],
510 458 'frontend_available' => true,
511 459 ]
512 460 );
513 461
@@ -593,17 +541,17 @@
593 541 ],
594 542 ]
595 543 );
596 544
597 - $this->add_responsive_control(
545 + $this->add_control(
598 546 'arrows_size',
599 547 [
600 548 'label' => esc_html__( 'Size', 'elementor' ),
601 549 'type' => Controls_Manager::SLIDER,
602 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
603 550 'range' => [
604 551 'px' => [
605 - 'max' => 100,
552 + 'min' => 20,
553 + 'max' => 60,
606 554 ],
607 555 ],
608 556 'selectors' => [
609 557 '{{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-prev, {{WRAPPER}} .elementor-swiper-button.elementor-swiper-button-next' => 'font-size: {{SIZE}}{{UNIT}};',
@@ -657,37 +605,17 @@
657 605 ],
658 606 ]
659 607 );
660 608
661 - $this->add_responsive_control(
662 - 'dots_gap',
663 - [
664 - 'label' => esc_html__( 'Space Between Dots', 'elementor' ),
665 - 'type' => Controls_Manager::SLIDER,
666 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
667 - 'range' => [
668 - 'px' => [
669 - 'max' => 20,
670 - ],
671 - ],
672 - 'selectors' => [
673 - '{{WRAPPER}} .swiper-pagination-bullet' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}{{UNIT}}; --swiper-pagination-bullet-vertical-gap: {{SIZE}}{{UNIT}};',
674 - ],
675 - 'condition' => [
676 - 'navigation' => [ 'dots', 'both' ],
677 - ],
678 - ]
679 - );
680 -
681 - $this->add_responsive_control(
609 + $this->add_control(
682 610 'dots_size',
683 611 [
684 612 'label' => esc_html__( 'Size', 'elementor' ),
685 613 'type' => Controls_Manager::SLIDER,
686 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
687 614 'range' => [
688 615 'px' => [
689 - 'max' => 20,
616 + 'min' => 5,
617 + 'max' => 10,
690 618 ],
691 619 ],
692 620 'selectors' => [
693 621 '{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
@@ -785,9 +713,8 @@
785 713 'image_spacing_custom',
786 714 [
787 715 'label' => esc_html__( 'Image Spacing', 'elementor' ),
788 716 'type' => Controls_Manager::SLIDER,
789 - 'size_units' => [ 'px' ],
790 717 'range' => [
791 718 'px' => [
792 719 'max' => 100,
793 720 ],
@@ -843,10 +770,10 @@
843 770 [
844 771 'label' => esc_html__( 'Alignment', 'elementor' ),
845 772 'type' => Controls_Manager::CHOOSE,
846 773 'options' => [
847 - 'start' => [
848 - 'title' => esc_html__( 'Start', 'elementor' ),
774 + 'left' => [
775 + 'title' => esc_html__( 'Left', 'elementor' ),
849 776 'icon' => 'eicon-text-align-left',
850 777 ],
851 778 'center' => [
852 779 'title' => esc_html__( 'Center', 'elementor' ),
@@ -851,10 +778,10 @@
851 778 'center' => [
852 779 'title' => esc_html__( 'Center', 'elementor' ),
853 780 'icon' => 'eicon-text-align-center',
854 781 ],
855 - 'end' => [
856 - 'title' => esc_html__( 'End', 'elementor' ),
782 + 'right' => [
783 + 'title' => esc_html__( 'Right', 'elementor' ),
857 784 'icon' => 'eicon-text-align-right',
858 785 ],
859 786 'justify' => [
860 787 'title' => esc_html__( 'Justified', 'elementor' ),
@@ -860,13 +787,8 @@
860 787 'title' => esc_html__( 'Justified', 'elementor' ),
861 788 'icon' => 'eicon-text-align-justify',
862 789 ],
863 790 ],
864 - 'classes' => 'elementor-control-start-end',
865 - 'selectors_dictionary' => [
866 - 'left' => is_rtl() ? 'end' : 'start',
867 - 'right' => is_rtl() ? 'start' : 'end',
868 - ],
869 791 'default' => 'center',
870 792 'selectors' => [
871 793 '{{WRAPPER}} .elementor-image-carousel-caption' => 'text-align: {{VALUE}};',
872 794 ],
@@ -903,21 +825,10 @@
903 825 'selector' => '{{WRAPPER}} .elementor-image-carousel-caption',
904 826 ]
905 827 );
906 828
907 - $this->add_responsive_control(
908 - 'caption_space',
909 - [
910 - 'label' => esc_html__( 'Spacing', 'elementor' ),
911 - 'type' => Controls_Manager::SLIDER,
912 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
913 - 'selectors' => [
914 - '{{WRAPPER}} .elementor-image-carousel-caption' => 'margin-block-start: {{SIZE}}{{UNIT}};',
915 - ],
916 - ]
917 - );
829 + $this->end_controls_section();
918 830
919 - $this->end_controls_section();
920 831 }
921 832
922 833 /**
923 834 * Render image carousel widget output on the frontend.
@@ -972,25 +883,10 @@
972 883 }
973 884
974 885 $image_caption = $this->get_image_caption( $attachment );
975 886
976 - $slide_count = $index + 1;
977 - $slide_setting_key = 'swiper_slide_' . $index;
887 + $slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
978 888
979 - $this->add_render_attribute( $slide_setting_key, [
980 - 'class' => 'swiper-slide',
981 - 'role' => 'group',
982 - 'aria-roledescription' => 'slide',
983 - 'aria-label' => sprintf(
984 - /* translators: 1: Slide count, 2: Total slides count. */
985 - esc_html__( '%1$s of %2$s', 'elementor' ),
986 - $slide_count,
987 - count( $settings['carousel'] )
988 - ),
989 - ] );
990 -
991 - $slide_html = '<div ' . $this->get_render_attribute_string( $slide_setting_key ) . '>' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
992 -
993 889 if ( $lazyload ) {
994 890 $slide_html .= '<div class="swiper-lazy-preloader"></div>';
995 891 }
996 892
@@ -1013,21 +909,16 @@
1013 909 if ( empty( $slides ) ) {
1014 910 return;
1015 911 }
1016 912
1017 - $swiper_class = 'swiper';
1018 - $has_autoplay_enabled = 'yes' === $this->get_settings_for_display( 'autoplay' );
913 + $swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';
1019 914
1020 915 $this->add_render_attribute( [
1021 916 'carousel' => [
1022 917 'class' => 'elementor-image-carousel swiper-wrapper',
1023 - 'aria-live' => $has_autoplay_enabled ? 'off' : 'polite',
1024 918 ],
1025 919 'carousel-wrapper' => [
1026 920 'class' => 'elementor-image-carousel-wrapper ' . $swiper_class,
1027 - 'role' => 'region',
1028 - 'aria-roledescription' => 'carousel',
1029 - 'aria-label' => $settings['carousel_name'],
1030 921 'dir' => $settings['direction'],
1031 922 ],
1032 923 ] );
1033 924
@@ -1038,27 +929,29 @@
1038 929 $this->add_render_attribute( 'carousel', 'class', 'swiper-image-stretch' );
1039 930 }
1040 931
1041 932 $slides_count = count( $settings['carousel'] );
933 +
1042 934 ?>
1043 935 <div <?php $this->print_render_attribute_string( 'carousel-wrapper' ); ?>>
1044 936 <div <?php $this->print_render_attribute_string( 'carousel' ); ?>>
1045 - <?php // PHPCS - $slides contains the slides content, all the relevant content is escaped above. ?>
937 + <?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
1046 938 <?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1047 939 </div>
1048 940 <?php if ( 1 < $slides_count ) : ?>
941 + <?php if ( $show_dots ) : ?>
942 + <div class="swiper-pagination"></div>
943 + <?php endif; ?>
1049 944 <?php if ( $show_arrows ) : ?>
1050 945 <div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
1051 946 <?php $this->render_swiper_button( 'previous' ); ?>
947 + <span class="elementor-screen-only"><?php echo esc_html__( 'Previous image', 'elementor' ); ?></span>
1052 948 </div>
1053 949 <div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
1054 950 <?php $this->render_swiper_button( 'next' ); ?>
951 + <span class="elementor-screen-only"><?php echo esc_html__( 'Next image', 'elementor' ); ?></span>
1055 952 </div>
1056 953 <?php endif; ?>
1057 -
1058 - <?php if ( $show_dots ) : ?>
1059 - <div class="swiper-pagination"></div>
1060 - <?php endif; ?>
1061 954 <?php endif; ?>
1062 955 </div>
1063 956 <?php
1064 957 }
@@ -1068,9 +961,9 @@
1068 961 *
1069 962 * @since 1.0.0
1070 963 * @access private
1071 964 *
1072 - * @param array $attachment
965 + * @param array $attachment
1073 966 * @param object $instance
1074 967 *
1075 968 * @return array|string|false An array/string containing the attachment URL, or false if no link.
1076 969 */
@@ -1110,12 +1003,8 @@
1110 1003 }
1111 1004
1112 1005 $attachment_post = get_post( $attachment['id'] );
1113 1006
1114 - if ( Utils::has_invalid_post_permissions( $attachment_post ) ) {
1115 - return '';
1116 - }
1117 -
1118 1007 if ( 'caption' === $caption_type ) {
1119 1008 return $attachment_post->post_excerpt;
1120 1009 }
1121 1010
@@ -1122,12 +1011,8 @@
1122 1011 if ( 'title' === $caption_type ) {
1123 1012 return $attachment_post->post_title;
1124 1013 }
1125 1014
1126 - if ( empty( $attachment_post->post_content ) ) {
1127 - return '';
1128 - }
1129 -
1130 1015 return $attachment_post->post_content;
1131 1016 }
1132 1017
1133 1018 private function render_swiper_button( $type ) {
@@ -1141,26 +1026,6 @@
1141 1026 ];
1142 1027 }
1143 1028
1144 1029 Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] );
1145 - }
1146 -
1147 - public function render_markdown(): string {
1148 - $settings = $this->get_settings_for_display();
1149 - if ( empty( $settings['carousel'] ) ) {
1150 - return '';
1151 - }
1152 - $images = [];
1153 - foreach ( $settings['carousel'] as $item ) {
1154 - $url = $item['url'] ?? '';
1155 - if ( empty( $url ) ) {
1156 - continue;
1157 - }
1158 - $alt = '';
1159 - if ( ! empty( $item['id'] ) ) {
1160 - $alt = get_post_meta( $item['id'], '_wp_attachment_image_alt', true );
1161 - }
1162 - $images[] = '![' . $alt . '](' . esc_url( $url ) . ')';
1163 - }
1164 - return implode( "\n\n", $images );
1165 1030 }
1166 1031 }