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

Question

如何在 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; ?>

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

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

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

PHP Dynamic Image Gallery using Bootstrap 4 flexbox

php

gallery

flexbox

twitter-bootstrap