Mr.Smithyyy Mr.Smithyyy - 5 months ago 25
PHP Question

Echo bootstrap grid with pictures from array

I'm probably confusing myself more than is necessary with this.

I have 12 images on my server, and an array that handles their links.

$ppDefault = "images/profile/default/";
$ppDefaultArray = array($pLoc . "p-01.png", $pLoc . "p-02.png", $pLoc . "p-03.png", ...);


My goal is to have this structure:

<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="image.png" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="image.png" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="image.png" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="image.png" />
</div>
</div>
And so on with more rows and columns


Currently my php code is as follows:

<?php
$count = 4;
for ($i = 0; $i < count($ppDefaultArray); $i++) {
if ($count % 4 == 0) {
echo
'<div class="row">';
for ($j = 0; $j < 4; $j++) {
echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
}
echo '</div>';
} else {
for ($j = 0; $j < 4; $j++) {
echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
}
}
$count++;
}
?>


Which outputs me something like this:
enter image description here

Which is not what I need. I need each picture to only show up once and I'm assuming some tags are missing as some pictures are misaligned.

If desired I can post the resulting HTML created but it is quite large.

Answer

Try this

<?php

echo '<div class="row">';
for ($i = 0; $i < count($ppDefaultArray); $i++) {
    echo '<div class="col-md-3"><img class="img-responsive" src="' . $ppDefaultArray[$i] . '"/></div>';
    if (($i+1) % 4 == 0)
        echo '</div><div class="row">';
}   
echo '</div>';
?>