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

auxin-elements / includes / elements / gallery.php

auxin-elements / includes / elements Last commit date

gallery.php

654 lines

1	<?php
2	/**
3	* Filterable gallery with lightbox
4	*
5	*
6	* @package Auxin
7	* @license LICENSE.txt
8	* @author averta
9	* @link http://phlox.pro/
10	* @copyright (c) 2010-2026 averta
11	*/
12	function auxin_get_gallery_master_array( $master_array ) {
13
14	$master_array['aux_gallery'] = array(
15	'name' => __('Gallery', 'auxin-elements'),
16	'auxin_output_callback' => 'auxin_widget_gallery_callback',
17	'base' => 'aux_gallery',
18	'description' => __('Filterable and grid gallery with lightbox', 'auxin-elements'),
19	'class' => 'aux-widget-gallery',
20	'show_settings_on_create' => true,
21	'weight' => 1,
22	'is_widget' => false,
23	'is_shortcode' => true,
24	'category' => THEME_NAME,
25	'group' => '',
26	'admin_enqueue_js' => '',
27	'admin_enqueue_css' => '',
28	'front_enqueue_js' => '',
29	'front_enqueue_css' => '',
30	'icon' => 'aux-element aux-pb-icons-gallery',
31	'custom_markup' => '',
32	'js_view' => '',
33	'html_template' => '',
34	'deprecated' => '',
35	'content_element' => '',
36	'as_parent' => '',
37	'as_child' => '',
38	'params' => array(
39	array(
40	'heading' => __('Title','auxin-elements'),
41	'description' => '',
42	'param_name' => 'title',
43	'type' => 'textfield',
44	'value' => '',
45	'holder' => 'textfield',
46	'class' => 'title',
47	'admin_label' => false,
48	'dependency' => '',
49	'weight' => '',
50	'group' => '' ,
51	'edit_field_class' => ''
52	),
53	array(
54	'heading' => __('Images','auxin-elements'),
55	'description' => '',
56	'param_name' => 'include',
57	'type' => 'attach_images',
58	'value' => '',
59	'def_value' => '',
60	'holder' => '',
61	'class' => 'include',
62	'admin_label' => false,
63	'dependency' => '',
64	'weight' => '',
65	'group' => '' ,
66	'edit_field_class' => ''
67	),
68	array(
69	'heading' => __('Gallery layout','auxin-elements'),
70	'description' => '',
71	'param_name' => 'layout',
72	'type' => 'aux_visual_select',
73	'def_value' => 'grid',
74	'choices' => array(
75	'grid' => array(
76	'label' => __('Grid', 'auxin-elements'),
77	'image' => AUXIN_URL . 'images/visual-select/gallery-grid.svg'
78	),
79	'masonry' => array(
80	'label' => __('Masonry', 'auxin-elements'),
81	'image' => AUXIN_URL . 'images/visual-select/gallery-masonry.svg'
82	),
83	'tiles' => array(
84	'label' => __('Tiles', 'auxin-elements'),
85	'image' => AUXIN_URL . 'images/visual-select/gallery-tile.svg'
86	),
87	// 'justify-rows' => array(
88	// 'label' => __('Justify rows', 'auxin-elements'),
89	// 'image' => AUXIN_URL . 'images/visual-select/divider-diamond.svg'
90	// )
91	),
92	'holder' => '',
93	'class' => 'layout',
94	'admin_label' => true,
95	'dependency' => '',
96	'weight' => '',
97	'group' => '' ,
98	'edit_field_class' => ''
99	),
100	array(
101	'heading' => __( 'Post Tile styles','auxin-elements' ),
102	'description' => '',
103	'param_name' => 'tile_style_pattern',
104	'type' => 'aux_visual_select',
105	'def_value' => 'default',
106	'holder' => '',
107	'class' => 'tile_style_pattern',
108	'admin_label' => false,
109	'dependency' => array(
110	'element' => 'layout',
111	'value' => 'tiles'
112	),
113	'weight' => '',
114	'group' => __( 'Style', 'auxin-elements' ),
115	'edit_field_class' => '',
116	'choices' => array(
117	'default' => array(
118	'label' => __( 'Default', 'auxin-elements' ),
119	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-5.svg'
120	),
121	'pattern-1' => array(
122	'label' => __( 'Pattern 1', 'auxin-elements' ),
123	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-3.svg'
124	),
125	'pattern-2' => array(
126	'label' => __( 'Pattern 2', 'auxin-elements' ),
127	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-6.svg'
128	),
129	'pattern-3' => array(
130	'label' => __( 'Pattern 3', 'auxin-elements' ),
131	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-7.svg'
132	),
133	'pattern-4' => array(
134	'label' => __( 'Pattern 4', 'auxin-elements' ),
135	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-8.svg'
136	),
137	'pattern-5' => array(
138	'label' => __( 'Pattern 5', 'auxin-elements' ),
139	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-4.svg'
140	),
141	'pattern-6' => array(
142	'label' => __('Pattern 6', 'auxin-elements' ),
143	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-1.svg'
144	),
145	'pattern-7' => array(
146	'label' => __('Pattern 7', 'auxin-elements' ),
147	'image' => AUXELS_ADMIN_URL . '/assets/images/visual-select/tile-2.svg'
148	),
149	)
150	),
151	array(
152	'heading' => __('Order images by query','auxin-elements'),
153	'description' => '',
154	'param_name' => 'wp_order',
155	'type' => 'aux_switch',
156	'value' => '0',
157	'class' => '',
158	'admin_label' => false,
159	'dependency' => '',
160	'weight' => '',
161	'group' => '' ,
162	'edit_field_class' => ''
163	),
164	array(
165	'heading' => __('Order','auxin-elements'),
166	'description' => __('Order images ascending or descending','auxin-elements'),
167	'param_name' => 'order',
168	'type' => 'dropdown',
169	'def_value' => 'ASC',
170	'value' => array(
171	'ASC' => __('ASC' , 'auxin-elements'),
172	'DESC' => __('DESC', 'auxin-elements')
173	),
174	'holder' => '',
175	'class' => 'order',
176	'admin_label' => false,
177	'dependency' => array(
178	'element' => 'wp_order',
179	'value' => '1'
180	),
181	'weight' => '',
182	'group' => '' ,
183	'edit_field_class' => ''
184	),
185	array(
186	'heading' => __('Order images by','auxin-elements'),
187	'description' => '',
188	'param_name' => 'orderby',
189	'type' => 'dropdown',
190	'def_value' => 'menu_order ID',
191	'value' => array(
192	'menu_order ID' => __('Menu Order' , 'auxin-elements'),
193	'date' => __('Date' , 'auxin-elements'),
194	'ID' => __('ID' , 'auxin-elements'),
195	'none' => __('None' , 'auxin-elements')
196	),
197	'dependency' => array(
198	'element' => 'wp_order',
199	'value' => '1'
200	),
201	'holder' => '',
202	'class' => 'orderby',
203	'admin_label' => false,
204	'weight' => '',
205	'group' => '' ,
206	'edit_field_class' => ''
207	),
208	array(
209	'heading' => __('Number of columns', 'auxin-elements'),
210	'description' => '',
211	'param_name' => 'columns',
212	'type' => 'dropdown',
213	'def_value' => '4',
214	'holder' => '',
215	'class' => 'columns',
216	'value' => array(
217	'1' => '1', '2' => '2', '3' => '3',
218	'4' => '4', '5' => '5', '6' => '6'
219	),
220	'admin_label' => false,
221	'dependency' => array(
222	'element' => 'layout',
223	'value' => array( 'grid', 'masonry' )
224	),
225	'weight' => '',
226	'group' => __( 'Layout', 'auxin-elements' ),
227	'edit_field_class' => ''
228	),
229	array(
230	'heading' => __('Number of columns in tablet size', 'auxin-elements'),
231	'description' => '',
232	'param_name' => 'tablet_cnum',
233	'type' => 'dropdown',
234	'def_value' => 'inherit',
235	'holder' => '',
236	'class' => 'tablet_cnum',
237	'value' => array(
238	'inherit' => 'Inherited from larger',
239	'1' => '1', '2' => '2', '3' => '3',
240	'4' => '4', '5' => '5', '6' => '6'
241	),
242	'admin_label' => false,
243	'dependency' => array(
244	'element' => 'layout',
245	'value' => array( 'grid', 'masonry' )
246	),
247	'weight' => '',
248	'group' => __( 'Layout', 'auxin-elements' ),
249	'edit_field_class' => ''
250	),
251	array(
252	'heading' => __('Number of columns in phone size', 'auxin-elements'),
253	'description' => '',
254	'param_name' => 'phone_cnum',
255	'type' => 'dropdown',
256	'def_value' => '1',
257	'holder' => '',
258	'class' => 'phone_cnum',
259	'value' => array(
260	'1' => '1' , '2' => '2', '3' => '3'
261	),
262	'admin_label' => false,
263	'dependency' => array(
264	'element' => 'layout',
265	'value' => array( 'grid', 'masonry' )
266	),
267	'weight' => '',
268	'group' => __( 'Layout', 'auxin-elements' ),
269	'edit_field_class' => ''
270	),
271	array(
272	'heading' => __('Space','auxin-elements'),
273	'description' => __('Space between gallery items in pixel.', 'auxin-elements'),
274	'param_name' => 'space',
275	'type' => 'textfield',
276	'value' => '10',
277	'def_value' => '',
278	'holder' => '',
279	'class' => 'space',
280	'admin_label' => false,
281	'dependency' => array(
282	'element' => 'layout',
283	'value' => array( 'grid', 'masonry' )
284	),
285	'weight' => '',
286	'group' => '' ,
287	'edit_field_class' => ''
288	),
289	array(
290	'heading' => __('Image aspect ratio', 'auxin-elements'),
291	'description' => '',
292	'param_name' => 'image_aspect_ratio',
293	'type' => 'dropdown',
294	'def_value' => '0.75',
295	'holder' => '',
296	'class' => 'order',
297	'value' =>array (
298	'0.75' => __('Horizontal 4:3' , 'auxin-elements'),
299	'0.56' => __('Horizontal 16:9', 'auxin-elements'),
300	'1.00' => __('Square 1:1' , 'auxin-elements'),
301	'1.33' => __('Vertical 3:4' , 'auxin-elements')
302	),
303	'admin_label' => false,
304	'dependency' => array(
305	'element' => 'layout',
306	'value' => array( 'grid' )
307	),
308	'weight' => '',
309	'group' => '' ,
310	'edit_field_class' => ''
311	),
312	array(
313	'heading' => __('Link images to','auxin-elements'),
314	'description' => '',
315	'param_name' => 'link',
316	'type' => 'dropdown',
317	'def_value' => 'lightbox',
318	'value' => array(
319	'lightbox' => __('Lightbox', 'auxin-elements'),
320	'none' => __('None' , 'auxin-elements'),
321	'' => __('Attachment Page' , 'auxin-elements'),
322	'file' => __('File' , 'auxin-elements')
323	),
324	'holder' => '',
325	'class' => 'link',
326	'admin_label' => false,
327	'dependency' => '',
328	'weight' => '',
329	'group' => '' ,
330	'edit_field_class' => ''
331	),
332	array(
333	'heading' => __('Enable pagination','auxin-elements'),
334	'description' => '',
335	'param_name' => 'pagination',
336	'type' => 'aux_switch',
337	'value' => '0',
338	'class' => '',
339	'admin_label' => false,
340	'dependency' => '',
341	'weight' => '',
342	'group' => '' ,
343	'edit_field_class' => ''
344	),
345	array(
346	'heading' => __('Enable lazyload','auxin-elements'),
347	'description' => __('Only load images that are in visible page','auxin-elements'),
348	'param_name' => 'lazyload',
349	'type' => 'aux_switch',
350	'value' => '0',
351	'class' => '',
352	'admin_label' => false,
353	'dependency' => array(
354	'element' => 'pagination',
355	'value' => '1'
356	),
357	'weight' => '',
358	'group' => '' ,
359	'edit_field_class' => ''
360	),
361	array(
362	'heading' => __('Images per page','auxin-elements'),
363	'description' => '',
364	'param_name' => 'perpage',
365	'type' => 'textfield',
366	'value' => '24',
367	'def_value' => '',
368	'holder' => '',
369	'class' => 'id',
370	'admin_label' => false,
371	'dependency' => array(
372	'element' => 'pagination',
373	'value' => '1'
374	),
375	'weight' => '',
376	'group' => '' ,
377	'edit_field_class' => ''
378	),
379	array(
380	'heading' => __('Extra class name','auxin-elements'),
381	'description' => __('If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.', 'auxin-elements'),
382	'param_name' => 'extra_classes',
383	'type' => 'textfield',
384	'value' => '',
385	'def_value' => '',
386	'holder' => '',
387	'class' => 'extra_classes',
388	'admin_label' => false,
389	'dependency' => '',
390	'weight' => '',
391	'group' => '' ,
392	'edit_field_class' => ''
393	)
394	)
395	);
396
397	return $master_array;
398	}
399
400	add_filter( 'auxin_master_array_shortcodes', 'auxin_get_gallery_master_array', 10, 1 );
401
402	// This is the widget call back in fact the front end out put of this widget comes from this function
403	function auxin_widget_gallery_callback( $attr, $shortcode_content = null ){
404	if ( ! empty( $attr['ids'] ) ) {
405	$attr['include'] = $attr['ids'];
406	}
407
408	static $instance = 0;
409	$instance++;
410	$selector = "aux-gallery-{$instance}";
411
412	global $post;
413
414	// Defining default attributes
415	$default_atts = array(
416	'order' => 'ASC',
417	'orderby' => 'menu_order ID',
418	'id' => $post ? $post->ID : 0,
419	'columns' => 4,
420	'tablet_cnum' => 'inherit',
421	'phone_cnum' => 1,
422	'space' => 10,
423	'image_aspect_ratio' => 0.75,
424	'default_image_size' => 'medium', // empty, 'thumbnail', 'medium', 'medium_large', 'large'. default image size for grid image size
425	'layout' => 'grid', // grid, masonry, justify-rows, packery
426	'include' => '',
427	'tile_style_pattern' => 'default',
428	'link' => 'lightbox', // none, file, empty(attachment), lightbox
429	'perpage' => 24,
430	'pagination' => false,
431	'lazyload' => false,
432	'wp_order' => false,
433	'title' => '', // header title
434	'extra_classes' => '', // custom css class names for this element
435	'custom_el_id' => '', // custom id attribute for this element
436	'base_class' => 'aux-widget-gallery' // base class name for container
437	);
438
439	$result = auxin_get_widget_scafold( $attr, $default_atts );
440	extract( $result['parsed_atts'] );
441
442	// ------------------------------------------
443
444	if ( ! auxin_is_true( $wp_order ) && empty( $ids ) ) {
445	$order = 'ASC';
446	$orderby = 'post__in';
447	}
448
449	// sanitize the boolean options
450	$pagination = auxin_is_true( $pagination );
451	$lazyload = auxin_is_true( $lazyload );
452
453	$attachments = array();
454
455	if ( ! empty( $include ) ) {
456	$_attachments = get_posts(
457	array(
458	'include' => $include,
459	'post_status' => 'inherit',
460	'post_type' => 'attachment',
461	'post_mime_type' => 'image',
462	'order' => $order,
463	'orderby' => $orderby
464	)
465	);
466
467	foreach ( $_attachments as $key => $val ) {
468	$attachments[$val->ID] = $_attachments[$key];
469	}
470	}
471
472	if ( empty( $attachments ) ) {
473	return '';
474	}
475
476	if ( is_feed() ) {
477	$output = "\n";
478	foreach ( $attachments as $att_id => $attachment ) {
479	$output .= wp_get_attachment_link( $att_id, 'medium', true ) . "\n";
480	}
481	return $output;
482	}
483
484	ob_start();
485
486	// widget header ------------------------------
487	echo wp_kses_post( $result['widget_header'] );
488	echo wp_kses_post( $result['widget_title'] );
489
490	$crop = false;
491
492	if ( 'grid' == $layout ) {
493	$crop = true;
494	}
495
496	if ( empty( $layout ) \|\| 'grid' == $layout ){
497	$isotop_layout = 'masonry';
498	} elseif ( 'justify-rows' == $layout ) {
499	$isotop_layout = 'justifyRows';
500	} elseif ( 'tiles' == $layout ) {
501	$isotop_layout = 'packery';
502	} else {
503	$isotop_layout = 'masonry';
504	}
505
506	$add_lightbox = ( $link == 'lightbox' );
507	$add_caption = false;
508
509	echo "<div id='". esc_attr( $selector ) ."' class='aux-gallery galleryid-".esc_attr( $id )." gallery-columns-" . esc_attr( $columns ) . " " . ( $add_lightbox ? 'aux-lightbox-gallery' : '' ) . "'>";
510
511	// isotope attributes
512	$isotope_attrs = ' data-pagination="' . ( $pagination ? 'true' : 'false' ) . '"'.
513	' data-lazyload="' . ( $lazyload ? 'true' : 'false' ) . '"'.
514	' data-perpage="' . esc_attr( $perpage) . '"'.
515	' data-layout="' . esc_attr( $isotop_layout ) . '"'.
516	' data-space="' . esc_attr( $space ) . '"';
517
518	if ( 'tiles' == $layout ) {
519	$column_class = 'aux-tiles-layout';
520	$column_media_width = $content_width;
521	$isotope_item_classes = 'aux-iso-item';
522	} else {
523	$column_class = 'aux-row aux-de-col' . $columns;
524	if ( 'inherit' == $tablet_cnum ) {
525	$tablet_cnum = $columns;
526	}
527
528	$column_class .= ' aux-tb-col'. $tablet_cnum;
529	$column_class .= ' aux-mb-col'. $phone_cnum;
530	// Make the element clickable while editing in elementor
531	$column_class .= ' elementor-clickable';
532
533	$column_media_width = auxin_get_content_column_width( $columns, $space, $content_width );
534	$isotope_item_classes = 'aux-iso-item aux-col';
535	}
536
537	$column_media_width = round( $column_media_width );
538
539	printf( '<div class="aux-gallery-container aux-isotope-animated %s aux-no-gutter aux-layout-%s" %s >', esc_attr( $column_class ), esc_attr( $isotop_layout ), $isotope_attrs );
540
541
542	if ( $lazyload ) {
543	$isotope_item_classes .= ' aux-loading';
544
545	?>
546	<div class="aux-items-loading">
547	<div class="aux-loading-loop">
548	<svg class="aux-circle" width="100%" height="100%" viewBox="0 0 42 42">
549	<circle class="aux-stroke-bg" r="20" cx="21" cy="21" fill="none"></circle>
550	<circle class="aux-progress" r="20" cx="21" cy="21" fill="none" transform="rotate(-90 21 21)"></circle>
551	</svg>
552	</div>
553	</div>
554	<?php
555	}
556
557	$index = 0;
558
559	foreach ( $attachments as $id => $attachment ) {
560
561	$isotope_item_attrs = '';
562	$attachment_meta = wp_get_attachment_metadata( $id );
563
564	if ( $add_lightbox \|\| 'file' == $link ) {
565	$attachment_url = auxin_get_attachment_url( $id, 'full' );
566	} elseif ( 'attachment' == $link ) {
567	$attachment_url = get_attachment_link( $id );
568	} elseif( 'none' == $link ) {
569	$attachment_url = '#null';
570	$link = 'null';
571	}
572
573	$lightbox_attrs = 'data-elementor-open-lightbox="no" ';
574
575	if ( $add_lightbox ) {
576	$lightbox_attrs .= 'data-original-width="' . esc_attr( $attachment_meta['width'] ) . '" data-original-height="' . esc_attr( $attachment_meta['height'] ) . '" ' .
577	'data-caption="' . esc_attr( wp_strip_all_tags( auxin_attachment_caption( $id ) ) ) . '"';
578	}
579
580	if ( 'tiles' == $layout ) {
581	$item_pattern_info = auxin_get_tile_pattern( $tile_style_pattern , $index, $column_media_width );
582	$attachment_media = auxin_get_the_responsive_attachment(
583	$id,
584	array(
585	'preloadable' => $lazyload ? null: false,
586	'crop' => true,
587	'add_hw' => true, // whether add width and height attr or not
588	'upscale' => true,
589	'size' => $item_pattern_info['size'],
590	'image_sizes' => 'auto',
591	'srcset_sizes' => 'auto'
592	)
593
594	);
595
596	} else {
597	if ( 'masonry' == $layout ){
598	$image_aspect_ratio = 0;
599
600	$the_sizes = array(
601	array( 'width' => $column_media_width, 'height' => $column_media_width * $image_aspect_ratio ),
602	array( 'width' => 2 * $column_media_width, 'height' => 2 * $column_media_width * $image_aspect_ratio ),
603	array( 'width' => 4 * $column_media_width, 'height' => 4 * $column_media_width * $image_aspect_ratio )
604	);
605
606	} else {
607	$the_sizes = 'auto';
608	}
609
610	$image_dimension = empty( $default_image_size ) ? array( 'width' => $column_media_width, 'height' => $column_media_width * $image_aspect_ratio ) : $default_image_size;
611
612	$attachment_media = auxin_get_the_responsive_attachment(
613	$id,
614	array(
615	'preloadable' => null,
616	'preload_preview' => false,
617	'crop' => $crop,
618	'size' => $image_dimension,
619	'add_hw' => 'masonry' == $layout ? false : true, // whether add width and height attr or not
620	'upscale' => true,
621	'image_sizes' => array(
622	array( 'min' => '', 'max' => '767px', 'width' => round( 100 / $phone_cnum ).'vw' ),
623	array( 'min' => '768px', 'max' => '1025px', 'width' => round( 100 / $tablet_cnum ).'vw' ),
624	array( 'min' => '' , 'max' => '', 'width' => $column_media_width.'px' )
625	),
626	'srcset_sizes' => $the_sizes
627	)
628	);
629	}
630
631	$index ++;
632	if ( auxin_is_true( $pagination ) && $index > $perpage ) {
633	$item_classes = 'aux-iso-hidden';
634	} else {
635	$item_classes = '';
636	}
637
638	if ( 'tiles' == $layout ) {
639	$item_classes .= ' aux-image-box '. esc_attr( $item_pattern_info['classname'] );
640	}
641
642	include( locate_template( 'templates/theme-parts/entry/gallery-image.php' ) );
643	}
644
645	echo "</div></div>";
646
647	// widget footer ------------------------------
648	echo wp_kses_post( $result['widget_footer'] );
649
650	printf( '<style>.aux-parent-%s .aux-frame-ratio { padding-bottom:%s }</style>', esc_attr( $universal_id ), round( $image_aspect_ratio * 100 ) . '%' );
651
652	return ob_get_clean();
653	}
654