getResources "row tpl"?

I have a setup where I am rendering a variable number of resources with getResources. They are to be in rows, like so:



Note that each row contains at the most four elements, and that there may be a row at the end with fewer than four elements.

My question is: How is this "row" structure best achieved with getResources? After going through the documentation, the best I can find is a template selector for every nth item. This doesn't quite work for me, though, because I need both opening and closing markup. The closest I can come is to add to the 1st, 5th etc items and an extra after the 4th, 8th, etc... the problem being that if the number of items isn't divisible by 4, I'll end up missing a closing tag.

Any thoughts?

How about just using &tplFirst and &tplLast to add the wrapper div?

If I do that, how will I close the row divs? And if I put a closer on every 4th item, I'll end up with an extra closer if the list happens to be divisible by 4.

I was thinking each set of items was generated by a separate getResources call. If it's all from one call, my idea is toast.

How about doing it with Wayfinder? It's better at dealing with subgroups.

If you don't need the bells and whistles of getResources, a custom snippet might be the way to go.

Thought I would post back with my solution - which, while inelegant, at least works without any hacks, custom snippets, or resort to Wayfinder.

First, I wrapped the whole result set in a row div. Then, I added a special tpl_n4, which consists of the usual item tpl code (actually a reference to a chunk so I don't repeat myself) and then the following code:



So after every 4th item, I close one row and open another. But we're not quite home; what if there are 8 items? With the closing div tag of that initial opening row (which has been made into many rows - I know it's confusing), I end up with an empty row at the end. While this isn't necessarily a deal-killer, I found a simple way to fix it. I set tplLast to the same chunk as the default item tpl, NOT the special one with the row opening at the end. Now the default closing div finishes up my last row no matter how long it is, and I never end up with an empty extra row at the end.

This is such a kludge I can barely believe it works - but it does, and I'm not complaining.

polrbear, could you post your getresources call and also your TPL code please?

The question really is why do you need a 'row' wrapper? If its to clearfix then would it not be more elegant and simplistic to just use css to nth-child(4):after a micro clearfix? If its for grid layout then semantic grid would save you class based markup anyhow.