Need help splitting data into 4 groups. Please see example

Fishingwithgnomes · November 29, 2021, 1:16pm

Hi guys, I usually pay a developer for this sort of thing, but don’t have two beans to rub together so I’m attempting to do a few bits myself until such times I can afford to hire again. Therefore any help would be greatly appreciated. Thank you.

I’m currently trying to add an image grid to my site to display the latest images. However in order to do so I need to be able to split the images I fetch into four groups, which is where I get stuck. I can get 20 images and display them no problem, using the following…

$rows = @mysql_rows('SELECT * FROM Image WHERE Live = 1 ORDER BY DateLive Desc LIMIT 20');

`$content .= '<div class="rowH">';`

foreach($rows as $row)
    {
    $img = new Image($row['ID'],true); 
    $content .= '<img src="/img/L/'.$img->ID.'.jpg">
	}
    
    $content .= '</div>';

---------------------

This gives me output of - 

<div class="rowH">
<img src="/img/L/100020.jpg">
<img src="/img/L/100019.jpg">
<img src="/img/L/100018.jpg">
<img src="/img/L/100017.jpg">
and so on, 20 times..
</div>
----------------------

However, I want to split those 20 images into 4 groups, so my output would be like the following -

   <div class="rowH">
      <div class="columnH">
      <img src="/img/L/100020.jpg">
      <img src="/img/L/100019.jpg">
      <img src="/img/L/100018.jpg">
      <img src="/img/L/100017.jpg">
      <img src="/img/L/100016.jpg">
      </div>
      <div class="columnH">
      <img src="/img/L/100015.jpg">
      <img src="/img/L/100014.jpg">
      <img src="/img/L/100013.jpg">
      <img src="/img/L/100012.jpg">
      <img src="/img/L/100011.jpg">
      </div>
      <div class="columnH">
       <img src="/img/L/100010.jpg">
      <img src="/img/L/100009.jpg">
      <img src="/img/L/100008.jpg">
      <img src="/img/L/100007.jpg">
      <img src="/img/L/100006.jpg">
      </div>
      <div class="columnH">
       <img src="/img/L/100005.jpg">
      <img src="/img/L/100004.jpg">
      <img src="/img/L/100003.jpg">
      <img src="/img/L/100002.jpg">
      <img src="/img/L/100001.jpg">
      </div>  
</div>

Any help trying to achieve this would be greatly appreciated. Many thanks.

Chris

skawid · November 29, 2021, 1:41pm

Take a look at array_chunk. You can use that to split your list into as many groups as you need. Then you have a two nested loops; one to loop over the groups and build the <div> code, another to loop over the items inside that group and produce the <img> tags.

Fishingwithgnomes · November 29, 2021, 3:11pm

Thanks Skawid, taking a look at chunks helped me sort it, thank you.

Not completely finished yet, but this works -

$ids = @mysql_values('SELECT ID FROM Image WHERE Live = 1 ORDER BY DateLive Desc LIMIT 20');
	
    $chunks = array_chunk($ids, 5, FALSE);
    

foreach($chunks as $chunk)
    {
	$imgs=$chunk;
	$content .= '<div>';
	foreach($imgs as $imgid)
    {
		$img = new Image($imgid,true); 
		 $content .= '<img src="/img/S/'.$img->ID.'.jpg">'; 
	}
	$content .= '</div>';
	}

Many thanks indeed,
Chris