Tile Thumbnails in a Grid - php

Question

I want to tile thumbnails into 3 columns using bootstrap's grid classes like this (this entry only has 3 images):
The 4th image would go to the next row <div class="row"></div> within a <div class="col-sm-4"></div>, 5th and 6th images in the same row but separate <div class="col-sm-4"></div>. Then the 7th image goes to the 3rd row etc...
The details of the images including urls are taken from DB using php.
<div class="panel-body">
<?php foreach($screenshots as $key=>$screenshot): ?>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?=$screenshot["ss_name"]?></h3>
</div>
<div class="panel-body">
<img class="img-rounded" style="display: block; text-align:center;" src="<?=UPLOADS_FOLDER.$screenshot['ss_url']?>" alt="<?=$screenshot['ss_name']?>">
<p><?=$screenshot["ss_description"]?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
I've managed to figure out the algorithim:
<?php
$total_entries = count($screenshots);
$total_cols = 3;
$total_rows = ceil($total_entries / $total_cols);
for($col = 0; $col < $total_cols; ++$col):
?>
<div class="row" style="margin: 1% 0.5%;">
<?php for($row = 0; $row < $total_rows; ++$row): ?>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel Title</h3>
</div>
<div class="panel-body">
row: <?=$row?> | col: <?=$col?>
</div>
</div>
</div>
<?php endfor; ?>
</div>
<?php endfor; ?>
But I'm stuck trying to figure out how to find of the index of the screenshot to show.

Answer 1

You have row and column mixed up in the output above.
Once that is fixed, if you need an integer index you should be able to calculate it from the row and column values. For a zero based array of images, something like (row*3)+column
That said, in Bootstrap, you should not need to create the individual rows in the way you have. If you put all the col-sm-3 divs one after the other, without breaking out new rows, this will sort itself out anyway.
Doing it this way, you can use col-Xxx to specify different numbers of columns for different screen widths without changing your code.

Answer 2

The trick is to send every new data in a single column define by <div class="column-sm-4"> and in order to have three items in a row, calling <div class="row"> after every three items. Which can be done by using a counter initialized at 0 and then incrementing its value by 1 every time and inserting new row when dividing it by 3 results an integer:
$count = 0;
if (is_int($count/3)){
echo '<div class="row">';
}
We need to insert a div before first element so we check if its the starting:
if ($count==0 OR is_int($count/3)){
echo '<div class="row">';
}
Then in order to close the div we need to check again if the division results an integer:
if(is_int($count/3)){
echo '</div>' ;
}
We also need to close the div after the last element so we check whether the element is last one or not by:
if($count==$total_entries OR is_int($count/3)){
echo '</div>' ;
}
The full code is:
<?php
$count = 0;
$total_entries = count($screenshots);
foreach($screenshots as $key=>$screenshot):
if ($count==0 OR is_int($count/3)){
echo '<div class="row">';
}
?>
<div class="column-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?=$screenshot["ss_name"]?></h3>
</div>
<div class="panel-body">
<img class="img-rounded" style="display: block; text-
align:center;" src="<?=UPLOADS_FOLDER.$screenshot['ss_url']?>"
alt="<?=$screenshot['ss_name']?>">
<p><?=$screenshot["ss_description"]?></p>
</div>
</div>
</div>
<?php
$count++;
if($count==$total_entries OR is_int($count/3)){
echo '</div>' ;
}
endforeach;
?>