The Problem
I'm attempting to generate a gallery where it will display 3 "blocks" per row and alternate between large and small images.
For example:
Big | 4 Small | Big
4 Small | Big | 4 Small
One big image is the size of 4 small images.
What I've Tried
Here's an example of what I've tried so far.
$i = 0;
$r = 0;
$image = '';
foreach($gallery_images as $image_data) {
($i == 5 ? $i = 0 : '');
//If there's been 3 blocks added to the row, end the row and start a new one
if($r == 3) { $image .= '</div>'; $r = 0; }
//Start new row every 3 blocks
if($r == 0) { $image .= '<div class="row">'; }
//One big image, per 4 small in sequence
if($i == 0) {
$image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
++$r;
} else {
//If no small, start the block
if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
//echo each small image
$image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';
//Once 4 images have been echoed, close the div
if($i == 4) { $image .= '</div>'; ++$r; }
}
++$i;
}
echo $image;
The first row displays fine, but then the next row messes up completely. I just can't see what I've missed in order for this to work.
The class of "row" is because I'm building this upon the foundation framework by Zurb in order to make it responsive.
The issue is that on the 2nd row(s), you do not increment $r to 1 until the end of the 4 small, so it continues to add <div class="row"> before each small image. You need to change your if block on the even rows. You can do this by adding 1 more counter, that keeps track of what row you are on -
by adding
$t=0;
and changing
//Start new row every 3 blocks
if($r == 0) { $image .= '<div class="row">'; }
to
//Start new row every 3 blocks
if($t%2==1){ // if we are on an even row
if($i == 1 && $r == 0) { $image .= '<div class="row">';}
}
else{ // if we are on an odd row
if($r == 0) { $image .= '<div class="row">'; }
}
you now have-
$i = 0;
$r = 0;
$image = '';
$t=0; // counter for odd/even row
foreach($gallery_images as $image_data) {
($i == 5 ? $i = 0 : '');
//If there's been 3 blocks added to the row, end the row and start a new one
if($r == 3) { $image .= '</div>'; $r = 0; ++$t; }
//Start new row every 3 blocks
if($t%2==1){ // if we are on an even row
if($i == 1 && $r == 0) { $image .= '<div class="row">';} // if it is the first small image group start the row
}
else{ // if we are on an odd row
if($r == 0) { $image .= '<div class="row">'; } // if it is the first large image
}
//One big image, per 4 small in sequence
if($i == 0) {
$image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
++$r;
} else {
//If no small, start the block
if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
//echo each small image
$image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';
//Once 4 images have been echoed, close the div
if($i == 4) { $image .= '</div>'; ++$r; }
}
++$i;
}
echo $image;
you can see a phpFiddle example at http://phpfiddle.org/main/code/t25-kbe This is with 60 images, so there is 4 rows total, 2 of each pattern.
NEW:
Ok you'd need to tinker with this, but I think it solves the issue:
<style type="text/css">
.big {
width:200px;
height:200px;
background:#03F;
}
.small {
width:50px;
height:50px;
background:#F00;
}
</style>
<?
$gallery_images = array(
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
);
//find out how many images
$total_images = count($gallery_images);
echo '<div class="row">';
//count counts whether it's big or small
$count = 0;
//count2 counts whether it's the end of the row or not
$count2 = 0;
$row = 0;
//overall count of images
$overall = 0;
for($i=0;$i<count($gallery_images);$i++) {
//assign these from image data
$big = "<img class='big' src='".$gallery_images[$i]."'>";
//increment overall
$overall++;
if($i+1 < $total_images) {
$small1 = $i+1;
$small[] = $small1; //would be $gallery_images[$small1]
$overall++;
}
if($i+1 < $total_images) {
$small2 = $i+2;
$small[] = $small2; //would be $gallery_images[$small2]
$overall++;
}
if($i+1 < $total_images) {
$small3 = $i+3;
$small[] = $small3; //would be $gallery_images[$small3]
$overall++;
}
if($i+1 < $total_images) {
$small4 = $i+4;
$small[] = $small4; //would be $gallery_images[$small4]
$overall++;
}
//if it's 0 it's big else it's 1 and it's small
if($count === 0) {
if($overall < $total_images) {
echo $big;
$count++;
}
}else {
if($small) {
foreach($small as $s) {
echo "<img class='small' src='".$s."' />";
};
$count = 0;
}
}
if($count2 === 2) {
echo "</div>";
echo "<div class='row'>";
$count2 = 0;
}else {
$count2 ++;
}
unset($small);
if($overall >= $total_images) {
echo "</div>";
}
}
?>
NEW ANSWER:
Ok this is how you wanted it:
<style type="text/css">
.big {
width:200px;
height:200px;
background:#03F;
}
.small {
width:50px;
height:50px;
background:#F00;
}
</style>
<?
$gallery_images = array(
1,2,3,4,5,6
);
echo '<div class="row">';
//count counts whether it's big or small
$count = 0;
//count2 counts whether it's the end of the row or not
$count2 = 0;
$row = 0;
foreach($gallery_images as $image_data) {
//assign these from image data
$big = "<img class='big'>";
$small = array(
"<img class='small'>","<img class='small'>","<img class='small'>","<img class='small'>"
);
//if it's 0 it's big else it's 1 and it's small
if($count === 0) {
echo $big;
$count++;
}else {
foreach($small as $s) {
echo $s;
};
$count = 0;
}
//if it's 2 then its the end of the row else increment
if($count2 === 2) {
echo "</div>";
echo "<div class='row'>";
$count2 = 0;
}else {
$count2 ++;
}
}
?>