• Order ditto content in two columns#

  • 18097
    25

    mamalovesyou Reply #1, 5 months, 2 weeks ago

    Reply
    Hi all

    I am creating a directory at http://hearthomemag.co.uk/_/directory and need some help with the layout.

    I want to use 2 columns to display the data.

    The code I am using for calling the listings is:

    [!Ditto? &parents=`4` &tagData=`category` &tpl=`productDetail` &sortBy=`menuindex` &sortDir=`ASC`!]


    The 'productDetail' tpl is:

    <div class="grid_6 alpha">
[+content+]
</div>

<div class="grid_6 omega">
[+content+]
</div>


    Obviously I want to display these in order on the page but left to right down the page.

    Any help would be so gratefully received.


  • 28042
    15,112
    How MODx Evo Works

    Log in to an Evo Manager username guest, password guestuser.

    sottwell Reply #2, 5 months, 2 weeks ago

    Reply
    Try Ditto's tpl, tplAlt, tplFirst, tplLast, tplCurrent options. 
    &tpl=`tplAlpha` &tplAlt=`tplOmega

    The tplAlpha would have your first tpl, and tplOmega would have the second one.
    Then size and float your .grid_6 elements in the CSS so that they sit nicely two to a row.


  • 18097
    25

    mamalovesyou Reply #3, 5 months, 2 weeks ago

    Reply
    I think I get what you mean but I'm not fully there. Could you expand a little more on what you mean and then I'll be good to go.


  • 28042
    15,112
    How MODx Evo Works

    Log in to an Evo Manager username guest, password guestuser.

    sottwell Reply #4, 5 months, 2 weeks ago

    Reply
    Create two chunks, one named tplAlpha, which will have
    <div class="grid_6 alpha">
[+content+]
</div>


    The other will be named tplOmega and will have
    <div class="grid_6 omega">
[+content+]
</div>


    In your getResources call include the parameters
    &tpl=`tplAlpha` &tplAlt=`tplOmega`


    Then in your CSS have something like this
    .grid_6{float:left;width:50%;}


    You'll probably want to adjust that width setting, and perhaps add margins to make the .grid_6 blocks sit nicely two in a row.


  • 18097
    25

    mamalovesyou Reply #5, 5 months, 1 week ago

    Reply
    That worked perfectly. I might need to tweak the CSS a little but essentially it has done it. I knew there would be a way - thanks for helping me out with that one.