Question

currently i have this structure

<div class="col">
   img1
   img2
   img3
   img4

</div>

<div class="col">
   img1
   img2
   img3
   img4

</div>

then when i tried to loop it

i got this results

img[0]

img[1]

img[2]

how can i achieve this structure

<div class ="col"[0]>
    img[0]
    img[1]
    img[2]
    img[3]
</div>
<div class ="col"[1]>
    img[0]
    img[1]
    img[2]
    img[3]
</div>

Loop code:

<?php 
foreach ($images as $k => $v){
    $imagesrc ='graph.facebook.com/'.$v['fbid'].'/picture';; 
?> 

<div class="col" >
    <img [<?php echo $k; ?>] src="<?php echo $imagesrc; ?>" width="29px" height="31px" alt="name">
</div> 

<?php 
} 
?>

Answer 1

In the loop you want to add a <br> or <p> after each image.

Example inside loop

$counter = 0;
$firstTime = true;
$column = 0;

 <?php foreach ($images as $k => $v): 
  $imagesrc ='graph.facebook.com/'.$v['fbid'].'/picture'; 

  if ($firstTime) {
     echo '<div class="col'.$column.'" >';
     $firstTime = false;
  }

  if ($counter > 3) {
    echo '</div>';
    $column++;
    echo '<div class="col'.$column.'" >';
    $counter = 0;
  } ?>

  <img src="<?php echo $imagesrc; ?>" width="29px" height="31px" alt="name"> 
  <?php $counter++; ?>
 <?php endforeach; ?>
</div>