I am working on Gallery code. there are 4*4 grids in the gallery. but grids are not displaying properly

Question

i am not able find exact issue is. on mobile display it did display fine. I tried manipulating isotope configuration but it did not worked out. i tried manipulating server side code . but i did not find any issue is.

 else {

                    $ks = 0;

                    $getAllImagesByCategoryId = $user->getAllImagesByCategoryId($getImageCategoryDetailById['id']);


                    while ($getAllImagesNVideosRow = $user->fetch($getAllImagesByCategoryId)) {

                        $file_name = str_replace('', '-', strtolower(pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_FILENAME)));
                        $ext = pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_EXTENSION);
                    ?>
                        <div class="grid-item col-sm-3 grid-item--height2 gallery-image" data-category="photo-galleryimage" <?php if ($ks % 4 == 0)  ?>>

                            <a class="popup-image" data-fancybox="images" data-caption="<?php echo $getAllImagesNVideosRow['description']; ?>" href="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_large.' . $ext; ?>" data-rel="lightcase:photoGallery">
                                <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-title="<?php echo $getAllImagesNVideosRow['description']; ?>" data-src="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_crop.' . $ext; ?>" alt="<?php echo $getAllImagesNVideosRow['events_title']; ?>">

                            </a>
                            <div class="item-content">
                                <h3><?php echo $getAllImagesNVideosRow['events_title']; ?></h3>
                                <span> <?php echo date("d-M-Y", strtotime($getAllImagesNVideosRow['created'])); ?></span>
                            </div>
                        </div>

                    <?php

                    }
                    ?>
                <?php
                }

                ?>
                

i tried changing isotope configuration. but still did not worked. cannot find exact the issue is

Answer 1

Try wrapping your PHP script in a div with a class attribute of .row, like so:

<div class="grid zoom-gallery clearfix mb-80" data-isotope="{ &quot;masonry&quot;: { &quot;columnWidth&quot;: 0 } }">
<div class="row">
    <?php
        $ks = 0;
        if (empty($category_permalink) && !isset($category_permalink)) {

        $getAllImageCategory = $user->getAllImageCategory();
        while ($getAllImagesNVideosRow = $user->fetch($getAllImageCategory)) {
            $file_name = str_replace('', '-', strtolower(pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_FILENAME)));
            $ext = pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_EXTENSION);
    ?>
    <div class="grid-item col-sm-3 grid-item--height2 gallery-image" data-category="photo-galleryimage" <?php if ($ks % 4 == 0)  ?>>
        <a href="<?php echo BASE_URL ?>/photo-gallery/<?php echo $getAllImagesNVideosRow['permalink']; ?>">
            <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo BASE_URL; ?>/images/category-image/<?php echo $file_name . '_crop.' . $ext; ?>">
        
            <div class="item-content">
                <h3><?php echo $getAllImagesNVideosRow['category_name']; ?></h3>
                <!--<?php echo date("d-M-Y", strtotime($getAllImagesNVideosRow['date'])); ?></span>-->
            </div>
        </a>
    </div>

    <?php } ?>
    <?php
        } else {
            $ks = 0;
            $getAllImagesByCategoryId = $user->getAllImagesByCategoryId($getImageCategoryDetailById['id']);

            while ($getAllImagesNVideosRow = $user->fetch($getAllImagesByCategoryId)) {
                $file_name = str_replace('', '-', strtolower(pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_FILENAME)));
                $ext = pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_EXTENSION);
    ?>
    <div class="grid-item col-sm-3 grid-item--height2 gallery-image" data-category="photo-galleryimage" <?php if ($ks % 4 == 0)  ?>>

        <a class="popup-image" data-fancybox="images" data-caption="<?php echo $getAllImagesNVideosRow['description']; ?>" href="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_large.' . $ext; ?>" data-rel="lightcase:photoGallery">
            <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-title="<?php echo $getAllImagesNVideosRow['description']; ?>" data-src="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_crop.' . $ext; ?>" alt="<?php echo $getAllImagesNVideosRow['events_title']; ?>">

        </a>
        <div class="item-content">
            <h3><?php echo $getAllImagesNVideosRow['events_title']; ?></h3>
            <span> <?php echo date("d-M-Y", strtotime($getAllImagesNVideosRow['created'])); ?></span>
        </div>
    </div>

    <?php } ?>
    <?php } ?>
    <?php
        $ks = 0;
        $getAllImagesNVideos = $user->getAllVideos();
        while ($getAllImagesNVideosRow = $user->fetch($getAllImagesNVideos)) {
            $file_name = str_replace('', '-', strtolower(pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_FILENAME)));
            $ext = pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_EXTENSION);
    ?>
    <div class="grid-item col-sm-3 grid-item--height2 gallery-video" data-category="photo-galleryvideo" <?php if ($ks % 4 == 0) { ?> style="clear: both;" <?php } ?>>

        <a class="fancybox-video" data-caption="<?php echo $getAllImagesNVideosRow['description']; ?>" href="https://www.youtube.com/watch?v=<?php echo $getAllImagesNVideosRow['video_url']; ?>" data-rel="lightcase:videoGallery">
            <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://img.youtube.com/vi/<?php echo $getAllImagesNVideosRow['video_url']; ?>/hqdefault.jpg" data-url="https://youtube.com/watch?v=<?php echo $getAllImagesNVideosRow['video_url']; ?>" alt="">

        </a>
        <div class="item-content">
            <h3><?php echo $getAllImagesNVideosRow['events_title']; ?></h3>
            <span><?php echo $getAllImagesNVideosRow['vocation_title']; ?> <?php echo date("d-M-Y", strtotime($getAllImagesNVideosRow['created'])); ?></span>
        </div>
    </div>

    <?php $ks++; } ?>
</div>