PluginProbe
Filter Gallery / 1.1.2
Filter Gallery v1.1.2
1.1.4 1.1.3 1.1.2 trunk 0.0.1 0.0.2 0.0.3 0.0.4 0.0.5 0.0.6 0.0.7 0.0.8 0.0.9 0.1.0 0.1.1 0.1.2 0.1.3 0.1.4 0.1.5 0.1.6 0.1.7 0.1.8 0.1.9 0.2.0 0.2.1 All 27 releases
filter-gallery / shortcode.php

shortcode.php in Filter Gallery 1.1.2, at shortcode.php

841 lines 33.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 if (!defined('ABSPATH'))
3 exit; // Exit if accessed directly
4
5 if (!function_exists('ufg_hex2rgba')) {
6 function ufg_hex2rgba($hex, $opacity = 0.4) {
7 $hex = str_replace("#", "", $hex);
8 if(strlen($hex) == 3) {
9 $r = hexdec(substr($hex,0,1).substr($hex,0,1));
10 $g = hexdec(substr($hex,1,1).substr($hex,1,1));
11 $b = hexdec(substr($hex,2,1).substr($hex,2,1));
12 } else {
13 $r = hexdec(substr($hex,0,2));
14 $g = hexdec(substr($hex,2,2));
15 $b = hexdec(substr($hex,4,2));
16 }
17 return "rgba($r, $g, $b, $opacity)";
18 }
19 }
20
21 add_shortcode('ufg', 'ufg_shortcode_callback');
22 function ufg_shortcode_callback($atts){
23 ob_start();
24 //echo "<hr>";
25 //defaults
26 $ufg_filters = array();
27 $ufg_gallery = array();
28
29 // Get plugin version
30 $ufg_last_version = get_option('ufg_current_version');
31 //get gallery id
32 if (is_array($atts) && isset($atts['id'])) {
33 $ufg_gallery_id = $atts['id'];
34 $ufg_selected_filter_btn_id = "";
35
36 //get dynamic select filter button id via shortcode parameter
37 if (is_array($atts) && array_key_exists('selected-filter', $atts)) {
38 $ufg_selected_filter_btn_id = sanitize_text_field($atts['selected-filter']);
39 }
40 //get dynamic select filter button id via URL parameter
41 // phpcs:ignore WordPress.Security.NonceVerification.Recommended
42 if (isset($_GET['selected-filter'])) {
43 // phpcs:ignore WordPress.Security.NonceVerification.Recommended
44 $ufg_selected_filter_btn_id = sanitize_text_field(wp_unslash($_GET['selected-filter']));
45 }
46
47 $ufg_details = get_option("ufg_details_".$ufg_gallery_id);
48 $ufg_filters = get_option("ufg_filters_".$ufg_gallery_id);
49 $ufg_gallery = get_option("ufg_gallery_".$ufg_gallery_id);
50 $ufg_setting = get_option("ufg_settings_".$ufg_gallery_id);
51
52 if (!is_array($ufg_details)) $ufg_details = array();
53 if (!is_array($ufg_filters)) $ufg_filters = array();
54 if (!is_array($ufg_gallery)) $ufg_gallery = array();
55 if (!is_array($ufg_setting)) $ufg_setting = array();
56
57 // Normalize filters
58 if (function_exists('ufg_normalize_filters_recursive')) {
59 ufg_normalize_filters_recursive($ufg_filters);
60 }
61
62 // Merge settings with default settings to prevent undefined key notices
63 $default_settings = array(
64 'show_filters' => 1,
65 'show_filters_icon' => 1,
66 'enable_deep_linking' => 0,
67 'show_filters_count' => 1,
68 'show_search_box' => 0,
69 'search_box_placeholder' => 'Type here to search images',
70 'show_all_button' => 1,
71 'all_button_text' => 'All',
72 'all_button_icon' => 'fas fa-filter',
73 'all_button_color' => '#ffffff',
74 'all_button_bg_color' => '#0A85ED',
75 'parent_button_color' => '#4F46E5',
76 'parent_button_bg_color' => '#EEF2FF',
77 'parent_button_hover_color' => '#4338CA',
78 'parent_active_button_color' => '#FFFFFF',
79 'parent_active_button_bg_color' => '#4F46E5',
80 'parent_filters_heading' => '',
81 'l1_filters_heading' => '',
82 'l1_button_color' => '#4F46E5',
83 'l1_button_bg_color' => '#EEF2FF',
84 'child_filter_effect' => 'show_hide',
85 'active_button_color' => '#FFFFFF',
86 'active_button_bg_color' => '#4F46E5',
87 'l2_button_color' => '#4F46E5',
88 'l2_button_bg_color' => '#EEF2FF',
89 'l3_button_color' => '#4F46E5',
90 'l3_button_bg_color' => '#EEF2FF',
91 'l4_button_color' => '#4F46E5',
92 'l4_button_bg_color' => '#EEF2FF',
93 'columns_desktop' => 4,
94 'columns_tab' => 3,
95 'columns_mobile_landscape' => 3,
96 'columns_mobile_portrait' => 2,
97 'thumbnail_image' => 1,
98 'thumbnail_image_size' => 'full',
99 'thumbnail_border' => 1,
100 'thumbnail_border_thickness' => 1,
101 'thumbnail_border_color' => '#ffffff',
102 'thumbnail_bg_color' => '#222a33',
103 'image_title' => 1,
104 'image_title_font_size' => 18,
105 'image_title_color' => '#FFFFFF',
106 'image_description' => 1,
107 'image_description_font_size' => 14,
108 'image_description_color' => '#FFFFFF',
109 'image_description_text_limit' => 60,
110 'image_hover_effect' => 'border_overlay',
111 'read_more_link_sh' => 0,
112 'read_more_link' => 1,
113 'read_more_button_text' => 'Read More Link',
114 'read_more_button_icon' => 'fas fa-link',
115 'read_more_button_color' => '#ffffff',
116 'read_more_button_bg_color' => '#0080ff',
117 'read_more_button_target' => '_self',
118 'image_sorting' => 5,
119 'image_search' => 1,
120 'lightbox' => 1,
121 'lightbox_title' => 1,
122 'lightbox_description' => 0,
123 'lightbox_numbering' => 0,
124 'custom_css' => '',
125 'load_more' => 'off',
126 'load_limit' => 10,
127 'load_color' => '#0080ff',
128 'load_txt_color' => '#FFFFFF',
129 'load_btn_txt' => 'Load More',
130 'filter_style' => 'buttons',
131 'combine_filter_search' => '0',
132 'filter_padding' => '10px 15px',
133 'filter_margin' => '5px',
134 'filter_padding_type' => 'medium',
135 'filter_padding_v' => '12',
136 'filter_padding_h' => '24',
137 'filter_margin_val' => '5',
138 'l1_button_hover_color' => '#059669',
139 'l1_active_button_color' => '#FFFFFF',
140 'l1_active_button_bg_color' => '#059669',
141 'l2_button_hover_color' => '#4F46E5',
142 'l2_active_button_color' => '#FFFFFF',
143 'l2_active_button_bg_color' => '#4F46E5',
144 'l3_button_hover_color' => '#D97706',
145 'l3_active_button_color' => '#FFFFFF',
146 'l3_active_button_bg_color' => '#D97706',
147 'l4_button_hover_color' => '#E11D48',
148 'l4_active_button_color' => '#FFFFFF',
149 'l4_active_button_bg_color' => '#E11D48'
150 );
151 $ufg_setting = array_merge($default_settings, $ufg_setting);
152 if(empty($ufg_selected_filter_btn_id)) {
153 if(isset($ufg_setting['default_filter']) && $ufg_setting['default_filter'] != '') {
154 if($ufg_setting['default_filter'] == 'none') {
155 $ufg_selected_filter_btn_id = 'none';
156 } elseif($ufg_setting['default_filter'] == 'all') {
157 $ufg_selected_filter_btn_id = '1evel1-all';
158 } else {
159 $target_class = $ufg_setting['default_filter'];
160 if (!function_exists('ufg_find_filter_level_id')) {
161 function ufg_find_filter_level_id($filters, $target, $level = 1) {
162 if(is_array($filters) || is_object($filters)) {
163 foreach($filters as $f) {
164 if(!isset($f->filterkey)) continue;
165 $f_class = str_replace(" ", "-", strtolower($f->filterkey));
166 if ($f_class === $target) {
167 $prefix = $level == 1 ? "1evel1-" : "level" . $level . "-";
168 return $prefix . $f_class;
169 }
170 if (!empty($f->children)) {
171 $res = ufg_find_filter_level_id($f->children, $target, $level + 1);
172 if ($res) return $res;
173 }
174 }
175 }
176 return "";
177 }
178 }
179 $found_id = ufg_find_filter_level_id($ufg_filters, $target_class);
180 if($found_id) {
181 $ufg_selected_filter_btn_id = $found_id;
182 } else {
183 $ufg_selected_filter_btn_id = '1evel1-all';
184 }
185 }
186 } else {
187 $ufg_selected_filter_btn_id = '1evel1-all'; // Default to all if not set
188 }
189 }
190 //if(isset($ufg_gallery['ufg-filter-image'])) $filter_image = $ufg_gallery['ufg-filter-image']; else $filter_image = array();
191 if(isset($ufg_gallery['ufg-attachment-id'])) $ufg_total_images = count($ufg_gallery['ufg-attachment-id']); else $ufg_total_images = '';
192 //$ufg_total_images = count($ufg_gallery['ufg-attachment-id']);
193 // loading saved settings and shortcode supported settings
194 include_once('setting.php');
195
196 // modifiing fiters array for load more
197 $ufg_modified_array = array();
198
199 //$ufg_selected_array = $ufg_gallery['ufg-image-filters'];
200 $ufg_selected_array = array();
201 foreach($ufg_selected_array as $key1 => $value1){
202 if(is_array($value1) == true){
203 foreach($value1 as $key2 => $value2) {
204 $value2;
205 if(array_key_exists($value2, $ufg_modified_array)){
206 // do nothing
207 } else {
208 $ufg_modified_array[$value2] = array();
209 }
210 }
211 }
212 }
213
214 foreach($ufg_selected_array as $key1 => $value1){
215 if(is_array($value1) == true){
216 foreach($value1 as $key2 => $value2) {
217 $value2;
218 //check filter key exist in modified array
219 if(array_key_exists($value2, $ufg_modified_array)){
220 array_push( $ufg_modified_array[$value2], $key1 );
221 } else {
222 // do nothing
223 }
224 }
225 }
226 }
227 $filter_image = $ufg_modified_array;
228
229
230 // print filters
231 include_once('filters.php');
232
233 $ufg_setting_f = get_option("ufg_settings_".$ufg_gallery_id); // separate load for filters scope
234
235 $j = 0;
236 $new_array = array();
237 $new_array_final = array();
238 if (is_array($ufg_gallery) && array_key_exists('ufg-image-filters', $ufg_gallery)) {
239 foreach($ufg_gallery['ufg-image-filters'] as $key => $array) {
240 if (is_array($array)) {
241 foreach($array as $key2 => $val) {
242 //array_push($new_array[], $val);
243 $new_array[$val][$j] = $key;
244 }
245 }
246 $j++;
247 }
248 foreach($new_array as $new_key => $new_val) {
249 $new_re_in = array_values($new_val);
250 $new_array_final[$new_key] = $new_re_in;
251 }
252 $filter_image = $new_array_final;
253
254 if (!function_exists('ufg_expand_filter_images_hierarchy')) {
255 function ufg_expand_filter_images_hierarchy($filters, &$filter_images) {
256 $all_images = array();
257 if (is_array($filters)) {
258 foreach ($filters as $f) {
259 if (!isset($f->filterkey)) continue;
260 $key = str_replace(" ", "-", strtolower(trim($f->filterkey)));
261
262 $my_images = isset($filter_images[$key]) ? $filter_images[$key] : array();
263
264 if (isset($f->children) && is_array($f->children)) {
265 ufg_expand_filter_images_hierarchy($f->children, $filter_images);
266 }
267
268 $my_images = array_values(array_unique($my_images));
269 if (!empty($my_images)) {
270 $filter_images[$key] = $my_images;
271 }
272 $all_images = array_merge($all_images, $my_images);
273 }
274 }
275 return array_unique($all_images);
276 }
277 }
278 if (!empty($ufg_filters)) {
279 ufg_expand_filter_images_hierarchy($ufg_filters, $filter_image);
280 }
281 }
282
283 include_once('gallery.php');
284 if($ufg_lightbox_numbering) $ufg_lightbox_numbering = "true"; else $ufg_lightbox_numbering = "false";
285
286 // load required resource
287 //CSS and JS
288 wp_enqueue_script( 'imagesloaded' );
289 wp_enqueue_script( 'ufg-isotope-js', plugins_url( '/admin/assets/js/isotope.pkgd.min.js' , __FILE__ ), array( 'jquery', 'imagesloaded' ), '1.0', true );
290 wp_enqueue_style( 'ufg-frontend-css', plugins_url( '/admin/assets/css/ufg-frontend.css' , __FILE__ ), array(), UFG_VERSION );
291 wp_enqueue_style( 'ufg-lightbox-css', plugins_url( '/admin/assets/lightbox/lokesh/css/lightbox.css' , __FILE__ ), array(), '1.0' );
292
293 wp_enqueue_style( 'ufg-fontawesome-css', plugins_url( '/admin/assets/fontawesome-free-5.3.1-web/css/all.min.css' , __FILE__ ), array(), '1.0' );
294 wp_enqueue_script( 'ufg-custom-js', plugins_url( '/admin/assets/js/ufg-custom.js' , __FILE__ ), array( 'jquery', 'imagesloaded', 'ufg-isotope-js' ), UFG_VERSION, true );
295 wp_enqueue_script( 'ufg-lightbox-js', plugins_url( '/admin/assets/lightbox/lokesh/js/lightbox.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
296 wp_add_inline_script( 'ufg-custom-js', 'const UFGJS = ' . wp_json_encode( array(
297 'ajaxUrl' => admin_url( 'admin-ajax.php' ),
298 'LoadMoreNonce' => wp_create_nonce( 'ufg_load_more_nonce' ),
299 'GalleryId' => $ufg_gallery_id,
300 'FiterImage' => $filter_image,
301 'TotalImages' => $ufg_total_images,
302 'LoadBtnText' => $load_btn_txt,
303 'LoadMore' => 'off',
304 'LoadLimit' => $load_limit,
305 'ChildFilterEffect' => $ufg_child_filter_effect,
306 'Lightbox' => ($ufg_lightbox === 'on' || $ufg_lightbox == 1 || $ufg_lightbox === '1' || $ufg_lightbox === true),
307 'LightboxNumbering' => false,
308 'LightboxTitle' => ($ufg_lightbox_title === "on" || $ufg_lightbox_title === "1" || $ufg_lightbox_title == 1 || $ufg_lightbox_title === true),
309 'LightboxDescription' => false,
310 'SelectedFltrBtnId' => $ufg_selected_filter_btn_id,
311 'EnableDeepLinking' => false,
312 )), 'before' );
313 ?>
314 <!-- printing filters start-->
315 <div class="fg-content-wrapper" version="<?php echo esc_attr($ufg_last_version); ?>">
316 <?php
317 $ufg_has_images = !empty($ufg_gallery['ufg-attachment-id']);
318 $ufg_has_filters = !empty($ufg_filters);
319 $ufg_images_have_filters = false;
320 if ($ufg_has_images && !empty($ufg_gallery['ufg-image-filters']) && is_array($ufg_gallery['ufg-image-filters'])) {
321 foreach ($ufg_gallery['ufg-image-filters'] as $img_id => $img_fltrs) {
322 if (!empty($img_fltrs) && is_array($img_fltrs)) {
323 foreach ($img_fltrs as $f_val) {
324 if (trim($f_val) !== '') {
325 $ufg_images_have_filters = true;
326 break 2;
327 }
328 }
329 }
330 }
331 }
332
333 if (current_user_can('manage_options')) {
334 if (!$ufg_has_images || !$ufg_has_filters) {
335 $ufg_manage_link = admin_url('admin.php?page=ufg-manage-gallery&id=' . $ufg_gallery_id);
336 ?>
337 <div class="ufg-admin-notice-box">
338 <div class="ufg-notice-flex">
339 <i class="fas fa-exclamation-triangle ufg-notice-icon"></i>
340 <div class="ufg-notice-content">
341 <strong class="ufg-notice-title"><?php esc_html_e('Filter Gallery Configuration Notice', 'filter-gallery'); ?></strong>
342 <span class="ufg-notice-text"><?php esc_html_e('please add images to gallery and assign filter on it for proper working.', 'filter-gallery'); ?></span>
343 <div class="ufg-notice-actions">
344 <a href="<?php echo esc_url($ufg_manage_link); ?>" class="ufg-notice-btn">
345 <?php esc_html_e('Go to Admin Dashboard to Redetect / Configure', 'filter-gallery'); ?>
346 </a>
347 </div>
348 </div>
349 </div>
350 </div>
351 <?php
352 }
353 } else {
354 if (!$ufg_has_images) {
355 ?>
356 <div class="ufg-visitor-notice-box">
357 <i class="far fa-images ufg-visitor-icon"></i>
358 <span class="ufg-visitor-text"><?php esc_html_e('No images added into gallery.', 'filter-gallery'); ?></span>
359 </div>
360 <?php
361 }
362 }
363 ?>
364 <?php
365 $show_search_box = (isset($ufg_setting['show_search_box']) && $ufg_setting['show_search_box'] == '1');
366 $ufg_combine_filter_search = '0';
367 ?>
368 <?php if($show_search_box) { ?>
369 <div class="ufg-row">
370 <div class="ufg-search-container ufg-uncombined-search">
371 <input type="text" class="ufg-search-input" placeholder="<?php echo esc_attr(isset($ufg_setting['search_box_placeholder']) ? $ufg_setting['search_box_placeholder'] : 'Type here to search images'); ?>" data-gallery-id="<?php echo esc_attr($ufg_gallery_id); ?>">
372 </div>
373 </div>
374 <?php } ?>
375 <?php if($ufg_show_filters) { ?>
376 <div class="ufg-row">
377 <div class="ufg-filter-container ufg-uncombined-filter ufg-filters-<?php echo esc_attr($ufg_gallery_id); ?> ufg-filter-style-<?php echo esc_attr($ufg_filter_style); ?>">
378 <?php ufg_filters($ufg_gallery_id, $ufg_filters, $ufg_gallery, $atts); ?>
379 </div>
380 </div>
381 <?php } ?>
382
383 <input id="ufg_current_clicked_filter_id" name="ufg_current_clicked_filter_id" value="" class="ufg-hidden" placeholder="Current Filter">
384 <input id="ufg_current_clicked_filter_level" name="ufg_current_clicked_filter_level" value="" class="ufg-hidden" placeholder="Current Level">
385 <input id="ufg_last_clicked_filter_id" name="ufg_last_clicked_filter_id" value="" class="ufg-hidden" placeholder="Last Filter">
386 <input id="ufg_last_clicked_filter_level" name="ufg_last_clicked_filter_level" value="" class="ufg-hidden" placeholder="Last Level">
387 <input id="ufg_current_clicked_parent_filter_id" name="ufg_current_clicked_parent_filter_id" value="" class="ufg-hidden" placeholder="Current Parent Filter">
388 <input id="ufg_last_clicked_filter_parent_id" name="ufg_last_clicked_filter_parent_id" value="" class="ufg-hidden" placeholder="Last Parent Filter">
389
390 <!-- printing gallery start-->
391 <div class="ufg-row ufg-gallery-container ufg-gallery-<?php echo esc_attr($ufg_gallery_id); ?>">
392 <div class="ufg-gallery-loader">
393 <div class="ufg-loader-card">
394 <div class="ufg-loader-spinner-box">
395 <div class="ufg-loader-ring"></div>
396 <div class="ufg-loader-bg-circle">
397 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
398 <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
399 <circle cx="9" cy="9" r="2"/>
400 <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
401 </svg>
402 </div>
403 </div>
404 <h3 class="ufg-loader-title"><?php esc_html_e('Loading Filter Gallery...', 'filter-gallery'); ?></h3>
405 <p class="ufg-loader-subtitle"><?php esc_html_e('Please wait while the gallery is initializing', 'filter-gallery'); ?></p>
406 </div>
407 </div>
408 <?php ufg_gallery($ufg_gallery_id, $ufg_gallery, $ufg_images_per_page, $atts); ?>
409 </div>
410 <!-- printing gallery end-->
411 </div>
412
413 <style>
414 /* Load more color overrides */
415 .fg-load-more button {
416 color: <?php echo esc_html($load_txt_color); ?> !important;
417 background-color: <?php echo esc_html($load_color); ?> !important;
418 border-color: <?php echo esc_html($load_color); ?> !important;
419 }
420
421 /* Combined Row CSS */
422 .fg-content-wrapper .ufg-combined-row {
423 display: flex !important;
424 flex-wrap: wrap !important;
425 align-items: flex-start !important;
426 justify-content: space-between !important;
427 gap: 20px !important;
428 margin-bottom: 20px !important;
429 padding-left: 15px !important;
430 padding-right: 15px !important;
431 box-sizing: border-box !important;
432 }
433 .fg-content-wrapper .ufg-combined-row .ufg-filter-group-inner {
434 padding-left: 0 !important;
435 padding-right: 0 !important;
436 }
437 .fg-content-wrapper .ufg-combined-row .ufg-filter-container {
438 flex: 1 1 0% !important;
439 min-width: 250px !important;
440 margin-bottom: 0 !important;
441 }
442 .fg-content-wrapper .ufg-combined-row .ufg-search-container {
443 flex: 0 0 300px !important;
444 width: 300px !important;
445 margin-top: 0 !important;
446 margin-bottom: 0 !important;
447 }
448 .fg-content-wrapper .ufg-combined-row .ufg-search-input {
449 width: 100% !important;
450 max-width: 100% !important;
451 box-sizing: border-box !important;
452 padding: <?php echo esc_html($ufg_filter_padding); ?> !important;
453 margin-top: <?php echo esc_html($ufg_filter_margin); ?> !important;
454 margin-bottom: <?php echo esc_html($ufg_filter_margin); ?> !important;
455 margin-left: 0 !important;
456 margin-right: 0 !important;
457 line-height: 1.5 !important;
458 font-size: inherit !important;
459 height: auto !important;
460 min-height: 0 !important;
461 }
462 .fg-content-wrapper .ufg-uncombined-search {
463 margin-bottom: 20px !important;
464 padding-left: 15px !important;
465 padding-right: 15px !important;
466 box-sizing: border-box !important;
467 width: 100% !important;
468 }
469 .fg-content-wrapper .ufg-uncombined-search .ufg-search-input {
470 width: 100% !important;
471 max-width: 100% !important;
472 box-sizing: border-box !important;
473 padding: <?php echo esc_html($ufg_filter_padding); ?> !important;
474 margin-top: <?php echo esc_html($ufg_filter_margin); ?> !important;
475 margin-bottom: <?php echo esc_html($ufg_filter_margin); ?> !important;
476 line-height: 1.5 !important;
477 font-size: inherit !important;
478 height: auto !important;
479 min-height: 0 !important;
480 }
481 .fg-content-wrapper .ufg-uncombined-filter {
482 margin-bottom: 20px !important;
483 padding-left: 15px !important;
484 padding-right: 15px !important;
485 box-sizing: border-box !important;
486 width: 100% !important;
487 }
488 .fg-content-wrapper .ufg-filter-group-inner {
489 padding-left: 0 !important;
490 padding-right: 0 !important;
491 }
492
493 /* Dropdown select container & select box styles matching search input */
494 .fg-content-wrapper .ufg-filter-dropdown-container {
495 width: 100% !important;
496 box-sizing: border-box !important;
497 }
498 .fg-content-wrapper select.ufg-filter-dropdown {
499 padding: <?php echo esc_html($ufg_filter_padding); ?> !important;
500 padding-right: 40px !important;
501 margin-top: <?php echo esc_html($ufg_filter_margin); ?> !important;
502 margin-bottom: <?php echo esc_html($ufg_filter_margin); ?> !important;
503 margin-left: 0 !important;
504 margin-right: 0 !important;
505 line-height: 1.5 !important;
506 font-size: inherit !important;
507 height: auto !important;
508 min-height: 0 !important;
509 border: 1px solid #e5e7eb !important;
510 border-radius: 6px !important;
511 background-color: #fff !important;
512 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") !important;
513 background-repeat: no-repeat !important;
514 background-position: right 15px center !important;
515 background-size: 16px !important;
516 color: #374151 !important;
517 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
518 outline: none !important;
519 width: 100% !important;
520 max-width: 100% !important;
521 box-sizing: border-box !important;
522 cursor: pointer !important;
523 display: block !important;
524 -webkit-appearance: none !important;
525 -moz-appearance: none !important;
526 appearance: none !important;
527 }
528
529 /* Level-by-Level Custom Colors for Dropdown Options */
530 .fg-content-wrapper select.ufg-filter-dropdown option.ufg-opt-all {
531 color: <?php echo esc_html($ufg_all_button_color); ?> !important;
532 background-color: <?php echo esc_html($ufg_all_button_bg_color); ?> !important;
533 }
534 .fg-content-wrapper select.ufg-filter-dropdown option.ufg-opt-parent {
535 color: <?php echo esc_html($ufg_parent_button_color); ?> !important;
536 background-color: <?php echo esc_html($ufg_parent_button_bg_color); ?> !important;
537 }
538
539 /* filters CSS and Custom Spacings */
540 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> button.filters {
541 <?php if(!empty($ufg_filter_padding)) { ?>
542 padding: <?php echo esc_html($ufg_filter_padding); ?> !important;
543 <?php } ?>
544 <?php if(!empty($ufg_filter_margin)) { ?>
545 margin: <?php echo esc_html($ufg_filter_margin); ?> !important;
546 <?php } ?>
547 }
548 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-filter-group-inner > button:first-of-type {
549 margin-left: 0 !important;
550 }
551 /* All Button Style */
552 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-all-filter-button {
553 color: <?php echo esc_html($ufg_parent_button_color); ?> !important;
554 background-color: <?php echo esc_html($ufg_parent_button_bg_color); ?> !important;
555 border-color: <?php echo esc_html($ufg_parent_button_bg_color); ?> !important;
556 }
557 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-all-filter-button:hover {
558 color: <?php echo esc_html($parent_button_hover_color); ?> !important;
559 }
560 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-all-filter-button.active-filter,
561 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-all-filter-button.active {
562 color: <?php echo esc_html(!empty($parent_active_button_color) ? $parent_active_button_color : $ufg_all_button_color); ?> !important;
563 background-color: <?php echo esc_html(!empty($parent_active_button_bg_color) ? $parent_active_button_bg_color : $ufg_all_button_bg_color); ?> !important;
564 border-color: <?php echo esc_html(!empty($parent_active_button_bg_color) ? $parent_active_button_bg_color : $ufg_all_button_bg_color); ?> !important;
565 }
566
567 /* Level 1 (Parent) */
568 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-parent-filter-button {
569 color: <?php echo esc_html($ufg_parent_button_color); ?> !important;
570 background-color: <?php echo esc_html($ufg_parent_button_bg_color); ?> !important;
571 border-color: <?php echo esc_html($ufg_parent_button_bg_color); ?> !important;
572 }
573 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-parent-filter-button:hover {
574 color: <?php echo esc_html($parent_button_hover_color); ?> !important;
575 }
576 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-parent-filter-button.active-filter,
577 .ufg-filters-<?php echo esc_html($ufg_gallery_id); ?> .ufg-parent-filter-button.active {
578 color: <?php echo esc_html($parent_active_button_color); ?> !important;
579 background-color: <?php echo esc_html($parent_active_button_bg_color); ?> !important;
580 border-color: <?php echo esc_html($parent_active_button_bg_color); ?> !important;
581 }
582
583 /* Dropdown Select Style */
584 .ufg-filter-dropdown-container {
585 width: 100% !important;
586 max-width: 320px !important;
587 display: inline-block !important;
588 margin-bottom: 15px !important;
589 }
590 .ufg-filter-dropdown,
591 .ufg-filter-dropdown option {
592 font-family: 'Font Awesome 5 Free', 'FontAwesome', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
593 font-weight: 900 !important;
594 }
595 .ufg-filter-dropdown {
596 width: 100% !important;
597 padding: 10px 15px !important;
598 border: 1px solid #e2e8f0 !important;
599 border-radius: 8px !important;
600 font-size: 14px !important;
601 color: #334155 !important;
602 background-color: #ffffff !important;
603 background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23475569%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
604 background-repeat: no-repeat !important;
605 background-position: right 12px center !important;
606 background-size: 16px !important;
607 -webkit-appearance: none !important;
608 -moz-appearance: none !important;
609 appearance: none !important;
610 cursor: pointer !important;
611 transition: border-color 0.2s, box-shadow 0.2s !important;
612 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
613 }
614 .ufg-filter-dropdown:focus {
615 border-color: #0c63e7 !important;
616 outline: none !important;
617 box-shadow: 0 0 0 3px rgba(12, 99, 231, 0.15) !important;
618 }
619
620 /* Mobile Responsive Scroll Menu */
621 @media (max-width: 767px) {
622 .ufg-filter-group-inner {
623 display: flex !important;
624 overflow-x: auto !important;
625 white-space: nowrap !important;
626 flex-wrap: nowrap !important;
627 -webkit-overflow-scrolling: touch !important;
628 padding-bottom: 8px !important;
629 margin-bottom: 5px !important;
630 }
631 .ufg-filter-group-inner::-webkit-scrollbar {
632 display: none !important;
633 }
634 .ufg-filter-group-inner button.filters {
635 flex: 0 0 auto !important;
636 display: inline-block !important;
637 }
638 }
639
640 .ufg-grid-sizer, .ufg-thumbnail {
641 width: calc( (100% / (12/<?php echo intval($ufg_columns_mobile_portrait); ?>)) - 1px ) !important;
642 max-width: none !important;
643 box-sizing: border-box !important;
644 margin: 0 !important;
645 padding: 0; /* Internal padding is handled by ufg-thumbnail class below */
646 }
647
648 @media (min-width: 576px) {
649 .ufg-grid-sizer, .ufg-thumbnail { width: calc( (100% / (12/<?php echo intval($ufg_columns_mobile_landscape); ?>)) - 1px ) !important; }
650 }
651 @media (min-width: 768px) {
652 .ufg-grid-sizer, .ufg-thumbnail { width: calc( (100% / (12/<?php echo intval($ufg_columns_tab); ?>)) - 1px ) !important; }
653 }
654 @media (min-width: 992px) {
655 .ufg-grid-sizer, .ufg-thumbnail { width: calc( (100% / (12/<?php echo intval($ufg_columns_desktop); ?>)) - 1px ) !important; }
656 }
657
658 /* gallery-specific overrides */
659 <?php if($ufg_image_hover_effect == 'border_overlay') { ?>
660 .ufg-thumbnail .border-expand-one, .ufg-thumbnail .border-expand-two {
661 position: absolute;
662 top: 30px;
663 right: 30px;
664 bottom: 30px;
665 left: 30px;
666 /*border: 2px solid #fff;*/
667 /*box-shadow: 0 0 0 30px rgb(255 255 255 / 20%);*/
668 content: '';
669 opacity: 0;
670 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
671 transition: opacity 0.35s, transform 0.35s;
672 -webkit-transform: scale3d(1.4,1.4,1);
673 transform: scale3d(1.4,1.4,1);
674 }
675 .ufg-thumbnail:hover .border-expand-one, .ufg-thumbnail:hover .border-expand-two {
676 opacity: 1;
677 -webkit-transform: scale3d(1,1,1);
678 transform: scale3d(1,1,1);
679 z-index: 9;
680 }
681 .border-expand-one:after, .border-expand-one:before {
682 content: " ";
683 width: 16px;
684 height: 25px;
685 position: absolute;
686 }.border-expand-two:after, .border-expand-two:before {
687 content: " ";
688 width: 16px;
689 height: 25px;
690 position: absolute;
691 }
692 .border-expand-one:before {
693 bottom: 0;
694 right: 0;
695 border-bottom: 3px solid white;
696 border-right: 3px solid white;
697 }
698 .border-expand-two:before {
699 bottom: 0;
700 left: 0;
701 border-bottom: 3px solid white;
702 border-left: 3px solid white;
703 }
704 .border-expand-one:after {
705 top: 0;
706 left: 0;
707 border-top: 3px solid white;
708 border-left: 3px solid white;
709 }
710 .border-expand-two:after {
711 top: 0;
712 right: 0;
713 border-top: 3px solid white;
714 border-right: 3px solid white;
715 }
716 <?php } ?>
717
718 <?php if($ufg_image_hover_effect == 'border_overlay') { ?>
719 /* The Transformation */
720 .ufg-thumbnail:hover img {
721 transform: scale(1.1);
722 opacity:0.7;
723 }
724 <?php } ?>
725
726 .ufg-gallery-<?php echo esc_html($ufg_gallery_id); ?> .ufg-thumbnail-border {
727 background-color: <?php echo esc_html($ufg_thumbnail_bg_color); ?> !important;
728 <?php if($ufg_thumbnail_border) { ?>
729 border: <?php echo intval($ufg_thumbnail_border_thickness); ?>px solid <?php echo esc_html($ufg_thumbnail_border_color); ?> !important;
730 <?php } ?>
731 border-radius: 0.25rem !important;
732 }
733 .ufg-gallery-<?php echo esc_html($ufg_gallery_id); ?> .ufg-image-title {
734 font-size: <?php echo intval($ufg_image_title_font_size); ?>px !important;
735 font-weight: bold !important;
736 color: <?php echo esc_html($ufg_image_title_color); ?> !important;
737 }
738 .ufg-gallery-<?php echo esc_html($ufg_gallery_id); ?> .ufg-image-description {
739 font-size: <?php echo intval($ufg_image_description_font_size); ?>px !important;
740 color: <?php echo esc_html($ufg_image_description_color); ?> !important;
741 }
742 .ufg-gallery-<?php echo esc_html($ufg_gallery_id); ?> .ufg-read-more-button {
743 color: <?php echo esc_html($ufg_read_more_button_color); ?> !important;
744 background-color: <?php echo esc_html($ufg_read_more_button_bg_color); ?> !important;
745 }
746 /* =======================================================
747 Gallery Loading Overlay & Spinner styles
748 ======================================================= */
749 .fg-content-wrapper .ufg-gallery-container {
750 position: relative !important;
751 min-height: 280px !important;
752 }
753 .fg-content-wrapper .ufg-gallery-loader {
754 position: absolute !important;
755 top: 0 !important;
756 left: 0 !important;
757 right: 0 !important;
758 bottom: 0 !important;
759 background: rgba(248, 250, 252, 0.85) !important;
760 backdrop-filter: blur(4px) !important;
761 z-index: 999 !important;
762 display: flex;
763 align-items: center !important;
764 justify-content: center !important;
765 padding: 20px !important;
766 border-radius: 12px !important;
767 transition: opacity 0.4s ease, visibility 0.4s ease;
768 }
769 .fg-content-wrapper .ufg-gallery-loader.ufg-loader-hidden {
770 display: none !important;
771 opacity: 0 !important;
772 visibility: hidden !important;
773 pointer-events: none !important;
774 }
775 .fg-content-wrapper .ufg-loader-card {
776 background: #ffffff !important;
777 border-radius: 16px !important;
778 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
779 border: 1px solid #f1f5f9 !important;
780 padding: 36px 32px !important;
781 text-align: center !important;
782 max-width: 380px !important;
783 width: 100% !important;
784 box-sizing: border-box !important;
785 }
786 .fg-content-wrapper .ufg-loader-spinner-box {
787 position: relative !important;
788 width: 64px !important;
789 height: 64px !important;
790 margin: 0 auto 20px auto !important;
791 display: flex !important;
792 align-items: center !important;
793 justify-content: center !important;
794 }
795 .fg-content-wrapper .ufg-loader-bg-circle {
796 position: absolute !important;
797 inset: 0 !important;
798 border-radius: 50% !important;
799 background-color: #eff6ff !important;
800 display: flex !important;
801 align-items: center !important;
802 justify-content: center !important;
803 }
804 .fg-content-wrapper .ufg-loader-ring {
805 position: absolute !important;
806 inset: -4px !important;
807 border-radius: 50% !important;
808 border: 3px solid transparent !important;
809 border-top-color: #2563eb !important;
810 border-right-color: #2563eb !important;
811 animation: ufg-spin 0.9s linear infinite !important;
812 }
813 .fg-content-wrapper .ufg-loader-title {
814 font-family: inherit !important;
815 font-size: 18px !important;
816 font-weight: 700 !important;
817 color: #0f172a !important;
818 margin: 0 0 6px 0 !important;
819 line-height: 1.3 !important;
820 }
821 .fg-content-wrapper .ufg-loader-subtitle {
822 font-family: inherit !important;
823 font-size: 13px !important;
824 font-weight: 400 !important;
825 color: #64748b !important;
826 margin: 0 !important;
827 line-height: 1.4 !important;
828 }
829 @keyframes ufg-spin {
830 0% { transform: rotate(0deg); }
831 100% { transform: rotate(360deg); }
832 }
833 </style>
834 <?php
835 //require('filter-ajax.php');
836 } else {
837 echo "<h4>Error! invalid shortcode.</h4>";
838 }
839 return ob_get_clean();
840 }
841