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

auxin-elements / includes / elements / image.php

auxin-elements / includes / elements Last commit date

image.php

580 lines

1	<?php
2	/**
3	* Image element
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_image_master_array( $master_array ) {
13
14	$master_array['aux_image'] = array(
15	'name' => __("Image", 'auxin-elements' ),
16	'auxin_output_callback' => 'auxin_widget_image_callback',
17	'base' => 'aux_image',
18	'description' => __('Image with lightbox option', 'auxin-elements' ),
19	'class' => 'aux-widget-image',
20	'show_settings_on_create' => true,
21	'weight' => 1,
22	'is_widget' => true,
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-image',
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' => __('Image title, leave it empty if you don`t need title.', 'auxin-elements'),
42	'param_name' => 'title',
43	'type' => 'textfield',
44	'value' => '',
45	'def_value' => '',
46	'holder' => 'textfield',
47	'class' => 'id',
48	'admin_label' => true,
49	'dependency' => '',
50	'weight' => '',
51	'group' => '' ,
52	'edit_field_class' => ''
53	),
54	array(
55	'heading' => __('Image','auxin-elements' ),
56	'description' => '',
57	'param_name' => 'attach_id',
58	'type' => 'attach_image',
59	'value' => '',
60	'def_value' => '',
61	'holder' => 'textfield',
62	'class' => 'attach_id',
63	'admin_label' => true,
64	'dependency' => '',
65	'weight' => '',
66	'group' => '' ,
67	'edit_field_class' => ''
68	),
69	array(
70	'heading' => __('Image hover','auxin-elements' ),
71	'description' => '',
72	'param_name' => 'attach_id_hover',
73	'type' => 'attach_image',
74	'value' => '',
75	'def_value' => '',
76	'holder' => 'textfield',
77	'class' => 'attach_id_hover',
78	'admin_label' => true,
79	'dependency' => '',
80	'weight' => '',
81	'group' => '' ,
82	'edit_field_class' => ''
83	),
84	array(
85	'heading' => __('Size','auxin-elements' ),
86	'description' => __('Choose a pre-defined or custom image size.', 'auxin-elements' ),
87	'param_name' => 'size',
88	'type' => 'dropdown',
89	'def_value' => 'medium_large',
90	'value' => array(
91	'full' => __('Original' , 'auxin-elements' ),
92	'large' => sprintf( __('Large (%sx%s)' , 'auxin-elements' ), get_option('large_size_w'), get_option('large_size_h')),
93	'medium_large' => sprintf( __('Medium Large (%sx%s)' , 'auxin-elements' ), get_option('medium_large_size_w'), get_option('medium_large_size_h', '-')),
94	'medium' => sprintf( __('Medium (%sx%s)' , 'auxin-elements' ), get_option('medium_size_w'), get_option('medium_size_h')),
95	'thumbnail' => sprintf( __('Thumbnail (%sx%s)' , 'auxin-elements' ), get_option('thumbnail_size_w'), get_option('thumbnail_size_h')),
96	'custom' => __('Custom' , 'auxin-elements' )
97	),
98	'holder' => '',
99	'admin_label' => true,
100	'dependency' => '',
101	'weight' => '',
102	'group' => '' ,
103	'edit_field_class' => ''
104	),
105
106	array(
107	'heading' => __('Width','auxin-elements' ),
108	'description' => '',
109	'param_name' => 'width',
110	'type' => 'textfield',
111	'value' => '',
112	'def_value' => '',
113	'holder' => 'textfield',
114	'class' => 'width',
115	'admin_label' => true,
116	'dependency' => array(
117	'element' => 'size',
118	'value' => array('custom')
119	),
120	'weight' => '',
121	'group' => '' ,
122	'edit_field_class' => ''
123	),
124	array(
125	'heading' => __('Height','auxin-elements' ),
126	'description' => '',
127	'param_name' => 'height',
128	'type' => 'textfield',
129	'value' => '',
130	'def_value' => '',
131	'holder' => 'textfield',
132	'class' => 'height',
133	'admin_label' => true,
134	'dependency' => array(
135	'element' => 'size',
136	'value' => array('custom')
137	),
138	'weight' => '',
139	'group' => '' ,
140	'edit_field_class' => ''
141	),
142	array(
143	'heading' => __('Alignment','auxin-elements' ),
144	'description' => __('Image alignment in content.', 'auxin-elements' ),
145	'param_name' => 'align',
146	'type' => 'dropdown',
147	'def_value' => 'alignnone',
148	'value' => array(
149	'alignleft' => __('Left' , 'auxin-elements' ),
150	'alignright' => __('Right' , 'auxin-elements' ),
151	'alignnone' => __('None' , 'auxin-elements' )
152	),
153	'holder' => '',
154	'admin_label' => true,
155	'dependency' => '',
156	'weight' => '',
157	'group' => '' ,
158	'edit_field_class' => ''
159	),
160	array(
161	'heading' => __('Iconic button','auxin-elements' ),
162	'description' => '',
163	'param_name' => 'icon',
164	'type' => 'dropdown',
165	'def_value' => 'plus',
166	'value' => array(
167	'none' => __('None', 'auxin-elements' ),
168	'plus' => __('Plus', 'auxin-elements' )
169
170	),
171	'holder' => '',
172	'class' => 'icon',
173	'admin_label' => true,
174	'dependency' => '',
175	'weight' => '',
176	'group' => '' ,
177	'edit_field_class' => ''
178	),
179	array(
180	'heading' => __('Open large image in lightbox','auxin-elements' ),
181	'description' => '',
182	'param_name' => 'lightbox',
183	'type' => 'aux_switch',
184	'value' => '0',
185	'holder' => '',
186	'class' => 'lightbox',
187	'admin_label' => true,
188	'dependency' => '',
189	'weight' => '',
190	'group' => '' ,
191	'edit_field_class' => ''
192	),
193	array(
194	'heading' => __('Preload the image','auxin-elements' ),
195	'description' => '',
196	'param_name' => 'preloadable',
197	'type' => 'aux_switch',
198	'value' => '0',
199	'holder' => '',
200	'class' => 'preloadable',
201	'admin_label' => true,
202	'dependency' => '',
203	'weight' => '',
204	'group' => '' ,
205	'edit_field_class' => ''
206	),
207	array(
208	'heading' => __('Preview preloading','auxin-elements' ),
209	'description' => '',
210	'param_name' => 'preload_preview',
211	'type' => 'aux_switch',
212	'value' => '0',
213	'holder' => '',
214	'class' => 'preload_preview',
215	'admin_label' => true,
216	'dependency' => '',
217	'weight' => '',
218	'group' => '' ,
219	'edit_field_class' => ''
220	),
221	array(
222	'heading' => __('Link URL','auxin-elements' ),
223	'description' => '',
224	'param_name' => 'link',
225	'type' => 'textfield',
226	'value' => '',
227	'def_value' => '',
228	'holder' => 'textfield',
229	'class' => 'link',
230	'admin_label' => true,
231	'dependency' => array(
232	'element' => 'lightbox',
233	'value' => array('0', 'false')
234	),
235	'weight' => '',
236	'group' => '' ,
237	'edit_field_class' => ''
238	),
239	array(
240	'heading' => __('Target','auxin-elements' ),
241	'description' => __('Open in new page or this page.','auxin-elements' ),
242	'param_name' => 'target',
243	'type' => 'dropdown',
244	'def_value' => '_self',
245	'value' => array(
246	'_self' => __('Self' , 'auxin-elements' ) ,
247	'_blank' => __('Blank' , 'auxin-elements' )
248	),
249	'holder' => '',
250	'class' => 'target',
251	'admin_label' => true,
252	'dependency' => array(
253	'element' => 'lightbox',
254	'value' => array('0', 'false')
255	),
256	'weight' => '',
257	'group' => '' ,
258	'edit_field_class' => ''
259	),
260	array(
261	'heading' => __( 'Tilt Effect','auxin-elements' ),
262	'description' => __( 'Adds tilt effect to the image.', 'auxin-elements' ),
263	'param_name' => 'tilt',
264	'type' => 'aux_switch',
265	'holder' => '',
266	'class' => 'tilt',
267	'admin_label' => true,
268	'weight' => '',
269	'group' => __( 'Effects', 'auxin-elements' ),
270	'edit_field_class' => ''
271	),
272	array(
273	'heading' => __( 'Colorized Shadow', 'auxin-elements' ),
274	'description' => __( 'Adds colorized shadow to the image. Note: This feature is not available when image hover is active.', 'auxin-elements' ),
275	'param_name' => 'colorized_shadow',
276	'type' => 'aux_switch',
277	'holder' => '',
278	'class' => 'colorized_shadow',
279	'admin_label' => true,
280	'weight' => '',
281	'group' => __( 'Effects', 'auxin-elements' ),
282	'edit_field_class' => ''
283	),
284
285	array(
286	'heading' => __('Diplay Ribbon','auxin-elements' ),
287	'description' => '',
288	'param_name' => 'display_ribbon',
289	'type' => 'aux_switch',
290	'value' => '0',
291	'holder' => '',
292	'class' => 'display_ribbon',
293	'admin_label' => true,
294	'dependency' => '',
295	'weight' => '',
296	'group' => '' ,
297	'edit_field_class' => ''
298	),
299	array(
300	'heading' => __('Text','auxin-elements'),
301	'param_name' => 'ribbon_text',
302	'type' => 'textfield',
303	'value' => '',
304	'def_value' => '',
305	'holder' => 'textfield',
306	'class' => 'ribbon_text',
307	'description' => '',
308	'admin_label' => false,
309	'dependency' => array(
310	'element' => 'display_ribbon',
311	'value' => "1",
312	),
313	'weight' => '',
314	'group' => '' ,
315	'edit_field_class' => ''
316	),
317	array(
318	'heading' => __('Ribbon Style','auxin-elements' ),
319	'param_name' => 'ribbon_style',
320	'type' => 'dropdown',
321	'def_value' => 'simple',
322	'value' => array(
323	'simple' => __('Simple' , 'auxin-elements' ) ,
324	'corner' => __('Corner' , 'auxin-elements' ),
325	'cross' => __('Cross' , 'auxin-elements' )
326	),
327	'holder' => '',
328	'class' => 'ribbon_style',
329	'admin_label' => true,
330	'dependency' => array(
331	'element' => 'display_ribbon',
332	'value' => "1",
333	),
334	'weight' => '',
335	'group' => '' ,
336	'edit_field_class' => ''
337	),
338	array(
339	'heading' => __('Ribbon Position','auxin-elements' ),
340	'param_name' => 'ribbon_position',
341	'type' => 'dropdown',
342	'def_value' => 'top-right',
343	'value' => array(
344	'top-left' => __('Top Left' , 'auxin-elements' ) ,
345	'top-right' => __('Top Right' , 'auxin-elements' ),
346	'bottom-left' => __('Bottom Left' , 'auxin-elements' ),
347	'bottom-right' => __('Bottom Right' , 'auxin-elements' ),
348	),
349	'holder' => '',
350	'class' => 'ribbon_position',
351	'admin_label' => true,
352	'dependency' => array(
353	'element' => 'display_ribbon',
354	'value' => "1",
355	),
356	'weight' => '',
357	'group' => '' ,
358	'edit_field_class' => ''
359	),
360
361	array(
362	'heading' => __('Extra class name','auxin-elements' ),
363	'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' ),
364	'param_name' => 'extra_classes',
365	'type' => 'textfield',
366	'value' => '',
367	'def_value' => '',
368	'holder' => 'textfield',
369	'class' => 'extra_classes',
370	'admin_label' => true,
371	'dependency' => '',
372	'weight' => '',
373	'group' => '' ,
374	'edit_field_class' => ''
375	)
376
377	)
378	);
379
380	return $master_array;
381	}
382
383	add_filter( 'auxin_master_array_shortcodes', 'auxin_get_image_master_array', 10, 1 );
384
385	// This is the widget call back in fact the front end out put of this widget comes from this function
386	function auxin_widget_image_callback( $atts, $shortcode_content = null ){
387
388	// Defining default attributes
389	$default_atts = array(
390	'title' => '', // header title
391	'add_content' => false,
392	'content_title' => '',
393	'content_subtitle' => '',
394	'tilt' => false,
395	'colorized_shadow' => false,
396	'attach_id' => '', // attachment id for main image
397	'attach_id_hover' => '', // attachment id for hover image
398	'link' => '', // link on image
399	'target' => '_self', // link target
400	'nofollow' => '', // link nofollow
401	'alt' => '', // alternative text
402	'size' => 'medium_large', // image size
403	'width' => '', // final width of image
404	'height' => '', // final height of image
405	'align' => 'alignnone',
406	'icon' => 'plus', // icon type. plus, zoom, none
407	'lightbox' => 'no', // open in lightbox or not
408	'preloadable' => '0',
409	'preload_preview' => '0',
410	'preload_bgcolor' => '',
411
412	'image_html' => '',
413
414	'display_ribbon' => '1',
415	'ribbon_style' => 'simple',
416	'ribbon_position' => 'top-right',
417	'ribbon_text' => '',
418
419	'extra_classes' => '', // custom css class names for this element
420	'custom_el_id' => '', // custom id attribute for this element
421	'base_class' => 'aux-widget-image' // base class name for container
422	);
423
424	$result = auxin_get_widget_scafold( $atts, $default_atts, $shortcode_content );
425	extract( $result['parsed_atts'] );
426
427	$image_primary = '';
428	$image_primary_full = '';
429	$image_secondary = '';
430	$lightbox_attrs = '';
431	$image_classes = "aux-attachment aux-featured-image aux-attachment-id-" . esc_attr( $attach_id );
432	$frame_classes = '';
433
434	if( empty( $size ) ){
435	$size = 'medium_large';
436	}
437	if( 'custom' == $size ){
438	$size = array( 'width' => $width, 'height' => $height );
439	}
440
441	if ( $add_content ) {
442	$frame_classes .= 'aux-image-box-widget-bg-cover';
443	}
444
445	if ( auxin_is_true( $tilt ) ) {
446	$frame_classes .= ' aux-tilt-box';
447	}
448
449	if ( auxin_is_true( $colorized_shadow ) && empty( $attach_id_hover ) ) {
450	$image_classes .= ' aux-img-dynamic-dropshadow';
451	}
452
453	//$elementor_lightbox = auxin_is_true( get_option( 'elementor_global_image_lightbox', false ) ) ? true : false;
454
455	if( ! empty( $attach_id ) && is_numeric( $attach_id ) ) {
456	$image_primary = auxin_get_the_responsive_attachment( $attach_id,
457	array(
458	'quality' => 100,
459	'preloadable' => auxin_is_true( $preloadable ),
460	'preload_preview' => $preload_preview,
461	'preload_bgcolor' => $preload_bgcolor,
462	'size' => $size,
463	'crop' => true,
464	'add_hw' => true,
465	'upscale' => false,
466	'original_src' => 'full' === $size ? true : false,
467	'attr' => array( 'class' => $image_classes )
468	)
469	);
470	$image_primary_full_src = auxin_get_attachment_url( $attach_id, 'full' );
471	$image_primary_meta = wp_get_attachment_metadata( $attach_id );
472
473	$lightbox_attrs = 'data-elementor-open-lightbox="no" ';
474
475	// While SVG images don't have dimension, this check is required
476	if( ! empty( $image_primary_meta['width'] ) ){
477	$lightbox_attrs .= 'data-original-width="' . $image_primary_meta['width'] . '" ';
478	}
479	if( ! empty( $image_primary_meta['height'] ) ){
480	$lightbox_attrs .= 'data-original-height="' . $image_primary_meta['height'] . '" ';
481	}
482	$lightbox_attrs .= 'data-caption="' . auxin_attachment_caption( $attach_id ) . '"';
483
484	} elseif( ! empty( $image_html ) ) {
485	$image_primary = $image_html;
486	}
487
488	if( ! empty( $attach_id_hover ) && is_numeric( $attach_id_hover ) ) {
489	$image_secondary = auxin_get_the_responsive_attachment( $attach_id_hover,
490	array(
491	'quality' => 100,
492	'preloadable' => auxin_is_true( $preloadable ),
493	'preload_preview' => $preload_preview,
494	'preload_bgcolor' => $preload_bgcolor,
495	'size' => $size,
496	'crop' => true,
497	'add_hw' => true,
498	'upscale' => false
499	)
500	);
501	}
502
503	$anchor_link = auxin_is_true( $lightbox ) ? $image_primary_full_src : esc_url( $link );
504	$anchor_class = auxin_is_true( $lightbox ) ? 'aux-lightbox-btn' : '';
505	$frame_classes .= auxin_is_true( $lightbox ) ? ' aux-media-frame aux-lightbox-frame' : '';
506	$target = $target !== '_blank' ? 'target="_self"' : 'target="_blank"';
507	$nofollow = auxin_is_true ( $nofollow ) ? ' rel="nofollow"' : '';
508
509	// hover effect
510	$hover_class = '';
511	if ( !empty($anchor_link) ) {
512	$hover_class = 'aux-hover-active';
513	}
514
515	$overflow_class = '';
516	if( $ribbon_style === 'corner' ) {
517	$overflow_class = ' aux-hidden-overflow';
518	}
519
520	// add alignment class on main element
521	$result['widget_header'] = str_replace( $base_class, $base_class.' aux-'. esc_attr( $align ), $result['widget_header'] );
522
523	ob_start();
524
525	// widget header ------------------------------
526	echo wp_kses_post( $result['widget_header'] );
527	echo wp_kses_post( $result['widget_title'] );
528
529	// widget output -----------------------
530	?>
531
532	<div class="aux-media-hint-frame ">
533	<div class="aux-media-image <?php echo esc_attr( $hover_class ); echo esc_attr( $frame_classes ); echo esc_attr( $overflow_class ); ?>" >
534	<?php if( !empty($anchor_link) ) { ?>
535	<a class="<?php echo esc_attr( $anchor_class ); ?>" href="<?php echo esc_url( $anchor_link ); ?>" <?php echo wp_kses_post( $lightbox_attrs ) . ' ' . wp_kses_post( $target ) . ' ' . wp_kses_post( $nofollow ); ?> >
536	<?php } ?>
537
538	<?php if ( auxin_is_true( $display_ribbon ) && ! empty( $ribbon_text ) ) { ?>
539	<div class="aux-ribbon-wrapper aux-<?php echo esc_attr( $ribbon_style );?>-ribbon <?php echo esc_attr( $ribbon_position );?>">
540	<span><?php echo esc_html( $ribbon_text );?></span>
541	</div>
542	<?php } ?>
543
544
545	<?php if( 'plus' == $icon && empty( $image_secondary ) ) { ?>
546	<div class='aux-hover-scale-circle-plus'>
547	<span class='aux-symbol-plus'></span>
548	<span class='aux-symbol-circle'></span>
549	</div>
550	<?php } ?>
551
552	<?php if ( !empty( $image_secondary ) ) { ?>
553	<div class="aux-image-holder aux-image-has-secondary">
554	<?php echo auxin_kses( $image_primary ); ?>
555	<?php echo auxin_kses( $image_secondary ); ?>
556	</div>
557	<?php } else {
558	if ( auxin_is_true( $lightbox ) ) { ?>
559	<div class="aux-frame-mask aux-frame-darken">
560	<?php echo auxin_kses( $image_primary ); ?>
561	</div>
562	<?php } else {
563	echo auxin_kses( $image_primary );
564	} ?>
565	<?php } ?>
566
567	<?php if( ! empty( $anchor_link ) ) { ?>
568	</a>
569	<?php } ?>
570	</div>
571	</div>
572
573	<?php
574
575	// widget footer ------------------------------
576	echo wp_kses_post( $result['widget_footer'] );
577
578	return ob_get_clean();
579	}
580