Generic grouping sipped

221 Posts

lx Reply #1, 9 years ago

Is there a snipped that can group output of any snipped in to blocks of 2,3,4 ...etc results?

At this moment I have an output of getPageAssets - which are a just a list of <img ../> results. I would like to group them by 2 and wrap them with a div.

Do you think that there is any generic output wrapper that could help me with it?

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

Lucas from AroundCyprus.net

24,544 Posts

BobRay Reply #2, 9 years ago

You might be able to do it by putting that inside getResources as describe here: https://github.com/craftsmancoding/assetmanager/wiki/getPageAssets and using &tpl, &tplFirst, &tplOdd, and &tplLast.

I'm not sure it would work. It might take a custom version of getPageAssets that injected the div tags at the appropriate points using the modulus operator (%).

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

221 Posts

lx Reply #3, 9 years ago

All output images that I want to group are in one Resource - so using getResources will not help.

Did you came across any snipped or output modifier that would group the output of any snipped?

Lucas from AroundCyprus.net

24,544 Posts

BobRay Reply #4, 9 years ago

I don't think there is one. I think you'd have to rename and rewrite getPageAssets.

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

discuss.answer

221 Posts

lx Reply #5, 9 years ago

I've found this http://modx.com/extras/package/alignimage that maybe could be modified. But meanwhile I've used jquery to solve the problem.
In case some one would like to use it, here is the code:
HTML:

<div  id="carousel">
   <a href="#" class="galFoto "><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
  
   <a href="#" class="galFoto "><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>

   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
  
   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>

   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
  
   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>

   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
          
   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
  
   <a href="#" class="galFoto"><img src="img/placeholders/team-member.jpg" width="125" height="125" border="0"></a>
           
         </div>

JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script>
var $span = $("#carousel .galFoto");
for (var i = 0; i < $span.length; i += 2) {
    var $div = $("<div/>", {
        class: 'galGroup'
    });
    $span.slice(i, i + 2).wrapAll($div);
}
</script>

Based on this tutorial: https://jquerytipsntricks.wordpress.com/2013/06/22/wrap-n-number-of-elements-inside-a-container/

Lucas from AroundCyprus.net

Answered Generic grouping sipped