gistfile1.txt

<?php

function display_kitchensmart_gallery_shortcode( $atts ) {
	ob_start();

	$gal = shortcode_atts( array(
        'id'            =>  '',
        'order'		    =>	'DESC',
        'category'	    =>  '', 
        'button_label'	=> '',
        'mode'	        => '',
        'cols'	        => '3',
        'labels'	    => 'overlay',
        'design'	    => 'dark',
        'show_filter'	=> 'false',
    ), $atts );
    
    $id         = $gal['id'];
    $order      = $gal['order'];
    $category   = explode(',', $gal['category']);
    $button     = $gal['button_label'];
    
    if ( $gal['mode'] !== 'mobile' ) {
        wp_dequeue_script( 'kadence-lightbox-init' );
    	wp_deregister_style( 'kadence-lightbox-init' );
    
    	wp_enqueue_style( 'ks-lightbox', get_stylesheet_directory_uri() . '/css/lightbox.min.css', null, 1.0 );
    	wp_register_script( 'ks-lightbox', get_stylesheet_directory_uri() . '/js/lightbox.min.js', array( 'jquery' ), 1.0, true );
    	wp_enqueue_script( 'ks-lightbox' );
    }
    
	$args = array(
        'post_type'         =>  'ks-gallery',
        'posts_per_page'    =>  -1,
        'order'				=> $order,
    );

    if ($id) {
        $id_array = explode(',', $id);

        $args['post__in']	=   $id_array;
        $args['orderby']	=   'post__in';
    }

    if ($category) {
        $args['tax_query']	=   array(
            array(
                'taxonomy'  =>  'gallery-category',
                'field'     =>  'slug',
                'terms'     =>  $category,
            ),
        );
    }

	$loop = new WP_Query( $args ); if ( $loop->have_posts() ) : ?>

	<?php if ($category): ?>
		<div id="<?php echo $category ?>-galleries-outer-wrap" class="ks-galleries-outer-wrap ks-galleries-design-<?php echo $gal['design']; ?>">
	<?php endif ?>

        <?php if( $gal['show_filter'] == 'true' ) : ?>
            <div id="ksBtnContainer">
                <button class="gallery_btn active" id="all"> Show all</button>
            
                <?php
                    $terms = array();
                    foreach ($category as $category_item ) {
                        $terms[] = get_term_by('slug', $category_item, 'gallery-category');
                    }

                    // echo '<pre>NEW $terms<br />';
                    // print_r($terms);
                    // echo '</pre>';

                    // $terms = get_terms( array(
                    //     'taxonomy'   => 'gallery-category',
                    //     'hide_empty' => true,
                    // ) );

                    foreach ($terms as $term) {
                        echo '<button class="gallery_btn" id="' . $term->slug . '"> ' . $term->name . '</button>';
                    }
                ?>
            </div>
        <?php endif; ?>

		<div class="ks-galleries">
	
			<?php while ( $loop->have_posts() ) : $loop->the_post(); 
				$gal_id = get_the_ID();

				$images = get_field('ks-gallery-images', $gal_id);

                $term_obj_list = get_the_terms( $post->ID, 'gallery-category' );
                $terms_string = join(' ', wp_list_pluck($term_obj_list, 'slug'));
				?>

                <?php if ( $gal['mode'] == 'mobile' ) : ?>
                    <a id="ks-gallery-<?php echo $gal_id ?>" class="gal-item <?php echo $terms_string; ?>"<?php if ( has_post_thumbnail() ) echo ' style="background-image: url('.  wp_get_attachment_url( get_post_thumbnail_id( $gal_id ), 'large' ) .')"'; ?> href="<?php echo get_the_permalink(); ?>">
                <?php else : ?>
                    <div id="ks-gallery-<?php echo $gal_id ?>" class="gal-item <?php echo $terms_string; ?>"<?php if ( has_post_thumbnail() ) echo ' style="background-image: url('.  wp_get_attachment_url( get_post_thumbnail_id( $gal_id ), 'large' ) .')"'; ?>>
                <?php endif; ?>

					<div class="gal-item-wrapper">

						<div class="inner-wrapper">
							<h2 class="gal-title"><?php the_title() ?></h2>

							<?php if ($button) : ?>
                                <?php if ( $gal['mode'] == 'mobile' ) : ?>
                                    <span class="gal-lightbox-link"><?php echo $button; ?></span>
                                <?php else : ?>
    							    <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $gal_id ), 'full' ) ?>#<?php echo get_post_field( 'post_name', get_post() ); ?>" data-title="<?php echo get_the_title(); ?>" id="gallery_<?php echo $gal_id ?>" data-lightbox="ks-gallery-<?php echo $gal_id ?>" class="gal-lightbox-link gal-lightbox-link-<?php echo $gal_id ?>" title="View Images"><?php echo $button; ?></a>
                                <?php endif; ?>
    						<?php else : ?>
                                <?php if ( $gal['mode'] == 'mobile' ) : ?>
                                    <span class="gal-lightbox-link">VIEW ALL IMAGES</span>
                                <?php else : ?>
								    <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $gal_id ), 'full' ) ?>#<?php echo get_post_field( 'post_name', get_post() ); ?>" data-title="<?php echo get_the_title(); ?>" id="gallery_<?php echo $gal_id ?>" data-lightbox="ks-gallery-<?php echo $gal_id ?>" class="gal-lightbox-link" title="View Images">VIEW ALL IMAGES</a>
                                <?php endif; ?>
							<?php endif; ?>

							<?php if( $images ) : ?>
								<div class="ks-images">
			        				<?php foreach( $images as $image ): ?>
                                        <?php if ( $gal['mode'] == 'mobile' ) : ?>

                                        <?php else : ?>
			        					    <a href="<?php echo esc_url($image['url']); ?>" data-lightbox="ks-gallery-<?php echo $gal_id ?>" data-title="<?php echo get_the_title(); ?>" ></a>
							            <?php endif; ?>
			       					<?php endforeach; ?>
								</div>
							<?php endif; ?>
						</div>
                        <?php // if( $gal['labels'] !== 'overlay' ) : ?>
                            <!-- <h2 class="gal-title gal-title-inline"><?php // the_title() ?></h2> -->
                        <?php // endif; ?>
					</div>
                <?php if ( $gal['mode'] == 'mobile' ) : ?>
                    </a>
                <?php else : ?>
                    </div>
                <?php endif; ?>

	 		<?php endwhile; ?>
	 		
	 		<?php if ( $gal['mode'] !== 'mobile' ) : ?>
                <?php if( $gal['design'] !== 'dark' ) : ?>
                    <style>
                        .lightboxOverlay {
                            background-color: #ffffff !important;
                            opacity: .95 !important;
                        }
                        /* .lb-dataContainer {
                            display: none !important;
                        } */
                        .lb-outerContainer {
                            margin: unset;
                        }

                        #lightbox.lightbox {
                            display: flex;
                            height: 100% !important;
                            align-items: center !important;
                            max-width: 1600px;
                            margin-inline: auto; 
                            left: 0;
                            right: 0;
                        }

                        #lightbox.lightbox > div {
                            flex: 1 !important;
                            margin-left: 30px !important;
                        }

                        .lb-dataContainer {
                            height: 650px !important;
                        }
                        span.lb-caption {
                            font-size: 50px !important;
                            font-weight: 100 !important;
                            color: #000000;
                        }

                        .lb-details {
                            text-align: right !important;
                            padding: 50px 0;
                        }

                        .lb-data .lb-close {
                            background: url(<?php echo get_site_url(); ?>/wp-content/uploads/2024/09/icons_283141.svg) top right no-repeat !important;
                        }
                        .lb-nav {
                            left: 95px !important;
                        }

                        .lb-nav a.lb-prev, .lb-nav a.lb-next {
                            box-shadow: none !important;
                            border: none !important;
                        }

                        .lb-nav a.lb-prev, .lb-nav a.lb-next {
                            background: url(<?php echo get_site_url(); ?>/wp-content/uploads/2024/09/icons_196146.svg) left 48% no-repeat !important;
                        }

                        .lb-nav a.lb-next {
                            -moz-transform: scaleX(-1) !important;
                            -o-transform: scaleX(-1) !important;
                            -webkit-transform: scaleX(-1) !important;
                            transform: scaleX(-1) !important;
                            filter: FlipH !important;
                            -ms-filter: "FlipH" !important;
                        }

                        .lb-nav a.lb-next {
                            background-position-x: 5px !important;
                        }

                        <?php if( $gal['cols'] !== '3' ) : ?>
                            @media screen and (min-width: 1024px) {
                                .ks-galleries {
                                    display: grid;
                                    grid-template-columns: 50% 50%;
                                    grid-template-rows: 1fr;
                                    row-gap: 20px;
                                }
                                .ks-galleries .gal-item {
                                    height: 640px;
                                }
                            }
                        <?php endif; ?>

                        <?php // if( $gal['labels'] !== 'overlay' ) : ?>
                            /* h2.gal-title, .ks-galleries .gal-item .gal-lightbox-link {
                                display: none;
                            }
                            h2.gal-title.gal-title-inline {
                                display: block;
                            } */
                        <?php // endif; ?>
                        
                    </style>
                    <script type="text/javascript">
                        document.addEventListener('DOMContentLoaded', function() {
                            lightbox.option({
                                'imageFadeDuration': 0,
                                'fadeDuration': 0,
                                'disableScrolling': 1,
                                'showImageNumberLabel': 0,
                                'disableScrolling':1
                            })
                        });
                    </script>
                <?php else : ?>
                    <script type="text/javascript">
                        lightbox.option({
                            'imageFadeDuration': 0,
                            'fadeDuration': 0
                        })
                    </script>
                <?php endif; ?>
            <?php endif; ?>

            <script type="text/javascript">
                (function($){
                    var $btns = $('.gallery_btn').click(function() {
                        if (this.id == 'all') {
                            $('.ks-galleries > .gal-item').show("slow");
                        } else {
                            var $el = $('.' + this.id).show("slow");
                            $('.ks-galleries > .gal-item').not($el).hide("slow");
                        }
                        $btns.removeClass('active');
                        $(this).addClass('active');
                    })
                })(jQuery); 
            </script>

	 	</div>

	 <?php if ($category): ?>
		</div>
	<?php endif ?>

    
	
	<?php endif; wp_reset_postdata();

	return ob_get_clean();
}

add_shortcode( 'ks-galleries', 'display_kitchensmart_gallery_shortcode' );