PluginProbe
Filter Gallery / 1.1.4
Filter Gallery v1.1.4
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.4, at shortcode.php

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