For my photo wall, I am trying to create a specific pattern where every 1, 10, 11, 20, 21, and 30 displays a big image sized at 160x165. In between each pair of big images are 8 small images sized at 85x80.
The first line works as expected with one big image followed by 4 small images aligned together like a big one.
I want the second line to follow the same pattern, but with 4 small images appearing first, followed by the big image. The issue is that instead of displaying all 4 small images together, it initially shows 3 small images and then starts a new line with the remaining small image (desired outcome is for these 4 small images to form a square). I attempted to use a line break after positions $i=7,17,27... but it doesn't work well for floated elements.
<div style="width:350px">
<?php
$i=0;
foreach($photo_array as $each){
if($each!=''){
$i++;
$img_id=$username.$i;
$pos=stripos($each,'&');
$src=substr($each,$pos+1);
$each_photo_string='user_data/post_img/'.$src;
if( (($i-1)%10==0) || ($i%10==0) ){
echo '<img id="'.$img_id.'" class="p_photo_image" width="160" height="165" style="margin-left:5px;float:left;" alt="'.$each.'" src="'.$each_photo_string.'" >';
}
else{
echo '<img id="'.$img_id.'" class="p_photo_image" width="85" height="80" style="float:left;margin-bottom:5px; margin-left:5px;" alt="'.$each.'" src="'.$each_photo_string.'" >';
if(($i%10)==7){
echo '<br>';
}
}
}
}
?>
</div>