PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.0.7
Easy Elements for Elementor – Addons & Website Templates v1.0.7
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / gallery / gallery.php

gallery.php in Easy Elements for Elementor – Addons & Website Templates 1.0.7, at widgets/gallery/gallery.php

516 lines 18.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 use Elementor\Controls_Manager;
3 use Elementor\Group_Control_Image_Size;
4 use Elementor\Utils;
5
6 defined( 'ABSPATH' ) || die();
7
8 class Easyel__Gallery_Widget extends \Elementor\Widget_Base {
9
10 public function get_name() {
11 return 'eel-gallery';
12 }
13
14 public function get_title() {
15 return esc_html__( 'Simple Gallery', 'easy-elements' );
16 }
17
18 public function get_icon() {
19 return 'easyicon easyelIcon-marquee-logo';
20 }
21
22 public function get_categories() {
23 return [ 'easyelements_category_pro' ];
24 }
25
26 public function get_keywords() {
27 return [ 'gallery', 'image', 'photo', 'portfolio' ];
28 }
29
30 public function get_style_depends() {
31 $handle = 'eel-gallery-style';
32 $css_path = plugin_dir_path( __FILE__ ) . 'css/gallery.css';
33 if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
34 wp_register_style(
35 $handle,
36 plugins_url( 'css/gallery.css', __FILE__ ),
37 [],
38 defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : '1.0.0'
39 );
40 }
41 return [ $handle ];
42 }
43
44 public function get_script_depends() {
45 $handle = 'eel-simple-gallery-script';
46 $js_path = plugin_dir_path( __FILE__ ) . 'js/simple-gallery.js';
47
48 // Normal script loading
49 if ( ! wp_script_is( $handle, 'registered' ) && file_exists( $js_path ) ) {
50 wp_register_script( $handle, plugins_url( 'js/simple-gallery.js', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $js_path ) : '1.0.0', true );
51 }
52
53 return [ $handle ];
54 }
55
56 protected function register_controls() {
57
58 // Gallery Images
59 $this->start_controls_section(
60 'section_gallery',
61 [
62 'label' => esc_html__( 'Gallery Images', 'easy-elements' ),
63 'tab' => Controls_Manager::TAB_CONTENT,
64 ]
65 );
66
67 $this->add_control(
68 'gallery_images',
69 [
70 'label' => esc_html__( 'Add Images', 'easy-elements' ),
71 'type' => Controls_Manager::GALLERY,
72 'default' => [],
73 ]
74 );
75
76 $this->add_responsive_control(
77 'columns',
78 [
79 'label' => esc_html__( 'Columns', 'easy-elements' ),
80 'type' => Controls_Manager::SELECT,
81 'default' => '4',
82 'options' => [
83 '1' => esc_html__( '1 Column', 'easy-elements' ),
84 '2' => esc_html__( '2 Columns', 'easy-elements' ),
85 '3' => esc_html__( '3 Columns', 'easy-elements' ),
86 '4' => esc_html__( '4 Columns', 'easy-elements' ),
87 '5' => esc_html__( '5 Columns', 'easy-elements' ),
88 ],
89 'selectors' => [
90 '{{WRAPPER}} .eel-gallery-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
91 ],
92 ]
93 );
94
95 $this->add_group_control(
96 Group_Control_Image_Size::get_type(),
97 [
98 'name' => 'thumbnail',
99 'default' => 'large',
100 'separator' => 'none',
101 ]
102 );
103
104 $this->add_control(
105 'show_caption',
106 [
107 'label' => esc_html__( 'Show Caption', 'easy-elements' ),
108 'type' => Controls_Manager::SWITCHER,
109 'label_on' => esc_html__( 'Show', 'easy-elements' ),
110 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
111 'default' => 'yes',
112 ]
113 );
114
115 $this->add_control(
116 'caption_source',
117 [
118 'label' => esc_html__( 'Caption Source', 'easy-elements' ),
119 'type' => Controls_Manager::SELECT,
120 'default' => 'media',
121 'options' => [
122 'media' => esc_html__( 'Media Library Caption', 'easy-elements' ),
123 'title' => esc_html__( 'Image Title', 'easy-elements' ),
124 'none' => esc_html__( 'None', 'easy-elements' ),
125 ],
126 'condition' => [
127 'show_caption' => 'yes',
128 ],
129 ]
130 );
131
132 $this->add_control(
133 'enable_popup',
134 [
135 'label' => esc_html__( 'Enable Lightbox', 'easy-elements' ),
136 'type' => Controls_Manager::SWITCHER,
137 'label_on' => esc_html__( 'Yes', 'easy-elements' ),
138 'label_off' => esc_html__( 'No', 'easy-elements' ),
139 'default' => 'yes',
140 ]
141 );
142
143 $this->add_control(
144 'order_by',
145 [
146 'label' => esc_html__( 'Order By', 'easy-elements' ),
147 'type' => Controls_Manager::SELECT,
148 'default' => 'menu_order',
149 'options' => [
150 'menu_order' => esc_html__( 'Default', 'easy-elements' ),
151 'title' => esc_html__( 'Title', 'easy-elements' ),
152 'id' => esc_html__( 'ID', 'easy-elements' ),
153 'date' => esc_html__( 'Date', 'easy-elements' ),
154 'rand' => esc_html__( 'Random', 'easy-elements' ),
155 ],
156 ]
157 );
158
159 $this->add_control(
160 'hover_style',
161 [
162 'label' => esc_html__( 'On Hover', 'easy-elements' ),
163 'type' => Controls_Manager::SELECT,
164 'default' => 'default',
165 'options' => [
166 'default' => esc_html__( 'Default', 'easy-elements' ),
167 'icon' => esc_html__( 'Icon', 'easy-elements' ),
168 'text' => esc_html__( 'Text', 'easy-elements' ),
169 ],
170 ]
171 );
172
173 $this->add_control(
174 'hover_text',
175 [
176 'label' => esc_html__( 'Hover Text', 'easy-elements' ),
177 'type' => \Elementor\Controls_Manager::TEXT,
178 'default' => esc_html__( 'View', 'easy-elements' ),
179 'placeholder' => esc_html__( 'Enter hover text', 'easy-elements' ),
180 'condition' => [
181 'hover_style' => 'text',
182 ],
183 ]
184 );
185
186 $this->add_control(
187 'hover_icon',
188 [
189 'label' => esc_html__( 'Hover Icon', 'easy-elements' ),
190 'type' => \Elementor\Controls_Manager::ICONS,
191 'default' => [
192 'value' => 'fas fa-plus',
193 'library' => 'fa-solid',
194 ],
195 'condition' => [
196 'hover_style' => 'icon',
197 ],
198 ]
199 );
200
201 $this->end_controls_section();
202
203 $this->start_controls_section(
204 'section_image_style',
205 [
206 'label' => esc_html__('Images', 'easy-elements'),
207 'tab' => Controls_Manager::TAB_STYLE,
208 ]
209 );
210
211 $this->add_responsive_control(
212 'image_gap',
213 [
214 'label' => esc_html__( 'Gap', 'easy-elements' ),
215 'type' => Controls_Manager::SLIDER,
216 'size_units' => [ 'px', '%' ],
217 'range' => [
218 'px' => [ 'min' => 0, 'max' => 100 ],
219 ],
220 'default' => [ 'size' => 10 ],
221 'selectors' => [
222 '{{WRAPPER}} .eel-gallery-grid' => 'gap: {{SIZE}}{{UNIT}};',
223 ],
224 ]
225 );
226
227 $this->add_responsive_control(
228 'image_height',
229 [
230 'label' => esc_html__( 'Height', 'easy-elements' ),
231 'type' => \Elementor\Controls_Manager::SLIDER,
232 'size_units' => [ 'px', '%' ],
233 'range' => [
234 'px' => [ 'min' => 50, 'max' => 1000, 'step' => 1 ],
235 '%' => [ 'min' => 10, 'max' => 100, 'step' => 1 ],
236 ],
237 'selectors' => [
238 '{{WRAPPER}} .eel-gallery-item img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover; width: 100%;',
239 ],
240 ]
241 );
242
243
244 $this->add_group_control(
245 \Elementor\Group_Control_Border::get_type(),
246 [
247 'name' => 'image_border',
248 'label' => esc_html__( 'Border', 'easy-elements' ),
249 'selector' => '{{WRAPPER}} .eel-gallery-item img',
250 ]
251 );
252
253 $this->add_responsive_control(
254 'image_border_radius',
255 [
256 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
257 'type' => Controls_Manager::DIMENSIONS,
258 'size_units' => [ 'px', '%' ],
259 'selectors' => [
260 '{{WRAPPER}} .eel-gallery-item img, {{WRAPPER}} .eel-gallery-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
261 ],
262 ]
263 );
264
265 $this->add_responsive_control(
266 'image_border_padding',
267 [
268 'label' => esc_html__( 'Padding', 'easy-elements' ),
269 'type' => Controls_Manager::DIMENSIONS,
270 'size_units' => [ 'px', '%' ],
271 'selectors' => [
272 '{{WRAPPER}} .eel-gallery-item img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
273 ],
274 ]
275 );
276
277 $this->end_controls_section();
278
279 $this->start_controls_section(
280 'section_caption_style',
281 [
282 'label' => esc_html__('Caption', 'easy-elements'),
283 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
284 'condition' => [
285 'show_caption' => 'yes',
286 ],
287 ]
288 );
289
290 // Caption Color
291 $this->add_control(
292 'caption_color',
293 [
294 'label' => esc_html__('Color', 'easy-elements'),
295 'type' => \Elementor\Controls_Manager::COLOR,
296 'selectors' => [
297 '{{WRAPPER}} .eel-gallery-caption' => 'color: {{VALUE}};',
298 ],
299 ]
300 );
301
302 // Caption Background Color
303 $this->add_control(
304 'caption_bg_color',
305 [
306 'label' => esc_html__('Background Color', 'easy-elements'),
307 'type' => \Elementor\Controls_Manager::COLOR,
308 'selectors' => [
309 '{{WRAPPER}} .eel-gallery-caption' => 'background-color: {{VALUE}};',
310 ],
311 ]
312 );
313
314 // Caption Typography
315 $this->add_group_control(
316 \Elementor\Group_Control_Typography::get_type(),
317 [
318 'name' => 'caption_typography',
319 'label' => esc_html__('Typography', 'easy-elements'),
320 'selector' => '{{WRAPPER}} .eel-gallery-caption',
321 ]
322 );
323
324 $this->end_controls_section();
325
326
327 $this->start_controls_section(
328 'section_hover_overlay_style',
329 [
330 'label' => esc_html__('Hover Overlay', 'easy-elements'),
331 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
332 'condition' => [
333 'hover_style!' => 'default',
334 ],
335 ]
336 );
337 $this->add_control(
338 'hover_overlay_color',
339 [
340 'label' => esc_html__( 'Hover Overlay Color', 'easy-elements' ),
341 'type' => \Elementor\Controls_Manager::COLOR,
342 'default' => 'rgba(0,0,0,0.6)',
343 'selectors' => [
344 '{{WRAPPER}} .eel-hover-content' => 'background-color: {{VALUE}};',
345 ],
346 ]
347 );
348 $this->end_controls_section();
349
350 $this->start_controls_section(
351 'section_hover_icon_style',
352 [
353 'label' => esc_html__('Hover Icon', 'easy-elements'),
354 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
355 'condition' => [
356 'hover_style' => 'icon',
357 ],
358 ]
359 );
360 $this->add_control(
361 'hover_icon_size',
362 [
363 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
364 'type' => \Elementor\Controls_Manager::SLIDER,
365 'size_units' => [ 'px' ],
366 'range' => [
367 'px' => [ 'min' => 10, 'max' => 100 ],
368 ],
369 'default' => [ 'size' => 16 ],
370 'selectors' => [
371 '{{WRAPPER}} .eel-hover-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
372 '{{WRAPPER}} .eel-hover-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
373 ],
374 ]
375 );
376
377 $this->add_control(
378 'hover_icon_color',
379 [
380 'label' => esc_html__( 'Icon Color', 'easy-elements' ),
381 'type' => \Elementor\Controls_Manager::COLOR,
382 'default' => '#ffffff',
383 'selectors' => [
384 '{{WRAPPER}} .eel-hover-icon i, {{WRAPPER}} .eel-hover-icon svg, {{WRAPPER}} .eel-hover-icon svg path' => 'color: {{VALUE}}; fill: {{VALUE}};',
385 ],
386 ]
387 );
388 $this->end_controls_section();
389
390 $this->start_controls_section(
391 'section_hover_text_style',
392 [
393 'label' => esc_html__('Hover Text', 'easy-elements'),
394 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
395 'condition' => [
396 'hover_style' => 'text',
397 ],
398 ]
399 );
400
401 // Color
402 $this->add_control(
403 'hover_text_color',
404 [
405 'label' => esc_html__('Color', 'easy-elements'),
406 'type' => \Elementor\Controls_Manager::COLOR,
407 'selectors' => [
408 '{{WRAPPER}} .eel-hover-text span' => 'color: {{VALUE}};',
409 ],
410 ]
411 );
412
413 // Typography
414 $this->add_group_control(
415 \Elementor\Group_Control_Typography::get_type(),
416 [
417 'name' => 'hover_text_color_typography',
418 'label' => esc_html__('Typography', 'easy-elements'),
419 'selector' => '{{WRAPPER}} .eel-hover-text span',
420 ]
421 );
422
423 $this->end_controls_section();
424 }
425
426 protected function render() {
427 $settings = $this->get_settings_for_display();
428 $images = $settings['gallery_images'];
429
430 if ( empty( $images ) ) {
431 echo '<p>' . esc_html__( 'Please select images to display the gallery.', 'easy-elements' ) . '</p>';
432 return;
433 }
434
435 // Order images
436 $order_by = $settings['order_by'];
437 if ( $order_by === 'rand' ) {
438 shuffle( $images );
439 } elseif ( $order_by !== 'menu_order' ) {
440 usort( $images, function( $a, $b ) use ( $order_by ) {
441 $a_post = get_post( $a['id'] );
442 $b_post = get_post( $b['id'] );
443 if ( ! $a_post || ! $b_post ) return 0;
444 return strcmp( strtolower( $a_post->$order_by ), strtolower( $b_post->$order_by ) );
445 });
446 }
447
448 $popup_enabled = isset( $settings['enable_popup'] ) && $settings['enable_popup'] === 'yes';
449 $popup_class = $popup_enabled ? 'eel-popup-enabled' : '';
450
451 echo '<div class="eel-gallery-grid ' . esc_attr( $popup_class ) . '">';
452
453 foreach ( $images as $index => $image ) {
454 $image_url = \Elementor\Group_Control_Image_Size::get_attachment_image_src( $image['id'], 'thumbnail', $settings ) ?: $image['url'];
455 $full_image = wp_get_attachment_image_url( $image['id'], 'full' );
456 $caption = '';
457
458 if ( isset($settings['show_caption']) && $settings['show_caption'] === 'yes' ) {
459 if ( $settings['caption_source'] === 'media' ) {
460 $caption = wp_get_attachment_caption( $image['id'] );
461 } elseif ( $settings['caption_source'] === 'title' ) {
462 $caption = get_the_title( $image['id'] );
463 }
464 }
465
466 echo '<div class="eel-gallery-item">';
467
468 if ( $popup_enabled ) {
469 echo '<a href="' . esc_url( $full_image ) . '" class="eel-popup-link" data-index="' . esc_attr( $index ) . '" data-elementor-open-lightbox="no">';
470 } else {
471 echo '<a href="' . esc_url( $image['url'] ) . '" target="_blank" rel="noopener" data-elementor-open-lightbox="no">';
472 }
473
474 // === Image ===
475 echo '<div class="eel-gallery-image-wrap">';
476 echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( get_post_meta( $image['id'], '_wp_attachment_image_alt', true ) ) . '" data-elementor-open-lightbox="no">';
477
478 // === Hover Content ===
479 if ( $settings['hover_style'] === 'text' && ! empty( $settings['hover_text'] ) ) {
480 echo '<div class="eel-hover-content eel-hover-text">';
481 echo '<span>' . esc_html( $settings['hover_text'] ) . '</span>';
482 echo '</div>';
483 } elseif ( $settings['hover_style'] === 'icon' && ! empty( $settings['hover_icon']['value'] ) ) {
484 echo '<div class="eel-hover-content eel-hover-icon">';
485 \Elementor\Icons_Manager::render_icon( $settings['hover_icon'], [ 'aria-hidden' => 'true' ] );
486 echo '</div>';
487 }
488
489 echo '</div>'; // .eel-gallery-image-wrap
490 echo '</a>';
491
492 // === Caption ===
493 if ( ! empty( $caption ) ) {
494 echo '<div class="eel-gallery-caption">' . esc_html( $caption ) . '</div>';
495 }
496
497 echo '</div>'; // .eel-gallery-item
498 }
499
500 echo '</div>'; // .eel-gallery-grid
501
502 // === Lightbox ===
503 if ( $popup_enabled ) :
504 ?>
505 <div class="eel-lightbox">
506 <span class="eel-close">&times;</span>
507 <img class="eel-lightbox-image" src="" alt="">
508 <button class="eel-prev">&#10094;</button>
509 <button class="eel-next">&#10095;</button>
510 </div>
511 <?php
512 endif;
513 }
514
515
516 } ?>