<?php 
/**
 * Template Name: image page
 
 */
get_header(); ?>
<section class="section-top" >
        <div class="container">
            <div class="col-lg-10 offset-lg-1 text-center">
                <div class="section-top-title">
                    <h1>Explore Our Gallery</h1>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li class="ms-1"> / Images</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="gallery-area pt-100 pb-100">
        <div class="container">
            <div class="row">
            <?php
            $args = [
                'post_type'      => 'gallery',
                'posts_per_page' => -1,
                'post_status'    => 'publish',
            ];

            $result = new WP_Query($args);

            if ($result->have_posts()) :
                while ($result->have_posts()) : $result->the_post();

                    $image_url = get_field('image'); // ACF image field
                    $title     = get_the_title();
                    $desc      = get_the_content();

                    if ($image_url) :
            ?>
                <!-- Image with Lightbox -->
                <div class="col-lg-3 mb-4 col-md-6 gallery-item">
                    <a href="<?php echo esc_url($image_url); ?>" data-fancybox="gallery" data-caption="Caption 1">
                        <div class="gallery-img">
                            <img src="<?php echo esc_url($image_url); ?>" alt="Image 1">
                            <div class="hover-effect">
                                <h2><?php echo esc_html($title); ?></h2>
                                <p> <?php
                                echo esc_html(
                                    mb_substr(wp_strip_all_tags($desc), 0, 20) .
                                    (mb_strlen(wp_strip_all_tags($desc)) > 20 ? '...' : '')
                                );
                                ?>
                             </p>
                            </div>
                        </div>
                    </a>
                </div>

                <?php
                    endif;
                endwhile;
            endif;

            wp_reset_postdata();
            ?>
            </div>
        </div>
    </section>
    <nav class="mt-4">
  <ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
<?php get_footer(); ?>