Hi. I have following problem: I want to display on my index-site my last 6 projects. They are shown in 2 rows and 3 columns within a bootstrap grid. Without bootstrap i would solve this problem with list items. But how can I solve this within the bootstrap grid? Does somebody has any idea? Th…

With bootstrap you would use div elements. You have to create a new row after every three projects.

You need a helper variable within a foreach loop: <?php // grab your projects $projects = page('projects')->children()->visible()->limit(6); // helper variable $count = 0; // loop through projects foreach($projects as $project): // if the result of the modulo operation is 0, open new row if…

Great! Thank you. I’ll try that.

I was testing this way of creating new rows and I noticed that the code as posted above does not create a closing </div> for the last row as soon as the last project is a first in a row. So if I have 1, 4, 7, 10 projects, and so on, this code doesn’t validate any more. Can anybody please give me a h…

Exactly, check if it is the last project: <?php if($count % 3 == 2) || $projects->last()->bool() : ?> Or if this does not work, then try: <?php if($count % 3 == 2) || $project->is($projects->last()) : ?> An alternative would be to change the number of cols in the last row depending on how many i…

So I found it myself: <?php if(($count % 3 == 2) || $project == $projects->last()) : ?> Sorry, I got no notification sign! Thanks @texnixe !

if you use different grid sizes for different viewports you can also add clear fixes with the visible-* classes provided by bootstrap instead of creating multiple rows :slight_smile:

Hi. I’ve tried that. But there is one problem: The latest six projects are displayed. But six times instead of one. It seems that the rows are rotated by 90 degrees. [image] That’s my code: <?php // grab your projects $projects = page('projekte')->children()->visible()->limit(6); // helper v…

Hey there! You’re redefining a foreach loop without taking into account the active project in your first foreach. Remove the second foreach and you should be good to go! Note: there’s also a flip in your second loop you may want to apply to your first loop.

Image Grid: Fetch 6 Last Projects with Bootstrap

The CMS Questions

herr.grab May 22, 2016, 5:57pm 3

okay. Thank you.

How can I say Kirby to create a new row?

How to loop all pages but wrap every 3 with a div?

Topic		Replies	Views
Project view loop problem, can not close row Questions v2	3	663	December 17, 2016
Numbers of projects in loop Questions v2	6	663	March 13, 2018
Show the three newest Projects on Homepage Questions v3	8	339	August 17, 2023
Get new row line after 3 images of in total 12 images Questions v2	7	7426	March 20, 2016
Showcase-snippet: Creating a flexbox-grid and limiting the number of columns Questions v2	1	1111	August 8, 2017

Image Grid: Fetch 6 Last Projects with Bootstrap

Related topics