PHP Dynamic Image Gallery using Bootstrap 4 flexbox - php

Question

How can I dynamic below html in foreach loop? I've an images array I can echo one image per loop but I'm not sure how can I loop two images per loop?
<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>
This what I tried.
<?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

Use the following code. May be it help you
<?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; ?>

Answer 2

You could use a for loop instead and iterate the loop every 2 images...
<?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; ?>