How to generate rows, each with n items?

22 Posts

pltarr Reply #1, 11 years, 7 months ago

Hi all,

I'm kind of stumped on how to generate rows in a Bootstrap grid correctly. I've been using getResources. Basically, I have a collection of items. I'd like to show all of the items on a page, 3 items per row in a Bootstrap grid (it's actually a carousel widget). It's simple: all I need to do is generate this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
etc.

I thought this would be a simple application of getResources, where every 3rd or 4th item, I'd use a tpl that generated </ul> to end the current set of 3 and <ul> to start the next one. This is the call I'm using:

[[!getResources? &parents=`83`
&limit=`0`
&tpl=`HighlightTpl`
&showHidden=`1`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&tpl_n3=`HighlightEndOfGroupTpl`
&tvFilters=`highlightArchived!=1`
&sortby=`{"publishedon":"DESC"}` ]]

It _almost_ works. Which is to say that it works correctly for every <ul> group except the first one. The first group has _2_ elements instead of 3. Every subsequent group has the expected 3 elements.

I'm at a complete loss to understand what I'm doing wrong. What am I missing? Is there a different solution I should be using?

I am using Bootstrap 2.3.2, RHEL 6.

Thank you *SO* much in advance for any suggestions!

This question has been answered by sottwell. See the first response.

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 11 years, 7 months ago

Can you post the contents of the two chunks? Is the <ul> </ul> wrapping the getResources call or in the tpl chunks?

What does the source tell you is happening? Got any extra <ul>s or </ul>s?

Could try &tpl_n4 instead of &tpl_n3

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

22 Posts

pltarr Reply #3, 11 years, 7 months ago

Thank you for the response! Yes, the two chunks are included below. The generated HTML is correct--the first <ul> group really only has 2 items, while the subsequent ones have 3. The same thing happens if I use tpl_n4, except that then the first <ul> group has 3 items and the rest have 4.

The getResources call is in this context:

<ul class="slides">
   <li>
      <div class="row">
                        [[!getResources? &parents=`83`
                                         &limit=`0`
                                         &tpl=`HighlightTpl`
                                         &showHidden=`1`
                                         &includeTVs=`1` 
                                         &processTVs=`1`
                                         &includeContent=`1`
                                         &tpl_n4=`HighlightEndOfGroupTpl`
                                         &tvFilters=`highlightArchived!=1`
                                         &sortby=`{"publishedon":"DESC"}` ]]
      </div>
   </li>
</ul>

HighlightTpl chunk (just puts a single item into a Bootstrap col-3):

<div class="col-lg-3 col-md-3 col-sm-3">
	<div style="height:200px;">
		<img class="img-responsive" src="[[+tv.requiredPostImage:phpthumbof=`&w=255&h=175`]]" alt="Highlight image">
	</div>
	<h3><a href="highlights#[[+alias]]">[[+pagetitle]]</a></h3>
	<p>[[+introtext:default=`[[+content:strip_tags:ellipsis=`100`]]`]] <a href="highlights#[[+alias]]"><em>Read more</em></a></p>
</div>

HighlightEndOfGroupTpl chunk:

   </div>  <!--end of row-->
</li>
<li>
   <div class="row">
[[$HighlightTpl]]

[ed. note: pltarr last edited this post 11 years, 7 months ago.]

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 11 years, 7 months ago

It's doing what you ask it to do... each 4th one starts a new row. That means #4 will start a new row; there will be 3 in the first row. #8 will start a new row, there will be 4 in the new row. Put the end-of-row, start-new-row AFTER displaying the nth item:

How does this work for n4 (or n3, if you want 3 in a row)

<div class="col-lg-3 col-md-3 col-sm-3">
    <h3><a href="highlights#[[+alias]]">[[+pagetitle]]</a></h3>
    <p><a href="highlights#[[+alias]]"><em>Read more</em></a></p>
</div>
</div>  <!--end of row-->
</li>
<li>
<div class="row">

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
1,780 Posts

Frogabog Reply #5, 11 years, 7 months ago

Untested, but I'm fairly sure the <li> needs to be wrap each item, with the rows wrapped around the line items. And to stop the last item from using the 3rd item tpl it needs to be told to use just the item chunk instead.

<div class="row">
    <ul class="slides">
       [[!getResources? &parents=`83`
       &limit=`0`
       &tpl=`HighlightTpl`
       &showHidden=`1`
       &includeTVs=`1`
       &processTVs=`1`
       &includeContent=`1`
       &tpl_n3=`HighlightEndOfGroupTpl`
       &tpl_last=`HighlightTpl`
       &tvFilters=`highlightArchived!=1`
       &sortby=`{"publishedon":"DESC"}` ]]
    </ul>
</div>

HighlightTpl chunk

<li>
  <div class="col-lg-3 col-md-3 col-sm-3">
    <div style="height:200px;">
        <img class="img-responsive" src="[[+tv.requiredPostImage:phpthumbof=`&w=255&h=175`]]" alt="Highlight image">
    </div>
    <h3><a href="highlights#[[+alias]]">[[+pagetitle]]</a></h3>
    <p>[[+introtext:default=`[[+content:strip_tags:ellipsis=`100`]]`]] <a href="highlights#[[+alias]]"><em>Read more</em></a></p>
  </div>
</li>

HighlightEndOfGroupTpl chunk:

 </ul>
  </div>  <!--end of row-->
   <div class="row">
<ul>
[[$HighlightTpl]]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

22 Posts

pltarr Reply #6, 11 years, 7 months ago

The sound you hear is me smacking myself upside the head for being a moron.

@sottwell, THANK YOU _SO_ MUCH!! Yes, that was exactly it.

Quote from: sottwell at Feb 12, 2015, 12:08 AM

It's doing what you ask it to do... each 4th one starts a new row. That means #4 will start a new row; there will be 3 in the first row. #8 will start a new row, there will be 4 in the new row. Put the end-of-row, start-new-row AFTER displaying the nth item:

How does this work for n4 (or n3, if you want 3 in a row)
<div class="col-lg-3 col-md-3 col-sm-3">
    <h3><a href="highlights#[[+alias]]">[[+pagetitle]]</a></h3>
    <p><a href="highlights#[[+alias]]"><em>Read more</em></a></p>
</div>
  

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

Answered How to generate rows, each with n items?