How do I evenly distribute data into 4 columns in php?

Question

I am making a project in PHP that pulls pictures from a Facebook page using Facebook SDK. I am using a loop to echo 40 different images, I want to distribute these images evenly between 4 different bootstrap columns as shown below.

Column1     Column2     Column3     Column4
Image1      Image2      Image3      Image4
Image5      Image6      Image7      Image8

The loop I am currently using to echo images into one column:

  foreach($rData as $post) {
   $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');
   print('<div class="col-sm-12">'.$image.'</div'); 
  }

I've spent quite some time trying to figure this out but can never seem to distribute the data without having it repeat. Any help would be appreciated, thanks in advance.

Use `array_chunk` http://php.net/manual/en/function.array-chunk.php — nilobarp, Apr 23 '15 at 16:02

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

Change:

print('<div class="col-sm-12">'.$image.'</div');

To:

print('<div class="col-sm-3">'.$image.'</div');

Bootstrap uses a 12-column grid. If you tell each element to only take up 3 of those columns, then you will get 4 across on a larger screen.

See also this answer to help you determine how far down in screen size you want to keep those 4 columns before you reach a break point.

edited May 23 '17 at 12:22

Community

1
1

answered Apr 23 '15 at 16:03

Jeff Lambert

24,395
4
69
96

score 0 · Answer 2 · answered Apr 23 '15 at 16:03

You can check when is the last element (4) in your line, and put something (html element) to broken to the next line:

$i = 0;

foreach($rData as $post) {
    $myDivisor = '' //nothing yet

    if( ($i%4) == 0 )
        $myDivisor = 'something...';

    $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');

    print('<div class="col-sm-12">'.$image.'</div>'.$myDivisor);

    $i++;

...

score 0 · Accepted Answer · answered Apr 23 '15 at 16:05

Using array_chunk:

foreach(array_chunk($rData, 4) as $chunk)
{
    print('<div class="row">');
    foreach($chunk as $post) {
       $image = ('<center><img class="img-responsive" src="'.$post->getProperty('full_picture').'"/>'.'</br></center>');
       print('<div class="col-sm-3">'.$image.'</div>'); 
    }
    print('</div>');
}

How do I evenly distribute data into 4 columns in php?

3 Answers3