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

**URL:** <https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642>\
**Category:** Questions\
**Tags:** v2\
**Created:** [March 19, 2016, 9:52am UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642 "2016-03-19T09:52:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tutchi](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tutchi](https://forum.getkirby.com/u/tutchi)\
**Post date:** [March 19, 2016, 9:52am UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/1 "2016-03-19T09:52:57Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 19, 2016, 10:39am UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/2 "2016-03-19T10:39:19Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![tutchi](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tutchi](https://forum.getkirby.com/u/tutchi)\
**Post date:** [March 19, 2016, 11:52am UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/4 "2016-03-19T11:52:44Z")

</div>

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 ?>
```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 19, 2016, 12:15pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/5 "2016-03-19T12:15:20Z")

</div>

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.

```auto
<?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 ?>

```

---

<div class="post-metadata">

**Author:** ![tutchi](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tutchi](https://forum.getkirby.com/u/tutchi)\
**Post date:** [March 19, 2016, 1:16pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/6 "2016-03-19T13:16:28Z")

</div>

Thnx a lot for the info. It works.

---

<div class="post-metadata">

**Author:** ![tutchi](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tutchi](https://forum.getkirby.com/u/tutchi)\
**Post date:** [March 20, 2016, 9:40pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/7 "2016-03-20T21:40:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 20, 2016, 10:01pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/8 "2016-03-20T22:01:29Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![tutchi](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@tutchi](https://forum.getkirby.com/u/tutchi)\
**Post date:** [March 20, 2016, 10:22pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/9 "2016-03-20T22:22:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:59pm UTC](https://forum.getkirby.com/t/get-new-row-line-after-3-images-of-in-total-12-images/3642/10 "2025-02-06T16:59:54Z")

</div>