Putting images in to rows in a foreach loop

Question

i have a set of image file names that are returned in this format.

Here is a var_dump() of $this->images where the filenames are are stored

 array (size=9)
0 => 
object(stdClass)[8]
  public 'filename' => string '1416073696I0QHU.jpg' (length=19)
  public 'primary' => string '1' (length=1)
1 => 
object(stdClass)[9]
  public 'filename' => string '1416073696cTU23.jpg' (length=19)
  public 'primary' => string '0' (length=1)
2 => 
object(stdClass)[10]
  public 'filename' => string '1416073696uxsvq.jpg' (length=19)
  public 'primary' => string '0' (length=1)
3 => 
object(stdClass)[11]
  public 'filename' => string '1416073696uBYgo.jpg' (length=19)
  public 'primary' => string '0' (length=1)
4 => 
object(stdClass)[12]
  public 'filename' => string '1416073696vLBiH.jpg' (length=19)
  public 'primary' => string '0' (length=1)
5 => 
object(stdClass)[13]
  public 'filename' => string '1416073696rOiFe.jpg' (length=19)
  public 'primary' => string '0' (length=1)

i currently have the code for creating the rows needed but i am not sure how i would get the image urls inside the divs i have created, here is what the code for creating the structure looks like

    $images = $this->images;
    $imagesPerLine = 4;
    $arraycount = count($images);
    $ammountofrows = ceil($arraycount / $imagesPerLine);

    for ($i = 0; $i < $ammountofrows; $i++) {
        echo"<div class='row'>
    <div class='col-md-3'>1</div>        
    <div class='col-md-3'>2</div>        
    <div class='col-md-3'>3</div>        
    <div class='col-md-3'>4</div>        
         </div>";
    }

With this example we would need two rows because there are 4 images per row and we have 5 images, this code does that, but how can i then get each of image urls in to the div, so the first 'filename' out of the array dump would be in place of the 1 here

    <div class='col-md-3'>1</div>        

and then carry on when the next row is created

Here is the code that is used to generate the output since i am using an MVC system here are the model and controller that are used

Model

    public function GetImage() {
    $sql = "SELECT `filename`, `primary` FROM `user_img` WHERE `user_id` = :user_id";
    $query = $this->db->prepare($sql);
    $query->execute(array(':user_id' => $_SESSION['user_id']));
    $filepath = $query->fetchAll();
    return $filepath;
}

controller

function imageupload() {
    Auth::handleLogin();
    $profile_model = $this->loadModel('profile');
    $this->view->images = $profile_model->GetImage();
    $this->view->render('profile/imageupload');
}

Answer 1

There are several ways you can attack this problem, using your method, you will need two loops, one that loops over the rows (as you have provided) and another that loops over the images. I tend to stay away from nested loops if I can avoid them.

    for ($i=0; $i < $amountOfRows; $i++) {
        echo "<div class='row'>";
        for ($j=$i*4; $j < ($i*4+4); $j++) {
            if (!isset($images[$j])) {
                break;
            }
            echo "<div class='col-md-3'>{$images[$j]->filename}</div>";
        }
        echo "</div>";
    }

In the loop above, $images refers to the array of images.

The other option is to loop over the image array directly and use modular arithmetic to generate your gallery. Here is one way:

    foreach ($images as $key=>$image) {
        if (!($key%4)) {
            echo "<div class='row'>";
        }
        echo "<div class='col-md-3'>{$image->filename}</div>";
        if (!(($key+1)%4) || (($key+1) == count($images))) {
            echo "</div>";
        }
    }

Again in the snippet above, $images refers to your array containing the images.

Note: In the second snippet I have included the round brackets for operator precedence explicitly on purpose.

Note2: I encourage you to play around with the code and see if there are any improvements you can make, treat my snippets as starting points, not final solutions.