Jesse Elser Jesse Elser - 1 month ago 6
PHP Question

PHP Insert New Row After Every 4th Image

I'm building a section that displays the most recent image in a given directory.

There are a total of 7 current directories(more to be added later so this number will vary).

I have a working code that pulls the most recent image in a directory which I've turned into a function (

displayRecent($directory);
).

I've built a
foreach
loop that runs that function for each directory in an array.

EDIT: I just noticed I didn't clarify one thing. Inside of every
<div class="row">
I want to have a maximum of 4
<div class="col-md-3">
.

So if there are 9 directories then there would be a total of 3
<div class="row">
while the last one only contains one
<div class="col-md-3">
.

What I'm hoping to accomplish is the following mark-up:

<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth/5361af753f447.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>


But instead my code is only wrapping the fourth directory with
<div class="row">
and
</div>


The actual output is:

<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/nude//5361b0351fcb4.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>


Here is the code I am using:

$directories = array("goth", "nude", "goth", "goth", "goth", "goth", "goth", "goth", "goth");

$i = 0;

foreach ($directories as $directory) {
if($i == 4) {
echo '<div class="row">' . "\r\n";
}
echo '<div class="col-md-3">' . "\r\n";
displayRecent($directory);
echo '</div>' . "\r\n";
if($i == 4) {
echo '</div>' . "\r\n";
}
$i++;
}


And the contents of the
displayRecent($directory)
function just in case it's relevant or can be built upon:

function displayRecent($recentDir) {
$dir = 'gallery/'.$recentDir . '/';
$base_url = 'http://example.com/gallery/'.$recentDir.'/';
$newest_mtime = 0;
$show_file = 'BROKEN';
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if (($file != '.') && ($file != '..')) {
$mtime = filemtime("$dir/$file");
if ($mtime > $newest_mtime) {
$newest_mtime = $mtime;
$show_file = "$base_url/$file";
}
}
}
}
echo '<img src="' .$show_file. '" alt="Image Title Here" class="img-thumbnail img-responsive">' . "\r\n";
}


EDIT

Changing the
foreach
loop to the following results in the following output:

$directories = array("goth", "nude", "goth", "goth", "goth", "goth", "goth", "goth", "goth");

$i = 0;

foreach ($directories as $directory) {
if( !($i % 4) ) {
echo '<div class="row">' . "\r\n";
}
echo '<div class="col-md-3">' . "\r\n";
displayRecent($directory);
echo '</div>' . "\r\n";
if( !($i % 4) ) {
echo '</div>' . "\r\n";
}
$i++;
}


Output - For some reason the first
col-md-3
is in it's own
row
when there should be three more
col-md-3
inside of that same
row
element:

<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/nude//5361b0351fcb4.jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
<div class="row">
<div class="col-md-3">
<img src="http://example.com/gallery/goth//5361af753f447 (1).jpg" alt="Image Title Here" class="img-thumbnail img-responsive">
</div>
</div>


NOTE The reason I have the same directory listed several times in the array is because all of the directories are not yet built so I am repeating one for testing purposes.

NOTE 2 Just because I know some joker may ask, no this is not a pornographic website it's merely a modeling website. :)

Answer

Just explain and improve my answer in my comment.

This is *.phtml syntax:

<div class="row"> <!-- open first row -->
    <?php $i = 1; ?>
    <?php foreach ($directories as $directory) { ?>
        <div class="col-md-3">
            <?php displayRecent($directory); ?>
        </div>
        <?php if ( !($i % 4) ) { ?>
            </div><div class="row"> <!-- close prev row, open next -->
        <?php } ?>
        <?php $i += 1; ?>
    <?php } ?>
</div> <!-- close last row -->
Comments