We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16899
    • 284 Posts
    Hi All

    I´m using getResources to build a main portfolio page. My question is, How can i wrapp every 3 portfolio items with a div ? Below you can see mu code!!! Any ideas?


    <!-- START PORTFOLIO SECTION -->
    <div id="portfolio">
    
    
         <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
         <div class="portfolio-row">
    
              <div class="portfolio-item"></div>
              <div class="portfolio-item"></div>
              <div class="portfolio-item"></div>
    
         </div>
         <!-- END PORTFOLIO ROW - EVERY 3 ITEMS -->
    
         <!-- And so on ... -->
    
    
    </div>
    <!-- ENDS PORTFOLIO SECTION -->
    [ed. note: legues last edited this post 14 years, 4 months ago.]
      • 19369
      • 1,098 Posts
      Maybe with &tpl_nN parameter. See details on getResources documentation http://rtfm.modx.com/display/ADDON/getResources. I am not sure if this will work if the last chunk happen to be the third one though.

      You can also do this with jQuery, but server side solution it's better:
      	
      /* [jQuery] */
      $(document).ready(function() {
      	var divs = $("#portfolio .portfolio-item");
      	for(var i = 0; i < divs.length; i+=3) {
      	  divs.slice(i, i+3).wrapAll("<div class='portfolio-row'></div>");
      	}
      });	
      /* [/End jQuery] */	
        • 16899
        • 284 Posts
        Hi microcipcip
        Fist of all thanks a lot to reply to my question. Well to be honest with you, before create this post, i tried the &tpl_nN parameter. the resul was somethink that i didn´t expect:

        <!-- START PORTFOLIO SECTION -->
        <div id="portfolio">
        
                  <div class="portfolio-item"></div>
                  <div class="portfolio-item"></div>
        
             <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
             <div class="portfolio-row">
        
                  <div class="portfolio-item"></div>
         
             </div>
             <!-- EndPORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
         
             <!-- And so on ... -->
             
        </div>
        <!-- ENDS PORTFOLIO SECTION -->



        Then i tried another solution... i´ve inserted the getresources call between the wrapper as the example below:
        <!-- START PORTFOLIO SECTION -->
        <div id="portfolio">
        
             <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
             <div class="portfolio-row">
        
            [[getresources and all parameters ]]
        
             </div>
             <!-- EndPORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
        
        </div>
        <!-- ENDS PORTFOLIO SECTION -->


        The template for &tpl_nN parameter was something like this :

                  <div class="portfolio-item"></div>
        
             </div>
             <!-- EndPORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
        
             <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
             <div class="portfolio-row">


        Almost perfect... but if i have 3 elements i´ll output something like this, an empty wrapper!!!!

        <!-- START PORTFOLIO SECTION -->
        <div id="portfolio">
         
         
             <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
             <div class="portfolio-row">
         
                  <div class="portfolio-item"></div>
                  <div class="portfolio-item"></div>
                  <div class="portfolio-item"></div>
         
             </div>
             <!-- PORTFOLIO ROW - EVERY 3 ITEMS -->
         
             <!-- PORTFOLIO ROW/WRAPPER - EVERY 3 ITEMS -->
             <div class="portfolio-row">
         
        <!-- Empty wrapper -->
        
             </div>
             <!-- PORTFOLIO ROW - EVERY 3 ITEMS -->
         
        </div>
        <!-- ENDS PORTFOLIO SECTION -->


        Any idea how to avoid this wrapper?

        Many thanks in advance!! smiley [ed. note: legues last edited this post 14 years, 4 months ago.]
          • 19369
          • 1,098 Posts
          That's the problem with that parameter, when there are exactly three elements it doesn't work properly.

          What about adding a &tplLast=`` parameter? I don't know if this would override &tpl_nN though...
            • 16899
            • 284 Posts
            No, don´t override!!!! sad
              • 3749
              • 24,544 Posts
              What does your getResources tag look like?



              ------------------------------------------------------------------------------------------
              PLEASE, PLEASE specify the version of MODX you are using.
              MODX info for everyone: http://bobsguides.com/modx.html
                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
                • 16899
                • 284 Posts
                Hello BobRay

                My tag is (im using a fusion between getPage and getResources because i have pagination) :

                [[!getPage? 
                					&elementClass=`modSnippet` 
                					&element=`getResources`
                					&parents=`5` 
                					&limit=`6`
                					&sortdir=`ASC`
                					&includeTVs=`1` 
                					&processTVs=`1`
                					&tpl=`portfolioTpl`
                					&tpl_n3=`portfolioTpl3th`
                					]]
                


                portfolioTpl
                						<!-- START ITEM -->
                						<div class="portfolio-item">
                							<div class="portfolio-image">
                								<a href="[[~[[+id]]]]"><img src="[[+tv.interactive-background-image:phpthumbof=`w=280&h=280&zc=1&aoe=0&far=0``]]" alt="[[+tv.main-content-title]]" class="fx7"/></a>
                							</div>
                							<div class="portfolio-caption">
                								<h4>[[+tv.main-content-title]]</h4>
                                            				</div>
                						</div>
                						<!-- ENDS ITEM -->
                



                portfolioTpl3th
                						<!-- START ITEM -->
                						<div class="portfolio-item">
                							<div class="portfolio-image">
                								<a href="[[~[[+id]]]]"><img src="[[+tv.interactive-background-image:phpthumbof=`w=280&h=280&zc=1&aoe=0&far=0``]]" alt="[[+tv.main-content-title]]" class="fx7"/></a>
                							</div>
                							<div class="portfolio-caption">
                								<h4>[[+tv.main-content-title]]</h4>
                                            				</div>
                						</div>
                						<!-- ENDS ITEM -->
                
                					<div class="clear"> </div>
                					</div>
                					<!-- ENDS PORTFOLIO ROW - 3 ITEMS -->
                
                					<!-- START PORTFOLIO ROW - 3 ITEMS -->
                					<div class="portfolio-row">

                This is all my code. smiley
                Thank you!! [ed. note: legues last edited this post 14 years, 4 months ago.]
                  • 3749
                  • 24,544 Posts
                  The problem is that your tpl3th is not valid HTML. It has an unmatched closing div and an unmatched opening div.

                  Having invalid HTML in a Tpl chunk almost never works. I'm not sure what you're trying to do is possible with getResources because it doesn't have an &outerTpl property, which is what you need. No matter how you do it, a row with less than three items is going to have an unclosed div tag.

                  You could try doing it with Wayfinder, but I don't think it will set the TV placeholders (I could be wrong).

                  I would write a custom snippet to use instead of getResources. That would give you complete control of the output. You'd need, at minimum, an itemTpl chunk and a rowTpl chunk. Get it working on its own before using getPage with it.

                  This is not tested (though it might actually work), but it would look something like this:

                  portfolioRowTpl:

                  <!-- START ROW -->
                  <div class="portfolio-row">
                      [[+items]]
                  </div>
                  <div class="clear"></div>
                  <!-- END ROW -->
                  



                  portfolioItemTpl (note: this is not the same as yours)

                  <!-- START ITEM -->
                      <div class="portfolio-item">
                          <div class="portfolio-image">
                              <a href="[[~[[+id]]]]"><img src="[[+tv.interactive-background-image]]:phpthumbof=`w=280&h=280&zc=1&aoe=0&far=0`" alt="[[+tv.main-content-title]]" class="fx7"/></a>
                          </div>
                          <div class="portfolio-caption">
                              <h4>[[+tv.main-content-title]]</h4>
                          </div>
                      </div>
                      <!-- ENDS ITEM -->
                  


                  Snippet tag:

                  [[!MySnippet? &parent=`5` &limit=`6` &itemTpl=`portfolioItemTpl` &rowTpl=`portfolioRowTpl` &sortby=`createdon` &sortdir = `ASC`]]


                  Snippet (MySnippet):

                  <?php
                  $sp =&scriptProperties;
                  $parent = $modx->getOption('parents', $sp, 5);
                  $limit = $modx->getOption('limit', $sp, 6);
                  $sortby = $modx->getOption('sortby', $sp, 'createdon');
                  $sortdir = $modx->getOption('sortdir', $sp, 'ASC');
                  $itemTpl = $modx->getOption('itemTpl', $sp, 'portfolioItemTpl');
                  $rowTpl = $modx->getOption('rowTpl', $sp, 'portfolioRowTpl');
                  
                  
                  /* ********  You can delete this section once it's working ********/
                  $x = $modx->getChunk($itemTpl);
                  if (empty($x) ) {
                      return 'Cannot find itemTpl';
                  }
                  $x = $modx->getChunk($rowTpl);
                  if (empty($x) ) {
                      return 'Cannot find rowTpl';
                  }
                  /***************************************************************/
                  
                  
                  $c = $modx->newQuery('modResource');
                  $c->where( array (
                      'parent' => $parent,
                      'published' => '1',
                      'deleted' => '0',
                  ));   
                  
                  $c->sortby($sortby, $sortdir);  // might want publishedon instead
                  $c->limit($limit);
                  
                  $resources = $modx->getCollection('modResource', $c);
                  
                  if (empty($resources)) {
                      return 'No Resources found';
                  }
                  
                  $rows = array_chunk($resources,3);
                  $output = '';
                  foreach ($rows as $row) {
                      $rowOutput = '';
                      foreach($row as $resource) {
                          $fields = array();
                          $fields['id'] = $resource->get('id');
                          $fields['tv.interactive-background-image'] = $resource->getTVValue('tv.interactive-background-image');
                          $fields['tv.main-content-title'] = $resource->getTVValue('tv.main-content-title');
                          
                          $rowOutput .= $modx->getChunk($itemTpl,$fields);
                          
                      }
                      $output .= $modx->getChunk($rowTpl, array('items' => $rowOutput) );
                  }
                  
                  return $output;
                  



                  If you need multiple parents in one tag, it gets more complicated, but not too much.



                  ------------------------------------------------------------------------------------------
                  PLEASE, PLEASE specify the version of MODX you are using.
                  MODX info for everyone: http://bobsguides.com/modx.html [ed. note: BobRay last edited this post 14 years, 4 months ago.]
                    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
                    • 16899
                    • 284 Posts
                    Hi Bob

                    Thanks a lot for your reply and code! smiley!! Well i did the tpl3th in that way because i have the getpage call wrapped by portfolio-row div (i forgot to tell you this little thing)!! So the portfolioTpl3th will always be closed and valid! The problem is, if i have just 3 projects, i´ll have a
                    <div class="portfolio-row"></div>
                    empty and i want to avoid that!!! Probably with your code i´ll have this little thing solved!! smiley

                    					<!-- START PORTFOLIO ROW - 3 ITEMS -->
                    					<div class="portfolio-row">
                    
                    					[[!getPage? 
                    					&elementClass=`modSnippet` 
                    					&element=`getResources`
                    					&parents=`5` 
                    					&limit=`6`
                    					&sortdir=`ASC`
                    					&includeTVs=`1` 
                    					&processTVs=`1`
                    					&tpl=`portfolioTpl`
                    					&tplLast=`portfoliolastTpl`
                    					&tpl_n3=`portfolioTpl3th`
                    					]]
                    
                    					<div class="clear"> </div>
                    					</div>
                    					<!-- ENDS PORTFOLIO ROW - 3 ITEMS -->
                    [ed. note: legues last edited this post 14 years, 4 months ago.]
                      • 37693
                      • 47 Posts
                      shaunmorrison Reply #10, 14 years ago
                      Does this thread https://forums.modx.com/thread/69754/getresources---group-results?page=2#dis-post-391442 help? It shows a simple snippet that builds on top of getResources so you can add opening and closing markup every nth item.