PHP foreach loop that creates four colums on flexbox - php

Question

I'm trying to make something like a flexbox with CSS and PHP. The idea is to upload .jpg images to a folder and then sort them into four columns equally. My current approach is to count the total number of files in the folder, divide by four and with that create indices for a foreach loop to iterate and put the images into the columns. I need it to look like this.
Later on I'll have to make a popup on each of these images which should bring some basic HTML/CSS thing. Not sure if that's something to take in mind for this particular case.
This is my (incomplete/not working) code:
<?php
$fi = new FilesystemIterator("../../showoff_images", FilesystemIterator::SKIP_DOTS);
printf("There were %d Files", iterator_count($fi));
$fi = iterator_count($fi);
#Divided $f1 by four to get the number of items in columns
$fby4 = intdiv($fi,4);
#Create start index for each image
$f0 = 0;
$f1 = $fby4-1;
$f2 = $fby4*2-1;
$f3 = $fby4*3-1;
$f4 = $fby4*4-1;
#CHECK THE INDEX FOR THE IMAGES. START AT 0 AND START ITERATING WITH THE $fn VALUES FOR THE FOLLOWING FUNCTION!
#Iterates images
$directory="../../showoff_images/";
$images=glob($directory . "*.jpg");
$lazyload = "lazy";
$measure = "100%";
$distance = "20px";
foreach($images as $image=>$value) {
if($value > 4) continue;
++$value;
echo
"
<h2 style = padding-top= ".$distance." padding-bottom= ".$distance." padding-right= ".$distance." padding-left= ".$distance."></h2>
<img src=" .$image." loading =". $lazyload ." height=".$measure." width=".$measure.">
";
#++$f0;
}
?>
Really appreciate your help and glad to be joining the forum!

Answer 1

Comment to answer
You should be able to use array_chunk for this, which will allow you to break your array up into sub-arrays.
Here's a sample, not really bound to your data but it should make sense.
$letters = range('a', 'z');
$rows = array_chunk($letters, 4);
foreach($rows as $row){
echo '<div>', PHP_EOL;
foreach($row as $letter) {
echo $letter, PHP_EOL;
}
echo '</div>', PHP_EOL;
}
Demo here: https://3v4l.org/HpTSH