使用 Bootstrap 4 flexbox 的 PHP 动态图片库答案

【问题标题】：PHP Dynamic Image Gallery using Bootstrap 4 flexbox使用 Bootstrap 4 flexbox 的 PHP 动态图片库
【发布时间】：2020-02-27 16:40:10
【问题描述】：

如何在 foreach 循环中动态低于 html？我有一个图像数组，每个循环可以回显一个图像，但我不确定如何每个循环循环两个图像？

  <div class="d-flex flex-row">
  <div class="d-flex flex-column">
     <img src="1" class="img-fluid">
     <img src="2" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="3" class="img-fluid">
     <img src="4" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="5" class="img-fluid">
     <img src="6" class="img-fluid">
  </div>
  <div class="d-flex flex-column">
     <img src="7" class="img-fluid">
     <img src="8" class="img-fluid">
  </div>
 </div>

这是我试过的。

      <?php $images = get_field('image_gallery'); ?> 
       <?php if($images): ?>
        <div class="d-flex flex-row">
           <?php foreach( $images as $image ): ?> 
             <div class="d-flex flex-column">


                 <a data-fancybox="gallery" href="<?php echo $image['url']; ?>"> 
                    <img src="<?php echo $image['url']; ?> " class='img-fluid' alt=""> 
                 </a> 
                <!-- This duplicates the image and need some break or continue statment -->
                  <a data-fancybox="gallery" href="<?php echo $image['url']; ?>"> 
                    <img src="<?php echo $image['url']; ?>" class='img-fluid' alt=""> 
                 </a>


           </div>           
          <?php endforeach; ?> 
          </div>
        <?php endif; ?>

【问题讨论】：

所以你想在每次迭代中输出2张图片（例如：image1 image2; image3 image4; etc...）？
你能打印 $images 吗？
是的，但是重复 image1 image1 image2 image2 等等
是的，@BrettGregson，每次迭代 2 张图片。
你可以试试array_chunkphp.net/manual/en/function.array-chunk.php

标签： php twitter-bootstrap flexbox gallery

【解决方案1】：

您可以改用 for 循环，每 2 张图像迭代一次循环...

   <?php $images = get_field('image_gallery'); ?> 
       <?php if($images): ?>
        <div class="d-flex flex-row">
           <?php for($i = 0; $i < count($images); $i+=2){ ?> 
             <?php $image = $images[i];?>
             <div class="d-flex flex-column">
                  <a data-fancybox="gallery" href="<?php echo $image['url']; ?>"> 
                    <img src="<?php echo $image['url']; ?> " class='img-fluid' alt=""> 
                  </a> 
                  <?php if (!empty($images[i+1])) { ?>
                   <?php $nextImage = $images[i+1];?> 
                   <a data-fancybox="gallery" href="<?php echo $nextImage['url']; ?>"> 
                     <img src="<?php echo $nextImage['url']; ?>" class='img-fluid' alt=""> 
                   </a>
                 <?php } ?>
           </div>           
          <?php } ?> 
          </div>
     <?php endif; ?>

【讨论】：

没用！您的代码仅迭代第二个索引值，并且第一个图像 src 为空白。

【解决方案2】：

使用以下代码。可能对你有帮助

<?php $images = get_field('image_gallery'); ?> 
       <?php if($images): ?>
        <div class="d-flex flex-row">
           <?php for ($i=0; $i < count($images); $i++) { ?> 
             <div class="d-flex flex-column">


                 <a data-fancybox="gallery" href="<?php echo $image[$i]['url']; ?>"> 
                    <img src="<?php echo $image[$i]['url']; ?> " class='img-fluid' alt=""> 
                 </a> 
                <!-- This duplicates the image and need some break or continue statment -->
                  <a data-fancybox="gallery" href="<?php echo $image[$i+1]['url']; ?>"> 
                    <img src="<?php echo $image[$i+1]['url']; ?>" class='img-fluid' alt=""> 
                 </a>


           </div>           
          <?php 
                    $i++;
                }
           ?> 
          </div>
        <?php endif; ?>

【讨论】：