php html table based gallery grid loop

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...

enter image description here

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">
                <a href="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" target="_blank"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>"  height="135" width="135" style="width: 135px; height: 135px; border: none;" /></a>
            </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

enter image description here

I get this error: end tag for "tr" which is not finished

3 images

enter image description here

Valid no errors but looks weird cause it spaces out

6 images

enter image description here

Valid no errors but looks weird cause it spaces out

1 image

enter image description here

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?

Michael Livach · Accepted Answer · 2014-02-26 12:44:21Z

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 ) ) {
                        ?>&nbsp;<?
                    } else {
                        ?><a href="<?php echo $image['url']; ?>" title="<?php echo $image['title']; ?>" target="_blank"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>"  height="135" width="135" style="width: 135px; height: 135px; border: none;" /></a><?
                    }
                    ?>
                </td>
                <?
            }
            ?></tr><?
        }
        ?>
    </table>
    <?
}

answered Feb 26, 2014 at 12:44

Michael Livach

5183 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshc Over a year ago

Thanks Michael this is flawless. So much nicer an is kept in one table. Really appreciate this, will use this method on all my html galleries.

Nishant Solanki · Accepted Answer · 2014-02-26 13:18:21Z

1

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>
} 
?>

answered Feb 26, 2014 at 13:18

Nishant Solanki

2,1283 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

php html table based gallery grid loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related