On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • I have a setup where I am rendering a variable number of resources with getResources. They are to be in rows, like so:

    <div class="row">
         <div class="item">Item 1</div>
         <div class="item">Item 2</div>
         <div class="item">Item 3</div>
         <div class="item">Item 4</div>
    </div>
    
    <div class="row">
         <div class="item">Item 5</div>
         <div class="item">Item 6</div
    </div>
    


    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
    <div class="row">
    to the 1st, 5th etc items and an extra
    </div>
    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?
      Jason
    • How about just using &tplFirst and &tplLast to add the wrapper div?
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
      • 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.
          Jason
        • 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.
            Did I help you? Buy me a beer
            Get my Book: MODX:The Official Guide
            MODX info for everyone: http://bobsguides.com/modx.html
            My MODX Extras
            Bob's Guides is now hosted at A2 MODX Hosting
          • 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:

            </div><div class="row">
            


            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.
              Jason
            • 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.
                  ■ email: lk@alienbuild.uk | ■ website: https://alienbuild.uk

                  The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.