Spilling Ditto into Column Buckets for layout

I have a two-column css layout.

Each column is made up of ditto-generated divs. Left column items are floated left. Right column item are floated right.

Each div is the same height, until you click a link that toggles more info in the box, forcing it to expand vertically. This pushes the adjacent div down the page.

I’d like to have the left and right column items able to expand vertically, without pushing the adjacent column divs down.

At first I tried to do this with css, but now i think if I could have ditto put every other item into THE left column and THE right column, this will be solved... but... is it possible to do this with ditto?

Not sure I understand 100%. Ditto has the option to have a different tpl for odd and even results, so you could use this to create independent left/right divs for each item.

If you want to have the left and the right in a parent div then you would use two Ditto calls and only show the evens on one and the odds in the other so that each col would be populated.

I am sure this doesn’t answer your question, but maybe it helps come up with an idea.

Thanks for the reply!

Yes, I want to put the even divs into one parent column div, and the alt/odd divs into another parent column div. How can this be accomplished with ditto?

If it is to be:


Then you can use Ditto’s altTpl parameter and have a tpl for even and a different tpl for odds.
http://ditto.modxcms.com/files/snippet-ditto-php.html#tplAlt

If you want:


Then you need 2 ditto calls one for each parent div. In one you have a blank tpl while in the other you have a blank altTpl (if it is blank it will no display any output, that is the theory).

There are other ways as well. You can use Ditto’s new iteration placeholder and then use PHx to show a class if odd and another if even. Or you could use a logic snippet to do the same.

I am just curious....I am no expert here btw and I don’t mean to hijack this thread....

@dev_cw.....does this mean ditto will parse the same documents twice, one for each column, but like you said, only display them in the odd/even fashion? Is the effect on the server if there are many documents to be displayed an issue?

@trumpetmic

like you kinda inferred, the problem seems to be the CSS? Why not post the CSS code here and see if a solution can be found? It sounds like the infamous "equal heights column" problem to me.

EDIT: CSS solutions to this problem can be problematic too


Just my 2 cents....then again, I might have totally misunderstood you 

cheers/k

Quote from: kongondo at Dec 23, 2008, 07:32 AM

@dev_cw.....does this mean ditto will parse the same documents twice, one for each column, but like you said, only display them in the odd/even fashion? Is the effect on the server if there are many documents to be displayed an issue?

That is true, it will do twice the work. I guess you could filter out the odds/evens out somehow which may be more efficient. To be 100% efficient a custom build script just for this would be better.

Don’t be surprised if someone else has a sleek idea for doing this that has not been put on the table yet.

Thx for the clarification...


cheers/k

@trumpetmic: How did you get on with this, i need to achieve the same sort of thing but with 3 columns (so the odd and even solution wont work for me) and have the same problem of adjacent divs moving down when info box expands.

My first thought would be to use PHx but never used it before so not sure it’s even possible or where to start. But my thinking was counting how many results and dividing by the by 3 and placing x amount in each column but don’t know where to start. If any one has achieved anything similar, any advice would be much appreciated.

Many Thanks

Ben