Getting Ditto to work with my css grid layout - please help

11 Posts

preddz_design Reply #1, 16 years, 6 months ago

Hi Forum

I have a page on a site that will display products posted in a grid - basically 3 columns. So the first row has 3 products, then I have a clear div then re-use the 3 column code for the next 3 products, clear again and so on.

Here is the basic html:

<div class="grid_3">

<p>Product 1</p>

</div>
<div class="grid_3">

<p>Product 2</p>

</div>
<div class="grid_3">

<p>Product 3</p>

</div>

<div class="clear"> </div>

<div class="grid_3">

<p>Product 1</p>

</div>
<div class="grid_3">

<p>Product 2</p>

</div>
<div class="grid_3">

<p>Product 3</p>

</div>

<div class="clear"> </div>

The problem I have is how do I get Ditto to output 3 products, then the clear div, then another 3, then clear etc...

Here’s the code I’m using so far:

[[Ditto? &orderBy=`createdon ASC` &tpl=`test_post`]]

<div class="clear"> </div>

test_post chunk:

<div class="grid_3">

[+content+]

</div>

So I just need to figure out how to get 3 posts (1 row) at a time to output, then the clear div, then the next 3, all on the same page.

If anyone could help me with this, it would be greatly appreciated.

Thanks,
Preddz

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 6 months ago

Why not have the whole Ditto call inside of a <div> container with a specific width in CSS, then have the Ditto blocks sized in the CSS to be 33% and floated left? This way the HTML and CSS all by themselves will load up three, then drop to the next line and load three, and so forth.

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

11 Posts

MODx09 Reply #3, 16 years, 6 months ago

Hi, I am having the same problem and no solution. I am experimenting with the blueprint css framework, so the last >cell< in a row has another class than the >cells< before.

What I want is Ditto to aggregate the child documents into a table, but no tab used. I want css.

Example:

<div class="columnspan_2">
<div class"column">content of 1st child document</div>
<div class"column last">content of 2nd child document</div>
</div>

11 Posts

MODx09 Reply #4, 16 years, 6 months ago

Sorry, accidently posted before I was ready.

What I want is Ditto to aggregate the child documents into a table, but no tab used. I want css.

Example:

<!-- 1st row of child documents -->
<div class="columnspan_2">
    <div class"column">content of 1st child document</div>
    <div class"column last">content of 2nd child document</div> <!-- additional class: last -->
</div>

<!-- 2nd row of child documents -->
<div class="columnspan_2">
    <div class"column">content of 3rd child document</div>
    <div class"column last">content of 4th child document</div> <!-- additional class: last -->
</div>

<!-- 3rd row of child documents -->
<div class="columnspan_2">
    <div class"column">content of 5th child document</div>
    <div class"column last">content of 6th child document</div> <!-- additional class: last -->
</div>

11 Posts

MODx09 Reply #5, 16 years, 6 months ago

Maybe this post can help
http://modxcms.com/forums/index.php/topic,43750.0.html
or this one
http://modxcms.com/forums/index.php/topic,43348.msg258827.html#msg258827

I will try it myself, when I have time again. Good luck!

11 Posts

preddz_design Reply #6, 16 years, 6 months ago

Thanks MODx09! the info in that other thread (http://modxcms.com/forums/index.php/topic,43348.msg258827.html#msg258827) really helped.

Here’s how I got it working:

chunk code:

[+ditto_iteration:math=`?%3`:eq=`0`:then=`<div class="clear"></div>`+]
<div class="grid_3">
<h2>[+pagetitle+]</h2>
[+content+] 
</div>

So basically after every 3rd ditto iteration, the clear div will output, making nice clean equal height rows.

Thanks again!

11 Posts

MODx09 Reply #7, 16 years, 5 months ago

Hi preddz_design,

fine that the post solved your problem. Was on vacation, so sorry that I couldn’t answer earlier.

I will try your solution myself tonight, that was a problem I had for a long time. Seems to be solved now ;o) Thanks for the code.

Good luck learning to master MODx!