Oct 3, 2023
0
Level 1
gallery grids are not displying properly
I am working on some legacy code.in gallery, images are not displaying in properly . they are displaying unevenly . for example first row images are displaying properly. but on second row images are displaying first two images are blank out of 4.Isotope library is used for grids. can anyone help me in this?
$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>
Please or to participate in this conversation.