Adding A Div For Every 4th MySQL Result With Pagination - php

Question

I have a script that displays images from a database.
Every 4 pictures is contained in a <div class="row">.
I added a pagination script to this page to limit the number of images and I ran into a problem.
When there are 4 or 8 images on a page the script works fine, but if there are only 1 or 7 images on the page, the closing </div> for the <div class="row"> doesn't get added.
This is my entire script:
$conn = getConnected("lucycypher");
$img_start=0;
$img_limit=8;
if(isset($_GET['page'])) {
$page=$_GET['page'];
$img_start=($page-1)*$img_limit;
}
else { $page = 1; }
$img_total=mysqli_num_rows(mysqli_query($conn, "select * from gallery_img"));
$img_total_count=ceil($img_total/$img_limit);
echo '<nav aria-label="Page navigation">
<ul class="pagination">' . PHP_EOL;
if($page>1) {
echo '<li><span aria-hidden="true">Previous</span></li>' . PHP_EOL;
}
for($i=1;$i<=$img_total_count;$i++) {
if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
else { echo "<li><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
}
if($page!=$img_total_count) {
if(!isset($page)) { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
else { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
}
echo '</ul>
</nav>' . PHP_EOL;
?>
</div>
</div>
<?php
if($_COOKIE['age_verification'] == "adult") {
$img_query = "SELECT img_name, img_category, img_location FROM gallery_img order by img_time desc LIMIT $img_start, $img_limit;";
}
else if($_COOKIE['age_verification'] == "child") {
$img_query = "SELECT img_name, img_category, img_location FROM gallery_img WHERE img_category NOT LIKE '%nude' order by img_time desc LIMIT $img_start, $img_limit;";
}
$img_result = mysqli_query($conn, $img_query);
if (mysqli_num_rows($img_result) > 0) {
// output data of each row
$img_count = 1;
while($img_row = mysqli_fetch_assoc($img_result)) {
$tags = $img_row["img_category"];
if ( $img_count%4 === 1 ) { echo '<div class="row">' . PHP_EOL; } // Create new row for every 4th image
echo '<div class="col-md-3">' . PHP_EOL;
echo '<div class="panel panel-default">' . PHP_EOL;
echo '<img src="http://lucycypher.com/h/400/w/300/a/c/thumb/'.$img_row["img_location"].'" class="img-responsive img-protected">' . PHP_EOL;
echo '<div class="panel-footer"><span class="glyphicon glyphicon-tag"></span> Tags: ' . $tags . '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row
$img_count++;
}
} else {
echo '<div class="col-md-3">' . PHP_EOL;
echo '<div class="panel panel-primary">' . PHP_EOL;
echo '<div class="panel-heading"><span class="glyphicon glyphicon-picture"></span> Sorry</div>' . PHP_EOL;
echo 'No recent uploads.' . PHP_EOL;
echo '</div>' . PHP_EOL;
echo '</div>' . PHP_EOL;
}
?>
<div class="row">
<div class="col-md-12">
<?php
echo '<nav aria-label="Page navigation">
<ul class="pagination">' . PHP_EOL;
if($page>1) {
echo '<li><span aria-hidden="true">Previous</span></li>' . PHP_EOL;
}
for($i=1;$i<=$img_total_count;$i++) {
if($i==$page) { echo "<li class='active'><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
else { echo "<li><a href='?page=".$i."'>".$i."</a></li>" . PHP_EOL; }
}
if($page!=$img_total_count) {
if(!isset($page)) { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
else { echo '<li><span aria-hidden="true">Next</span></li>' . PHP_EOL; }
}
echo '</ul>
</nav>' . PHP_EOL;
Once I figure this out I'm going to limit the images to 8 per page so on the last page if there are only 3 total images then it's missing the final </div> tag since there isn't a total of 4 which completely throws off the rest of the page layout.
Best way to explain it is a visual I assume:
When images total 4 per row with a limit of 8:
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
</div>
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
</div>
But if the final page only has 3 images:
<div class="row">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<img src="http://example.com/img.jpg">
<!--Missing </div> Tag-->
The final </div> tag is set by this line: if ( $img_count%4 === 0 ) { echo '</div>' . PHP_EOL; } // Close row.

Answer 1

You may calculate the total count of images, which will be uploaded.
Then, use if ( $img_count%4 === 0 || $img_count==$total_count )
In my example $img_count is the number of added image (beginning from 1)