基于php html表的图库网格循环

Question

我正在尝试使用PHP循环在html模板中创建一个库。

但我必须将图库编写为固定表格，因此对每个图像和间距元素使用<td>。然后在新行上创建一个新表。

我想我这样做是为了避免旧Outlook中的任何问题。

我已经创建了我的实体html布局，这就是我需要输出的方式，见下文......

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

哪个输出...

---

我遇到的问题是我的画廊中可以有1到无限量的图像。

所以我的PHP写起来要复杂一些。

这是我下面的尝试，但有点啰嗦。

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

?>

请使用以下代码查看我的测试：

4张图片

  

我收到此错误：“tr”的结束标记未完成

3张图片

  

有效没有错误，但看起来很奇怪导致它空出

6张图片

  

有效没有错误，但看起来很奇怪导致它空出

1张图片

  

有效并与左边对齐......很奇怪。

---

我的问题是否有任何人可以帮助我使用PHP循环，比我的工作更好，并且不会在任何给定的图像数量上留下任何语法错误？

Answer 1

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

Answer 2

试试这个解决方案，.. 我不是在写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>
} 
?>