gallery.php — Shortcodes and extra features for Phlox theme 2.5.13

auxin-elements / includes / elementor / widgets / gallery.php

auxin-elements / includes / elementor / widgets Last commit date

gallery.php

549 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Widget_Base;
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Scheme_Color;
8	use Elementor\Scheme_Typography;
9	use Elementor\Group_Control_Border;
10
11
12	if ( ! defined( 'ABSPATH' ) ) {
13	exit; // Exit if accessed directly.
14	}
15
16	/**
17	* Elementor 'gallery' widget.
18	*
19	* Elementor widget that displays an 'gallery' with lightbox.
20	*
21	* @since 1.0.0
22	*/
23	class Gallery extends Widget_Base {
24
25	/**
26	* Get widget name.
27	*
28	* Retrieve 'gallery' widget name.
29	*
30	* @since 1.0.0
31	* @access public
32	*
33	* @return string Widget name.
34	*/
35	public function get_name() {
36	return 'aux-gallery';
37	}
38
39	/**
40	* Get widget title.
41	*
42	* Retrieve 'gallery' widget title.
43	*
44	* @since 1.0.0
45	* @access public
46	*
47	* @return string Widget title.
48	*/
49	public function get_title() {
50	return __( 'Modern Gallery', 'auxin-elements' );
51	}
52
53	/**
54	* Get widget icon.
55	*
56	* Retrieve 'gallery' widget icon.
57	*
58	* @since 1.0.0
59	* @access public
60	*
61	* @return string Widget icon.
62	*/
63	public function get_icon() {
64	return 'eicon-gallery-grid auxin-badge';
65	}
66
67	/**
68	* Get widget categories.
69	*
70	* Retrieve 'gallery' widget icon.
71	*
72	* @since 1.0.0
73	* @access public
74	*
75	* @return string Widget icon.
76	*/
77	public function get_categories() {
78	return array( 'auxin-core' );
79	}
80
81	/**
82	* Register 'gallery' widget controls.
83	*
84	* Adds different input fields to allow the user to change and customize the widget settings.
85	*
86	* @since 1.0.0
87	* @access protected
88	*/
89	protected function _register_controls() {
90
91	$this->start_controls_section(
92	'section_gallery',
93	array(
94	'label' => __( 'Gallery Images', 'auxin-elements' ),
95	)
96	);
97
98	$this->add_control(
99	'wp_gallery',
100	array(
101	'label' => __( 'Add Images', 'auxin-elements' ),
102	'type' => Controls_Manager::GALLERY,
103	'show_label' => false,
104	'dynamic' => array(
105	'active' => true,
106	)
107	)
108	);
109
110	$this->add_control(
111	'layout',
112	array(
113	'label' => __( 'Gallery layout', 'auxin-elements' ),
114	'type' => Controls_Manager::SELECT,
115	'default' => 'grid',
116	'options' => array(
117	'grid' => __( 'Grid', 'auxin-elements' ),
118	'masonry' => __( 'Masonry', 'auxin-elements' ),
119	'tiles' => __( 'Tiles', 'auxin-elements' ),
120	),
121	)
122	);
123
124	$this->add_control(
125	'tile_style_pattern',
126	array(
127	'label' => __( 'Tile styles', 'auxin-elements' ),
128	'type' => Controls_Manager::SELECT,
129	'default' => 'default',
130	'options' => array(
131	'default' => __( 'Default', 'auxin-elements' ),
132	'pattern-1' => __( 'Pattern 1', 'auxin-elements' ),
133	'pattern-2' => __( 'Pattern 2', 'auxin-elements' ),
134	'pattern-3' => __( 'Pattern 3', 'auxin-elements' ),
135	'pattern-4' => __( 'Pattern 4', 'auxin-elements' ),
136	'pattern-5' => __( 'Pattern 5', 'auxin-elements' ),
137	'pattern-6' => __( 'Pattern 6', 'auxin-elements' ),
138	'pattern-7' => __( 'Pattern 7', 'auxin-elements' )
139	),
140	'condition' => array(
141	'layout' => 'tiles',
142	),
143	)
144	);
145
146	$gallery_columns = range( 1, 6 );
147	$gallery_columns = array_combine( $gallery_columns, $gallery_columns );
148
149	$this->add_responsive_control(
150	'columns',
151	array(
152	'label' => __( 'Columns', 'auxin-elements' ),
153	'type' => Controls_Manager::SELECT,
154	'default' => '4',
155	'tablet_default' => '2',
156	'mobile_default' => '1',
157	'options' => $gallery_columns,
158	'condition' => array(
159	'layout' => array('masonry','grid')
160	)
161	)
162	);
163
164	$this->add_control(
165	'space',
166	array(
167	'label' => __( 'Image spacing', 'auxin-elements' ),
168	'type' => Controls_Manager::SLIDER,
169	'default' => array(
170	'size' => 10,
171	),
172	'range' => array(
173	'px' => array(
174	'min' => 0,
175	'max' => 40,
176	'step' => 1,
177	)
178	),
179	'condition' => array(
180	'layout' => array('masonry','grid')
181	)
182	)
183	);
184
185	$this->add_responsive_control(
186	'image_aspect_ratio',
187	array(
188	'label' => __( 'Image aspect ratio', 'auxin-elements' ),
189	'type' => Controls_Manager::SLIDER,
190	'default' => array(
191	'size' => 0.75,
192	),
193	'range' => array(
194	'px' => array(
195	'min' => 0.1,
196	'max' => 2,
197	'step' => 0.01,
198	)
199	),
200	'selectors' => array(
201	'{{WRAPPER}} .aux-layout-masonry .aux-frame-ratio' => 'padding-bottom:calc( {{SIZE}} * 100% )'
202	),
203	'condition' => array(
204	'layout' => 'grid'
205	)
206	)
207	);
208
209	$this->add_control(
210	'link',
211	array(
212	'label' => __( 'Link to', 'auxin-elements' ),
213	'type' => Controls_Manager::SELECT,
214	'default' => 'lightbox',
215	'options' => array(
216	'file' => __( 'Media File', 'auxin-elements' ),
217	'attachment' => __( 'Attachment Page', 'auxin-elements' ),
218	'lightbox' => __( 'Lightbox', 'auxin-elements' ),
219	'none' => __( 'None', 'auxin-elements' )
220	),
221	)
222	);
223
224	$this->add_control(
225	'pagination',
226	array(
227	'label' => __( 'Pagination', 'auxin-elements' ),
228	'type' => Controls_Manager::SWITCHER,
229	'label_off' => __( 'On', 'auxin-elements' ),
230	'label_on' => __( 'Off', 'auxin-elements' ),
231	'default' => 'no'
232	)
233	);
234
235	$this->add_control(
236	'lazyload',
237	array(
238	'label' => __( 'Enable lazyload', 'auxin-elements' ),
239	'type' => Controls_Manager::SWITCHER,
240	'label_off' => __( 'On', 'auxin-elements' ),
241	'label_on' => __( 'Off', 'auxin-elements' ),
242	'default' => 'no',
243	'condition' => array(
244	'pagination' => 'yes'
245	)
246	)
247	);
248
249	$this->add_control(
250	'perpage',
251	array(
252	'label' => __( 'Images per page', 'auxin-elements' ),
253	'type' => Controls_Manager::SLIDER,
254	'range' => array(
255	'px' => array(
256	'max' => 100,
257	)
258	),
259	'default' => array(
260	'size' => 24,
261	),
262	'condition' => array(
263	'pagination' => 'yes'
264	)
265	)
266	);
267
268	$this->add_control(
269	'wp_order',
270	array(
271	'label' => __( 'Order by query', 'auxin-elements' ),
272	'type' => Controls_Manager::SWITCHER,
273	'label_off' => __( 'On', 'auxin-elements' ),
274	'label_on' => __( 'Off', 'auxin-elements' ),
275	'default' => 'no'
276	)
277	);
278
279	$this->add_control(
280	'order',
281	array(
282	'label' => __( 'Order', 'auxin-elements' ),
283	'type' => Controls_Manager::SELECT,
284	'default' => 'ASC',
285	'options' => array(
286	'ASC' => __( 'ASC', 'auxin-elements' ),
287	'DESC' => __( 'DESC', 'auxin-elements' )
288	),
289	'condition' => array(
290	'wp_order' => 'yes',
291	)
292	)
293	);
294
295	$this->add_control(
296	'orderby',
297	array(
298	'label' => __( 'Order images by', 'auxin-elements' ),
299	'type' => Controls_Manager::SELECT,
300	'default' => 'menu_order ID',
301	'options' => array(
302	'menu_order ID' => __( 'Menu Order', 'auxin-elements' ),
303	'date' => __( 'date', 'auxin-elements' ),
304	'ID' => __( 'ID', 'auxin-elements' ),
305	'none' => __( 'None', 'auxin-elements' )
306	),
307	'condition' => array(
308	'wp_order' => 'yes',
309	)
310	)
311	);
312
313	$this->end_controls_section();
314
315	/*$this->start_controls_section(
316	'section_caption',
317	array(
318	'label' => __( 'Caption', 'auxin-elements' ),
319	'tab' => Controls_Manager::TAB_STYLE,
320	)
321	);
322
323	$this->add_control(
324	'caption_display',
325	array(
326	'label' => __( 'Display', 'auxin-elements' ),
327	'type' => Controls_Manager::SELECT,
328	'default' => '',
329	'options' => array(
330	'yes' => __( 'Show', 'auxin-elements' ),
331	'no' => __( 'Hide', 'auxin-elements' ),
332	),
333	'selectors' => array(
334	'{{WRAPPER}} .gallery-item .gallery-caption' => 'display: {{VALUE}};',
335	)
336	)
337	);
338
339	$this->add_control(
340	'caption_align',
341	array(
342	'label' => __( 'Alignment', 'auxin-elements' ),
343	'type' => Controls_Manager::CHOOSE,
344	'options' => array(
345	'left' => array(
346	'title' => __( 'Left', 'auxin-elements' ),
347	'icon' => 'fa fa-align-left',
348	),
349	'center' => array(
350	'title' => __( 'Center', 'auxin-elements' ),
351	'icon' => 'fa fa-align-center',
352	),
353	'right' => array(
354	'title' => __( 'Right', 'auxin-elements' ),
355	'icon' => 'fa fa-align-right',
356	),
357	'justify' => array(
358	'title' => __( 'Justified', 'auxin-elements' ),
359	'icon' => 'fa fa-align-justify',
360	),
361	),
362	'default' => 'center',
363	'selectors' => array(
364	'{{WRAPPER}} .gallery-item .gallery-caption' => 'text-align: {{VALUE}};',
365	),
366	'condition' => array(
367	'caption_display' => 'yes'
368	),
369	)
370	);
371
372	$this->add_control(
373	'caption_color',
374	array(
375	'label' => __( 'Text Color', 'auxin-elements' ),
376	'type' => Controls_Manager::COLOR,
377	'default' => '',
378	'selectors' => array(
379	'{{WRAPPER}} .gallery-item .gallery-caption' => 'color: {{VALUE}};',
380	),
381	'condition' => array(
382	'caption_display' => 'yes'
383	),
384	)
385	);
386
387	$this->add_group_control(
388	Group_Control_Typography::get_type(),
389	array(
390	'name' => 'typography',
391	'scheme' => Scheme_Typography::TYPOGRAPHY_4,
392	'selector' => '{{WRAPPER}} .gallery-item .gallery-caption',
393	'condition' => array(
394	'caption_display' => 'yes'
395	),
396	)
397	);
398
399	$this->end_controls_section();*/
400
401	$this->start_controls_section(
402	'section_image_hover',
403	array(
404	'label' => __( 'Image Hover', 'auxin-elements' ),
405	'tab' => Controls_Manager::TAB_STYLE
406	)
407	);
408
409	$this->add_control(
410	'image_hover_overlay_color',
411	array(
412	'label' => __( 'Image hover overlay color', 'auxin-elements' ),
413	'type' => Controls_Manager::COLOR,
414	'scheme' => array(
415	'type' => Scheme_Color::get_type(),
416	'value' => Scheme_Color::COLOR_4,
417	),
418	'default' => 'rgba(0, 0, 0, 0.7)',
419	'selectors' => array(
420	'{{WRAPPER}} .aux-gallery-container .aux-frame-darken::after' => 'background-color: {{VALUE}}'
421	)
422	)
423	);
424
425	$this->add_control(
426	'image_hover_transition_duration',
427	array(
428	'label' => __( 'Image hover transition duration (milliseconds)', 'auxin-elements' ),
429	'type' => Controls_Manager::SLIDER,
430	'default' => array(
431	'size' => 1000,
432	),
433	'range' => array(
434	'px' => array(
435	'min' => 0,
436	'max' => 5000,
437	'step' => 10
438	)
439	),
440	'selectors' => array(
441	'{{WRAPPER}} .aux-gallery-container .aux-frame-darken::after, {{WRAPPER}} .aux-gallery-container .aux-frame-mask-plain' => 'transition-duration:{{SIZE}}ms;'
442	)
443	)
444	);
445
446	$this->add_control(
447	'image_hover_zoom',
448	array(
449	'label' => __( 'Image hover zoom', 'auxin-elements' ),
450	'type' => Controls_Manager::SLIDER,
451	'default' => array(
452	'size' => 120,
453	),
454	'range' => array(
455	'px' => array(
456	'min' => 0,
457	'max' => 250,
458	'step' => 1
459	)
460	),
461	'selectors' => array(
462	'{{WRAPPER}} .aux-gallery-container .aux-hover-active:hover .aux-frame-mask-plain' =>
463	'-webkit-transform: perspective(1000) translateZ(-{{SIZE}}px); transform: perspective(1000) translateZ(-{{SIZE}}px);'
464	)
465	)
466	);
467
468	$this->end_controls_section();
469
470
471	$this->start_controls_section(
472	'section_image_border',
473	array(
474	'label' => __( 'Image Border', 'auxin-elements' ),
475	'tab' => Controls_Manager::TAB_STYLE
476	)
477	);
478
479	$this->add_group_control(
480	Group_Control_Border::get_type(),
481	array(
482	'name' => 'image_border',
483	'selector' => '{{WRAPPER}} .aux-gallery-container .gallery-item .aux-frame-ratio-inner',
484	'separator' => 'before'
485	)
486	);
487
488	$this->add_control(
489	'image_border_radius',
490	array(
491	'label' => __( 'Border Radius', 'auxin-elements' ),
492	'type' => Controls_Manager::DIMENSIONS,
493	'size_units' => array( 'px', '%' ),
494	'selectors' => array(
495	'{{WRAPPER}} .aux-gallery-container .gallery-item .aux-frame-ratio-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
496	),
497	)
498	);
499
500	$this->end_controls_section();
501	}
502
503	/**
504	* Render image box widget output on the frontend.
505	*
506	* Written in PHP and used to generate the final HTML.
507	*
508	* @since 1.0.0
509	* @access protected
510	*/
511	protected function render() {
512	global $post;
513	$settings = $this->get_settings_for_display();
514
515	if ( ! $settings['wp_gallery'] ) {
516	return;
517	}
518
519	$ids = wp_list_pluck( $settings['wp_gallery'], 'id' );
520
521	// Gallery attributes
522	$args = array(
523	//'default_image_size' => 'medium',
524	'include' => $ids,
525	'order' => $settings['order'],
526	'orderby' => $settings['orderby'],
527	'columns' => $settings['columns'],
528	'tablet_cnum' => $settings['columns_tablet'],
529	'phone_cnum' => $settings['columns_mobile'],
530	'space' => $settings['space']['size'],
531	'image_aspect_ratio' => $settings['image_aspect_ratio']['size'],
532	'layout' => $settings['layout'],
533	'tile_style_pattern' => $settings['tile_style_pattern'],
534	'link' => $settings['link'],
535	'perpage' => $settings['perpage']['size'],
536	'pagination' => $settings['pagination'],
537	'lazyload' => $settings['lazyload'],
538	'wp_order' => $settings['wp_order']
539	// 'caption_display' => $settings['caption_display'],
540	// 'caption_align' => $settings['caption_align'],
541	// 'caption_color' => $settings['caption_color']
542	);
543
544	// render the markup using element base fallback
545	echo auxin_widget_gallery_callback( $args );
546	}
547
548	}
549