function custom_image_box_shortcode() {
    ob_start();
    ?>
    

    <?php
    $post_counter = 0;
    $args = array(
        'post_type' => 'post', // You can change this to your custom post type if needed
        'posts_per_page' => -1,
    );

    $query = new WP_Query($args);
    ?>

    <div id="search-bar">
        
        <input type="text" id="search" oninput="filterImages()">
        <span id="search-icon" onclick="filterImages()">&#128269;</span>     
    </div>
      <div class="postcountarea">
		  <p>Showing <?php echo esc_html($query->post_count); ?> AI Tools</p>
      </div>

    <div id="image-container">
        <?php
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                $post_counter++;
                $image_url = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); // Change 'thumbnail' to the desired image size
                $category = get_the_category()[0]->name;
                ?>
                <div class="image-box" data-name="<?php echo esc_attr(get_the_title()); ?>" data-category="<?php echo esc_attr($category); ?>">
                    <a href="<?php the_permalink(); ?>">
                        <img decoding="async" src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
                        <p><?php echo esc_html(get_the_title()); ?> - <?php echo esc_html($category); ?></p>
                    </a>
                </div>
                <?php
            }
            wp_reset_postdata();
        } else {
            echo '<p>No posts found</p>';
        }
        ?>
    </div>

    
    <?php
    return ob_get_clean();
}
add_shortcode('custom_image_box', 'custom_image_box_shortcode');