This snippet is a result of the solution provided to the MODx user Lokust.

Lokust had a problem with adjusting Ditto’s output and requested to design a thing that would divide the result set into equal groups with a configurable wrapper around the group so that the final output might be formatted with CSS into rows/columns as required.

Lokust not only donated to my work, but also decided to submit the snippet to the public domain as a MODx Add-On.

How to use DittoFormat

# 1) create new snippet 'DittoFormat' and paste into it content of the attached dittoformat.txt file
# 2) call your snippet something as:
[[DittoFormat? &parents=`2` &depth=`1` &display=`all` &sortBy=`menuindex` &sortDir=`ASC` &group=`3` &tplGroup=`group-chunk` &tplItem=`item-chunk`]]
# 3) please read more details on parameters in snippet's header

DittoFormat Snippet — the very latest version
Last modified: 2009-09-23, 16:11 — Size: 3,44 KB — Users: 193 — Downloads: 250

Write a comment

• Required fields are marked with *.
• Comments are published after the approval of the site moderator, who is a human rather than a wind-fast computer program so please be patient. Off-topic comments are definitely removed.

* Name:
* E-mail (never revealed on the page):
Subject:
* Comment:

* Code:
 

Enter this code into the appropriate field of the form while submitting an e-mail or a comment. If you have trouble with reading it, generate another...

roltom

dittoformat 5 items per row
Comment #1 on: 2010-03-31, 03:13

Seems to be just what I'm looking for! How do I arrange dittoformat results into rows of 5? I have set the group parameter to 5, what do I do with tplgroup? Can you give me an example?

Aleksander Maksymiuk

tplGroup
Comment #2 on: 2010-03-31, 06:51

All parameters are well-described (with examples) within snippet's header. Actually, you are the first person who asks what to do with parameters

tplGroup is a place where you can instruct how your entire group (row) of items should be wrapped: <div class="regular-group">[+group+]</div>

tplGroupLast stands for the same but it is applied to the last and incomplete group. In your case, last incomplete group (row) can contain 4, 3, 2, or 1 items. Example: <div class="last-group">[+group+]</div>

tplGroup, tplGroupLast are chunks.

roltom

tplGroup styling
Comment #3 on: 2010-03-31, 09:59

I'm not much of a programmer. What am I doing wrong? This is my call:

This is the chunk 'modellThumbs':

<div id="modellthumb">
<a href="" target="_self">
<img src="" alt="" width="95" height="95" /><br>
</a>
</div>

This is 'modellThumbsGroup':

<div class="regular-group">[+group+]</div>

Should I specify the class regular-group somehow to give me a horizontal listing instead of a vertical one? Right now, the results are listed vertically.

Aleksander Maksymiuk

tplGroup styling
Comment #4 on: 2010-03-31, 11:48

Of course, you need to define within your CSS sheet how things are displayed. Snippet cannot do this for you -- the snippet only fetches items, divides them into groups, wraps the groups with appropriate CSS classes, but how CSS classes behave is up to you alone. Understanding this thing is a kind of designer's basics.

Defining something like

#modellthumb {
...
float: left;
...
}

within your CSS stylesheet will probably solve your problem, but I cannot teach you the whole complexity of CSS.

Good luck :)