foreach loop - case with different setting - php

Question

I have a foreach loop giving out the results of a landscape gallery images.
Basically starting with
<?php foreach ( $images as $image ) : ?>
and then the regular div + anchor + image tags for the gallery images.
<?php if ( $image->description == "portrait" ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box portrait" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="portrait-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php else: ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box landscape" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="landscape-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php endif; ?>
I want to have special case, where I have two portrait images side-by-side, filling the space of one landscape image.
What I was thinking about is to have a tag in the admin area which would trigger the break out of the foreach loop to have two images in one container div, and then it would continue the regular loop just with the container + image for the landscape images.
Is it possible in the case of foreach loop, to jump out of the loop, make a case with different settings, and then return to the regular looping method?

Answer 1

You can try something like this:
foreach($images as $key => $image) {
if($image has special tag) { // <--- PSEUDOCODE
echo "<div class='SPECIAL_CSS_CLASS'><img src='" . $img->path . "' /></div>";
}
}
Then in your CSS just do your Magic!

Answer 2

I would go ahead and do something like this:
//Function to get all the images based on a specific portrait_group
function getImagesPortraitGroup($group, $images) {
$result = array();
foreach ($images as $image) {
if (isset($image['portrait_group']) && $image['portrait_group'] == $group) {
$result[] = $image;
}
}
return $result;
}
//The images to show
$images = array(
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image1", "portrait_group" => 1],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image2", "portrait_group" => 1],
["url" => "http://lorempixel.com/800/200/", "caption" => "Lorem Image3"],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image4", "portrait_group" => 2],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image5", "portrait_group" => 2],
);
//Everytime we show a group, we track it by adding it to this array in order not to show it again
$addedGroups = array();
//Loop through all the images
for ($i = 0; $i < count($images); $i++) {
echo "<div>";
//If the image has a portrait_group that is not already shown, show it
if (isset($images[$i]['portrait_group']) && !in_array($images[$i]['portrait_group'], $addedGroups)) {
$groupImages = getImagesPortraitGroup($images[$i]['portrait_group'], $images);
foreach ($groupImages as $image) {
echo "<img src='{$image['url']}' title='{$image['caption']}' >";
}
//Save the group to the array in order not to show it again
$addedGroups[] = $images[$i]['portrait_group'];
} else {
echo "<img src='{$images[$i]['url']}' title='{$images[$i]['caption']}' >";
}
echo "</div>";
}

Answer 3

I managed to make the grouping by jQuery, this is the code
jQuery(".ngg-gallery-thumbnail-box.portrait").filter(":odd").each(function(){
$content = jQuery(this).find("a");
jQuery(this).prev().find(".ngg-gallery-thumbnail").append($content);
jQuery(this).remove();
});