php html table based gallery grid loop - php

Question

I am trying make a gallery in a html template using PHP loop.
But I having to write the gallery as a fixed table, so using <td> for each image and spacing element. And then on a new row, it creates a new table.
I guess I'm doing this to avoid any issues in old Outlook.
I've created my solid html layout, this is how I need it to output, see below...
<!-- 1st row -->
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-1.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-2.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-3.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-4.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
</tr>
</table>
<!-- 2nd row -->
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-5.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-6.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-7.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-8.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
</tr>
</table>
Which outputs this...
My problem I am having is that I can have from 1 to a unlimited amount of images in my gallery.
So my PHP is little more complicated to write.
This is my attempt below but is a bit ropey.
<?php
$images = get_field('image_thumbnails');
if( $images ): ?>
<?php $count = 0; ?>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<?php foreach( $images as $image ): $count++ ?>
<td style="width: 135px; height: 148px;" valign="top">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" />
</td>
<?php if ($count %4 == 0) { ?>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<?php } else { ?>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<?php } ?>
<?php endforeach; ?>
</tr>
</table>
<?php endif;
?>
Please see my testings using this code with:
4 images
I get this error: end tag for "tr" which is not finished
3 images
Valid no errors but looks weird cause it spaces out
6 images
Valid no errors but looks weird cause it spaces out
1 image
Valid and aligns to the left... weird.
My question can any one help me come with a PHP loop at works better than mine and does not leave any syntax errors with any given image count?

Answer 1

use array_chunk:
$images = get_field('image_thumbnails');
if( $images ) {
$count = count( $images );
for( $i =0; $i < $count % 4; $i++ ) {
// align array
array_push($images, array());
}
$rows = array_chunk($images, 4);
?>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<?
foreach( $rows as $row ) {
?><tr><?
foreach ($row as $image) {
?>
<td style="width: 135px; height: 148px;" valign="top">
<? if ( empty( $image ) ) {
?> <?
} else {
?><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" /><?
}
?>
</td>
<?
}
?></tr><?
}
?>
</table>
<?
}

Answer 2

Try this solution,..
I am not writing the whole code but giving you some logic to implement your desired layout..
<?php
$count = ceil(mysql_num_rows($query)); //number of tables
for($i=0;$i<$count;$i++)
{
?>
<table>
<tr>
<?php
$num = $j*4;
for($j=($num);$j<($num+3);$j++)
{
echo "<td><img src='".$image."'></td>"
}
</tr>
</table>
}
?>