Get new row line after 3 images of in total 12 images

The CMS Questions
1

Can someone tell me how I can do this?
I would like to have a new row line after 3 images.

For example, when I have 12 images, I would like to have automatically 4 rows.

<div class="row">
	<?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
		<div class="four columns gallery ">
			<a class="fancybox" rel="gallery" href="<?php echo $image->url() ?>" title="<?php echo $page->title()->html() ?>">
				<img src="<?php echo $image->crop(1024, 768)->url() ?>" alt="<?php echo $page->title()->html() ?>" class="img-responsive" />
			</a>
		</div>
	<?php endforeach ?>
</div>
2

You could use a helper variable, which
is initially set to 0 and count it up in your foreach loop. Then evaluate the modulo:

if($i%3 === 0) {
//insert row
}

The same for the closing tag.

You would have to make sure, though, that the last div is closed even if the number of images is not exactly 12.

4

I have this now.
Here’s the problem that the first 3 columns don’t have the “row” wrapper.
How can I resolve this?

<?php $i=0; foreach($page->images()->sortBy('sort', 'asc') as $image): $i++; ?>
	<?php if($i%3 === 0) echo '<div class="row">' ?>
		<div class="four columns gallery">
			<a class="fancybox" rel="gallery" href="<?php echo $image->url() ?>" title="<?php echo $page->title()->html() ?>">
				<img src="<?php echo $image->crop(1024, 768)->url() ?>" alt="<?php echo $page->title()->html() ?>" class="img-responsive" />
			</a>
		</div>
	<?php if($i%3 === 0) echo '</div>' ?>
<?php endforeach ?>
5

Two problems here:

You increase your $i counter before you have even started to go through the loop, so it needs to be increased at the end of the loop.

Secondly, the second modulo evaluator has to be changed, because if we close the div at the same point as we open it, it will only enclose a single gallery div, not 3.

<?php $i=0; foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
	<?php if($i%3 === 0) echo '<div class="row">' ?>
		<div class="four columns gallery">
			<a class="fancybox" rel="gallery" href="<?php echo $image->url() ?>" title="<?php echo $page->title()->html() ?>">
				<img src="<?php echo $image->crop(1024, 768)->url() ?>" alt="<?php echo $page->title()->html() ?>" class="img-responsive" />
			</a>
		</div>
	<?php if($i%3 === 2) echo '</div>' ?>
<?php $i++; endforeach ?>
6

Thnx a lot for the info. It works.

7

I found a problem with this function. If on the latest row there’s only one or two pictures, it don’t put a closing div tag.
How can to resolve it?

8

Yes, I know, that’s what I had already mentioned above. You have to check if the current image is the last image:

<?php if( $i%3 === 2 || $image === $page->images()->last() ) echo '</div>' ?>
9

There’s a problem with the view. The images are not correctly aligned if there’s no 3 pics.
Is there an another way to solve this?