Volt new row after col-4

Technically you could do all this in Volt, done it myself few times, but after coming back to support these projects I had to read my code few times to understand what I really wanted to do. Here is an old example: https://www.orangefitness.bg/orange/varna Perhaps this gallery is even funkier than the one you have to make :)

Also having least possible logic in your templates will make your frontend developer happy ;)

Here is how i would do it, the PHP code can be placed in a Helper function, gallery model or whatever.

// How many items in first row
$firstRowItemsCount = 3;

// How many items in remaining rows
$remainingRowsItemCount = 4;

// Generate dummy data
$items = range(1, 50);
$itemsCount = count($items); 

// Slice up items for first row
$firstRowItems = array_slice($items, 0, $firstRowItemsCount, true);

// Slice remaining items (after taking for first row)
$remainingItems = array_slice($items, $firstRowItemsCount, $itemsCount - $firstRowItemsCount, true); 

// Pair remaining items by $remainingRowsItemCount
$remainingRows = array_chunk($remainingItems, $remainingRowsItemCount, true); 

// And finally assign to view
$this->view->galleryChunks = array_merge([$firstRowItems], $remainingRows); 

And finally the clean and logic free Volt template :)

{% for rowNumber, rowItems in galleryChunks %}
<div class="row">
    {% for item in rowItems %}
    <div class="{{ rowNumber == 0 ? 'col-lg-4' : 'col-lg-3' }}">{{ item }}</div> 
    {% endfor %}
</div>
{% endfor %} 

Hi @nikolay-mihaylov,

i tried, but i have a little problem, because i have a pagination wrapped on it. Now the loop runs multiple times.

 {% for user in page.items %}
        {% for rowNumber, rowItems in galleryChunks %}
            <div class="row">
                {% for item in rowItems %}
                    <div class="{{ rowNumber == 0 ? 'col-lg-4' : 'col-lg-3' }}">

                        <!--Card-->
                        <div class="card">

I have 6 items, so now the loops displays 36 items (6x6), how can i fix that?

Rgds Stefan

You have to replace this part with only 1 loop:

 {% for user in page.items %}
        {% for rowNumber, rowItems in galleryChunks %}

So in my example you should replace $items = range(1, 50); with page.items and split your current page items into galleryChunks.

Sorry i don't understand. i changed the 50 with the number of user items, it is 6:

$items = range(1, $pages); -> $pages is 6

the rest of your code is the same. What do you mean with "split your current page"?

Ah no no :)

First read my answer again and pay attention to the comments :)

// Generate dummy data
$items = range(1, 50);

I used the above to simulate some testing data. In your case $items should be $page->items. And $itemsCount should be your pagination limit (how many items you show per page?).

Hello Nikolay,

sorry for my late response, but i was sick the last days :-) Sorry but i don't understand, i use col-4 for each row now, it is also ok for me, for the moment :-/

Will do it later, now i have to finish my project.

Rgds and thx so much Stefan