easy-elements / widgets / gallery / gallery.php

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

715 lines 25.9 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Group_Control_Image_Size;
5	use Elementor\Utils;
6
7	defined( 'ABSPATH' ) \|\| die();
8
9	class Easyel__Gallery_Widget extends \Elementor\Widget_Base {
10
11	public function get_name() {
12	return 'eel-gallery';
13	}
14
15	public function get_title() {
16	return esc_html__( 'Simple Gallery', 'easy-elements' );
17	}
18
19	public function get_icon() {
20	return 'easyicon easyelIcon-marquee-logo';
21	}
22
23	public function get_categories() {
24	return [ 'easyelements_category_pro' ];
25	}
26
27	public function get_keywords() {
28	return [ 'gallery', 'image', 'photo', 'portfolio' ];
29	}
30
31	public function get_style_depends() {
32
33	return [ 'eel-gallery' ];
34	}
35
36	public function get_script_depends() {
37
38	return [ 'eel-gallery' ];
39	}
40
41	protected function register_controls() {
42
43	// Gallery Images
44	$this->start_controls_section(
45	'section_gallery',
46	[
47	'label' => esc_html__( 'Gallery Images', 'easy-elements' ),
48	'tab' => Controls_Manager::TAB_CONTENT,
49	]
50	);
51
52	$this->add_control(
53	'gallery_images',
54	[
55	'label' => esc_html__( 'Add Images', 'easy-elements' ),
56	'type' => Controls_Manager::GALLERY,
57	'default' => [],
58	]
59	);
60
61	$this->add_responsive_control(
62	'columns',
63	[
64	'label' => esc_html__( 'Columns', 'easy-elements' ),
65	'type' => Controls_Manager::SELECT,
66	'default' => '4',
67	'options' => [
68	'1' => esc_html__( '1 Column', 'easy-elements' ),
69	'2' => esc_html__( '2 Columns', 'easy-elements' ),
70	'3' => esc_html__( '3 Columns', 'easy-elements' ),
71	'4' => esc_html__( '4 Columns', 'easy-elements' ),
72	'5' => esc_html__( '5 Columns', 'easy-elements' ),
73	],
74	'selectors' => [
75	'{{WRAPPER}} .eel-gallery-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
76	],
77	]
78	);
79
80	$this->add_group_control(
81	Group_Control_Image_Size::get_type(),
82	[
83	'name' => 'thumbnail',
84	'default' => 'large',
85	'separator' => 'none',
86	]
87	);
88
89	$this->add_control(
90	'show_caption',
91	[
92	'label' => esc_html__( 'Show Caption', 'easy-elements' ),
93	'type' => Controls_Manager::SWITCHER,
94	'label_on' => esc_html__( 'Show', 'easy-elements' ),
95	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
96	'default' => 'yes',
97	]
98	);
99
100	$this->add_control(
101	'caption_source',
102	[
103	'label' => esc_html__( 'Caption Source', 'easy-elements' ),
104	'type' => Controls_Manager::SELECT,
105	'default' => 'media',
106	'options' => [
107	'media' => esc_html__( 'Media Library Caption', 'easy-elements' ),
108	'title' => esc_html__( 'Image Title', 'easy-elements' ),
109	'none' => esc_html__( 'None', 'easy-elements' ),
110	],
111	'condition' => [
112	'show_caption' => 'yes',
113	],
114	]
115	);
116
117	$this->add_control(
118	'show_description',
119	[
120	'label' => esc_html__( 'Show Description', 'easy-elements' ),
121	'type' => Controls_Manager::SWITCHER,
122	'label_on' => esc_html__( 'Show', 'easy-elements' ),
123	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
124	'default' => '',
125	'description' => esc_html__( 'Pulls from each image\'s Description field in the Media Library. Hidden automatically when empty.', 'easy-elements' ),
126	'separator' => 'before',
127	]
128	);
129
130	$this->add_control(
131	'enable_popup',
132	[
133	'label' => esc_html__( 'Enable Lightbox', 'easy-elements' ),
134	'type' => Controls_Manager::SWITCHER,
135	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
136	'label_off' => esc_html__( 'No', 'easy-elements' ),
137	'default' => 'yes',
138	]
139	);
140
141	$this->add_control(
142	'order_by',
143	[
144	'label' => esc_html__( 'Order By', 'easy-elements' ),
145	'type' => Controls_Manager::SELECT,
146	'default' => 'menu_order',
147	'options' => [
148	'menu_order' => esc_html__( 'Default', 'easy-elements' ),
149	'title' => esc_html__( 'Title', 'easy-elements' ),
150	'id' => esc_html__( 'ID', 'easy-elements' ),
151	'date' => esc_html__( 'Date', 'easy-elements' ),
152	'rand' => esc_html__( 'Random', 'easy-elements' ),
153	],
154	]
155	);
156
157	$this->add_control(
158	'hover_style',
159	[
160	'label' => esc_html__( 'On Hover', 'easy-elements' ),
161	'type' => Controls_Manager::SELECT,
162	'default' => 'default',
163	'options' => [
164	'default' => esc_html__( 'Default', 'easy-elements' ),
165	'icon' => esc_html__( 'Icon', 'easy-elements' ),
166	'text' => esc_html__( 'Text', 'easy-elements' ),
167	],
168	]
169	);
170
171	$this->add_control(
172	'hover_text',
173	[
174	'label' => esc_html__( 'Hover Text', 'easy-elements' ),
175	'type' => \Elementor\Controls_Manager::TEXT,
176	'default' => esc_html__( 'View', 'easy-elements' ),
177	'placeholder' => esc_html__( 'Enter hover text', 'easy-elements' ),
178	'condition' => [
179	'hover_style' => 'text',
180	],
181	]
182	);
183
184	$this->add_control(
185	'hover_icon',
186	[
187	'label' => esc_html__( 'Hover Icon', 'easy-elements' ),
188	'type' => \Elementor\Controls_Manager::ICONS,
189	'default' => [
190	'value' => 'fas fa-plus',
191	'library' => 'fa-solid',
192	],
193	'condition' => [
194	'hover_style' => 'icon',
195	],
196	]
197	);
198
199	$this->end_controls_section();
200
201	$this->start_controls_section(
202	'section_item_style',
203	[
204	'label' => esc_html__('Items', 'easy-elements'),
205	'tab' => Controls_Manager::TAB_STYLE,
206	]
207	);
208
209	$this->add_responsive_control(
210	'image_gap',
211	[
212	'label' => esc_html__( 'Gap', 'easy-elements' ),
213	'type' => Controls_Manager::SLIDER,
214	'size_units' => [ 'px', '%' ],
215	'range' => [
216	'px' => [ 'min' => 0, 'max' => 100 ],
217	],
218	'default' => [ 'size' => 10 ],
219	'selectors' => [
220	'{{WRAPPER}} .eel-gallery-grid' => 'gap: {{SIZE}}{{UNIT}};',
221	],
222	]
223	);
224
225	$this->end_controls_section();
226
227	$this->start_controls_section(
228	'section_image_style',
229	[
230	'label' => esc_html__('Images', 'easy-elements'),
231	'tab' => Controls_Manager::TAB_STYLE,
232	]
233	);
234
235	$this->add_responsive_control(
236	'image_height',
237	[
238	'label' => esc_html__( 'Height', 'easy-elements' ),
239	'type' => \Elementor\Controls_Manager::SLIDER,
240	'size_units' => [ 'px', '%' ],
241	'range' => [
242	'px' => [ 'min' => 50, 'max' => 1000, 'step' => 1 ],
243	'%' => [ 'min' => 10, 'max' => 100, 'step' => 1 ],
244	],
245	'selectors' => [
246	'{{WRAPPER}} .eel-gallery-item img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover; width: 100%;',
247	],
248	]
249	);
250
251
252	$this->add_group_control(
253	\Elementor\Group_Control_Border::get_type(),
254	[
255	'name' => 'image_border',
256	'label' => esc_html__( 'Border', 'easy-elements' ),
257	'selector' => '{{WRAPPER}} .eel-gallery-item img',
258	]
259	);
260
261	$this->add_responsive_control(
262	'image_border_radius',
263	[
264	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
265	'type' => Controls_Manager::DIMENSIONS,
266	'size_units' => [ 'px', '%' ],
267	'selectors' => [
268	'{{WRAPPER}} .eel-gallery-item img, {{WRAPPER}} .eel-gallery-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
269	],
270	]
271	);
272
273	$this->end_controls_section();
274
275	$this->start_controls_section(
276	'section_caption_style',
277	[
278	'label' => esc_html__('Caption', 'easy-elements'),
279	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
280	'conditions' => [
281	'relation' => 'or',
282	'terms' => [
283	[
284	'name' => 'show_caption',
285	'operator' => '==',
286	'value' => 'yes',
287	],
288	[
289	'name' => 'show_description',
290	'operator' => '==',
291	'value' => 'yes',
292	],
293	],
294	],
295	]
296	);
297
298	$this->add_control(
299	'container_heading',
300	[
301	'label' => esc_html__('Container', 'easy-elements'),
302	'type' => Controls_Manager::HEADING,
303	]
304	);
305
306	$this->add_responsive_control(
307	'caption_padding',
308	[
309	'label' => esc_html__('Padding', 'easy-elements'),
310	'type' => Controls_Manager::DIMENSIONS,
311	'size_units' => [ 'px', '%', 'em' ],
312	'selectors' => [
313	'{{WRAPPER}} .eel-gallery-caption' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
314	],
315	]
316	);
317
318	$this->add_responsive_control(
319	'caption_border_radius',
320	[
321	'label' => esc_html__('Border Radius', 'easy-elements'),
322	'type' => Controls_Manager::DIMENSIONS,
323	'size_units' => [ 'px', '%' ],
324	'selectors' => [
325	'{{WRAPPER}} .eel-gallery-caption' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
326	],
327	]
328	);
329
330	$this->add_responsive_control(
331	'caption_width',
332	[
333	'label' => esc_html__('Width', 'easy-elements'),
334	'type' => Controls_Manager::SLIDER,
335	'size_units' => [ 'px', '%' ],
336	'range' => [
337	'px' => [ 'min' => 50, 'max' => 1000, 'step' => 1 ],
338	'%' => [ 'min' => 10, 'max' => 100, 'step' => 1 ],
339	],
340	'selectors' => [
341	'{{WRAPPER}} .eel-gallery-caption' => 'width: {{SIZE}}{{UNIT}}; margin: 0 auto; left: 0; right: 0;',
342	],
343	]
344	);
345
346
347
348	$this->add_responsive_control(
349	'caption_move_up',
350	[
351	'label' => esc_html__('Move Up', 'easy-elements'),
352	'type' => Controls_Manager::SLIDER,
353	'size_units' => [ 'px', '%' ],
354	'range' => [
355	'px' => [ 'min' => 0, 'max' => 500, 'step' => 1 ],
356	'%' => [ 'min' => 0, 'max' => 100, 'step' => 1 ],
357	],
358	'description' => esc_html__('Lift the caption block upward over the image.', 'easy-elements'),
359	'selectors' => [
360	'{{WRAPPER}} .eel-gallery-caption' => 'transform: translateY(-{{SIZE}}{{UNIT}});',
361	],
362	]
363	);
364
365	$this->add_responsive_control(
366	'caption_align',
367	[
368	'label' => esc_html__('Alignment', 'easy-elements'),
369	'type' => Controls_Manager::CHOOSE,
370	'options' => [
371	'left' => [
372	'title' => esc_html__('Left', 'easy-elements'),
373	'icon' => 'eicon-text-align-left',
374	],
375	'center' => [
376	'title' => esc_html__('Center', 'easy-elements'),
377	'icon' => 'eicon-text-align-center',
378	],
379	'right' => [
380	'title' => esc_html__('Right', 'easy-elements'),
381	'icon' => 'eicon-text-align-right',
382	],
383	],
384	'selectors' => [
385	'{{WRAPPER}} .eel-gallery-caption' => 'text-align: {{VALUE}};',
386	],
387	]
388	);
389
390	$this->add_control(
391	'caption_heading',
392	[
393	'label' => esc_html__('Caption', 'easy-elements'),
394	'type' => Controls_Manager::HEADING,
395	'separator' => 'before',
396	'condition' => [
397	'show_caption' => 'yes',
398	],
399	]
400	);
401
402	// Caption Color
403	$this->add_control(
404	'caption_color',
405	[
406	'label' => esc_html__('Color', 'easy-elements'),
407	'type' => \Elementor\Controls_Manager::COLOR,
408	'selectors' => [
409	'{{WRAPPER}} .eel-gallery-caption' => 'color: {{VALUE}};',
410	],
411	'condition' => [
412	'show_caption' => 'yes',
413	],
414	]
415	);
416
417	// Caption Background Color
418	$this->add_control(
419	'caption_bg_color',
420	[
421	'label' => esc_html__('Background Color', 'easy-elements'),
422	'type' => \Elementor\Controls_Manager::COLOR,
423	'selectors' => [
424	'{{WRAPPER}} .eel-gallery-caption' => 'background-color: {{VALUE}};',
425	],
426	'condition' => [
427	'show_caption' => 'yes',
428	],
429	]
430	);
431
432	// Caption Typography
433	$this->add_group_control(
434	\Elementor\Group_Control_Typography::get_type(),
435	[
436	'name' => 'caption_typography',
437	'label' => esc_html__('Typography', 'easy-elements'),
438	'selector' => '{{WRAPPER}} .eel-gallery-caption',
439	'condition' => [
440	'show_caption' => 'yes',
441	],
442	]
443	);
444
445	$this->add_control(
446	'description_heading',
447	[
448	'label' => esc_html__('Description', 'easy-elements'),
449	'type' => Controls_Manager::HEADING,
450	'separator' => 'before',
451	'condition' => [
452	'show_description' => 'yes',
453	],
454	]
455	);
456
457	$this->add_control(
458	'description_color',
459	[
460	'label' => esc_html__('Color', 'easy-elements'),
461	'type' => \Elementor\Controls_Manager::COLOR,
462	'selectors' => [
463	'{{WRAPPER}} .eel-gallery-description' => 'color: {{VALUE}};',
464	],
465	'condition' => [
466	'show_description' => 'yes',
467	],
468	]
469	);
470
471	$this->add_group_control(
472	\Elementor\Group_Control_Background::get_type(),
473	[
474	'name' => 'description_background',
475	'label' => esc_html__('Background', 'easy-elements'),
476	'types' => [ 'classic', 'gradient' ],
477	'selector' => '{{WRAPPER}} .eel-gallery-description',
478	'condition' => [
479	'show_description' => 'yes',
480	],
481	]
482	);
483
484	$this->add_group_control(
485	\Elementor\Group_Control_Typography::get_type(),
486	[
487	'name' => 'description_typography',
488	'label' => esc_html__('Typography', 'easy-elements'),
489	'selector' => '{{WRAPPER}} .eel-gallery-description',
490	'condition' => [
491	'show_description' => 'yes',
492	],
493	]
494	);
495
496	$this->add_responsive_control(
497	'description_margin',
498	[
499	'label' => esc_html__('Margin', 'easy-elements'),
500	'type' => Controls_Manager::DIMENSIONS,
501	'size_units' => [ 'px', '%', 'em' ],
502	'selectors' => [
503	'{{WRAPPER}} .eel-gallery-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
504	],
505	'condition' => [
506	'show_description' => 'yes',
507	],
508	]
509	);
510
511	$this->end_controls_section();
512
513
514	$this->start_controls_section(
515	'section_hover_overlay_style',
516	[
517	'label' => esc_html__('Hover Overlay', 'easy-elements'),
518	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
519	'condition' => [
520	'hover_style!' => 'default',
521	],
522	]
523	);
524	$this->add_control(
525	'hover_overlay_color',
526	[
527	'label' => esc_html__( 'Hover Overlay Color', 'easy-elements' ),
528	'type' => \Elementor\Controls_Manager::COLOR,
529	'default' => 'rgba(0,0,0,0.6)',
530	'selectors' => [
531	'{{WRAPPER}} .eel-hover-content' => 'background-color: {{VALUE}};',
532	],
533	]
534	);
535	$this->end_controls_section();
536
537	$this->start_controls_section(
538	'section_hover_icon_style',
539	[
540	'label' => esc_html__('Hover Icon', 'easy-elements'),
541	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
542	'condition' => [
543	'hover_style' => 'icon',
544	],
545	]
546	);
547	$this->add_responsive_control(
548	'hover_icon_size',
549	[
550	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
551	'type' => \Elementor\Controls_Manager::SLIDER,
552	'size_units' => [ 'px' ],
553	'range' => [
554	'px' => [ 'min' => 10, 'max' => 100 ],
555	],
556	'default' => [ 'size' => 16 ],
557	'selectors' => [
558	'{{WRAPPER}} .eel-hover-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
559	'{{WRAPPER}} .eel-hover-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
560	],
561	]
562	);
563
564	$this->add_control(
565	'hover_icon_color',
566	[
567	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
568	'type' => \Elementor\Controls_Manager::COLOR,
569	'default' => '#ffffff',
570	'selectors' => [
571	'{{WRAPPER}} .eel-hover-icon i, {{WRAPPER}} .eel-hover-icon svg, {{WRAPPER}} .eel-hover-icon svg path' => 'color: {{VALUE}}; fill: {{VALUE}};',
572	],
573	]
574	);
575	$this->end_controls_section();
576
577	$this->start_controls_section(
578	'section_hover_text_style',
579	[
580	'label' => esc_html__('Hover Text', 'easy-elements'),
581	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
582	'condition' => [
583	'hover_style' => 'text',
584	],
585	]
586	);
587
588	// Color
589	$this->add_control(
590	'hover_text_color',
591	[
592	'label' => esc_html__('Color', 'easy-elements'),
593	'type' => \Elementor\Controls_Manager::COLOR,
594	'selectors' => [
595	'{{WRAPPER}} .eel-hover-text span' => 'color: {{VALUE}};',
596	],
597	]
598	);
599
600	// Typography
601	$this->add_group_control(
602	\Elementor\Group_Control_Typography::get_type(),
603	[
604	'name' => 'hover_text_color_typography',
605	'label' => esc_html__('Typography', 'easy-elements'),
606	'selector' => '{{WRAPPER}} .eel-hover-text span',
607	]
608	);
609
610	$this->end_controls_section();
611	}
612
613	protected function render() {
614	$settings = $this->get_settings_for_display();
615	$images = $settings['gallery_images'];
616
617	if ( empty( $images ) ) {
618	echo '<p>' . esc_html__( 'Please select images to display the gallery.', 'easy-elements' ) . '</p>';
619	return;
620	}
621
622	// Order images
623	$order_by = $settings['order_by'];
624	if ( $order_by === 'rand' ) {
625	shuffle( $images );
626	} elseif ( $order_by !== 'menu_order' ) {
627	usort( $images, function( $a, $b ) use ( $order_by ) {
628	$a_post = get_post( $a['id'] );
629	$b_post = get_post( $b['id'] );
630	if ( ! $a_post \|\| ! $b_post ) return 0;
631	return strcmp( strtolower( $a_post->$order_by ), strtolower( $b_post->$order_by ) );
632	});
633	}
634
635	$popup_enabled = isset( $settings['enable_popup'] ) && $settings['enable_popup'] === 'yes';
636	$popup_class = $popup_enabled ? 'eel-popup-enabled' : '';
637
638	echo '<div class="eel-gallery-grid ' . esc_attr( $popup_class ) . '">';
639
640	foreach ( $images as $index => $image ) {
641	$image_url = \Elementor\Group_Control_Image_Size::get_attachment_image_src( $image['id'], 'thumbnail', $settings ) ?: $image['url'];
642	$full_image = wp_get_attachment_image_url( $image['id'], 'full' );
643	$caption = '';
644
645	if ( isset($settings['show_caption']) && $settings['show_caption'] === 'yes' ) {
646	if ( $settings['caption_source'] === 'media' ) {
647	$caption = wp_get_attachment_caption( $image['id'] );
648	} elseif ( $settings['caption_source'] === 'title' ) {
649	$caption = get_the_title( $image['id'] );
650	}
651	}
652
653	echo '<div class="eel-gallery-item">';
654
655	if ( $popup_enabled ) {
656	echo '<a href="' . esc_url( $full_image ) . '" class="eel-popup-link" data-index="' . esc_attr( $index ) . '" data-elementor-open-lightbox="no">';
657	} else {
658	echo '<a href="' . esc_url( $image['url'] ) . '" target="_blank" rel="noopener" data-elementor-open-lightbox="no">';
659	}
660
661	// === Image ===
662	echo '<div class="eel-gallery-image-wrap">';
663	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">';
664
665	// === Hover Content ===
666	if ( $settings['hover_style'] === 'text' && ! empty( $settings['hover_text'] ) ) {
667	echo '<div class="eel-hover-content eel-hover-text">';
668	echo '<span>' . esc_html( $settings['hover_text'] ) . '</span>';
669	echo '</div>';
670	} elseif ( $settings['hover_style'] === 'icon' && ! empty( $settings['hover_icon']['value'] ) ) {
671	echo '<div class="eel-hover-content eel-hover-icon">';
672	\Elementor\Icons_Manager::render_icon( $settings['hover_icon'], [ 'aria-hidden' => 'true' ] );
673	echo '</div>';
674	}
675
676	echo '</div>'; // .eel-gallery-image-wrap
677	echo '</a>';
678
679	// === Caption + Description ===
680	$description = '';
681	if ( isset( $settings['show_description'] ) && $settings['show_description'] === 'yes' ) {
682	$description = get_post_field( 'post_content', $image['id'] );
683	}
684
685	if ( ! empty( $caption ) \|\| ! empty( $description ) ) {
686	echo '<div class="eel-gallery-caption">';
687	if ( ! empty( $caption ) ) {
688	echo esc_html( $caption );
689	}
690	if ( ! empty( $description ) ) {
691	echo '<div class="eel-gallery-description">' . wp_kses_post( $description ) . '</div>';
692	}
693	echo '</div>';
694	}
695
696	echo '</div>'; // .eel-gallery-item
697	}
698
699	echo '</div>'; // .eel-gallery-grid
700
701	// === Lightbox ===
702	if ( $popup_enabled ) :
703	?>
704	<div class="eel-lightbox-gallery">
705	<span class="eel-close">×</span>
706	<img class="eel-lightbox-image" src="" alt="">
707	<button class="eel-prev">❮</button>
708	<button class="eel-next">❯</button>
709	</div>
710	<?php
711	endif;
712	}
713
714
715	}