Динамическая галерея изображений PHP с использованием Bootstrap 4 flexbox - PullRequest
Новая
       17

Динамическая галерея изображений PHP с использованием Bootstrap 4 flexbox

0 голосов
/ 01 ноября 2019

Как я могу динамически ниже HTML в цикле foreach? У меня есть массив изображений, который я могу отображать по одному изображению в цикле, но я не уверен, как я могу зациклить два изображения в цикле? 

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

0 голосов
/ 01 ноября 2019

Используйте следующий код. Может быть, это поможет вам 

<?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; ?>
0 голосов
/ 01 ноября 2019

Вместо этого вы можете использовать цикл 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; ?>
...