TV's for varying page layouts

5,888 Posts

Bruno17 Reply #31, 12 years, 11 months ago

And.......

you don’t need this outputFilter:

[[+row_cells_1:gt=`0`:then=`

(when you do so use allways :else=`` - if not, this can result in performance-issues!)

you can create three different chunks for the layouts and use the &tpl=`@FIELD:` - feature.

I think its better to post your steps here. Than we can discuss them better and we don’t mess our environment by package-installing.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

4 Posts

pureppl Reply #32, 12 years, 11 months ago

Übel.

I did use PackMan for this package and it was a very big mistake to use add two subpackages.. shouldn an installer make some basic checks?

Sorry for that.

I’ll post the steps later this day.

4 Posts

pureppl Reply #33, 12 years, 11 months ago

I must be crazy!

--

Step 0

Required Packages (Load and install via Package Manager)

MIGX
TinyMCE

Step 1

We have to create some Template Variables: ^{(you’ll find Input Type under the Input Options tab of the Template Variable)}

row_pos (Input Type: Number, Default Value: 0)

row_cells_1 (Input Type: Hidden, Default Value: 1)
row_cells_2 (Input Type: Hidden, Default Value: 1)
row_cells_3 (Input Type: Hidden, Default Value: 1)

cell_1_image (Input Type: Image)
cell_1_headline (Input Type: Text)
cell_1_content (Input Type: RichText)

cell_2_image (Input Type: Image)
cell_2_headline (Input Type: Text)
cell_2_content (Input Type: RichText)

cell_3_image (Input Type: Image)
cell_3_headline (Input Type: Text)
cell_3_content (Input Type: RichText)

Step 2

Now we’ll create another Template Variables named ’MultiColumn’.

Set the Input Type of ’MultiColumn’ to ’migx’.

Stay on the Input Options tab of Template Variable ’MultiColumn’ and paste the following into Form Tabs:

[{
    "formname":"One Cell"
    ,"formtabs": [{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_pos"
            ,"caption":"Position"
            ,"inputTV":"row_pos"
        },{
            "field":"row_cells_1"
            ,"inputTV":"row_cells_1"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"cell_1_image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_1_headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"cell_1_content"
        }]
    }]
},{
    "formname":"Two Cells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_pos"
            ,"caption":"Position"
            ,"inputTV":"row_pos"
        },{
            "field":"row_cells_2"
            ,"inputTV":"row_cells_2"
        }]
    },{
        "caption":"First"
        ,"fields":[{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"cell_1_image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_1_headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"cell_1_content"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTV":"cell_2_image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_2_headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTV":"cell_2_content"
        }]
    }]
},{
    "formname":"Three Cells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_pos"
            ,"caption":"Position"
            ,"inputTV":"row_pos"
        },{
            "field":"row_cells_3"
            ,"inputTV":"row_cells_3"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"cell_1_image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_1_headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"cell_1_content"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTV":"cell_2_image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_2_headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTV":"cell_2_content"
        }]
    },{
        "caption":"Third"
        ,"fields":[{
            "field":"cell_3_image"
            ,"caption":"Image"
            ,"inputTV":"cell_3_image"
        },{
            "field":"cell_3_headline"
            ,"caption":"Headline"
            ,"inputTV":"cell_3_headline"
        },{
            "field":"cell_3_content"
            ,"caption":"Content"
            ,"inputTV":"cell_3_content"
        }]
    }]
}]

Still on the Input Options tab of Template Variable ’MultiColumn’, paste the following into Grid Columns:

[{
    "header": "Position"
    ,"width": "30"
    ,"sortable": "true"
    ,"dataIndex": "row_pos"
},{
    "header": "First"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_1_headline"
},{
    "header": "Second"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_2_headline"
},{
    "header": "Third"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_3_headline"
}]

Step 3

We’ll need a Chunk.

Create one and name it ’MultiColumn’.

Paste the following into Chunk code:

[[+row_cells_1:gt=`0`:then=`
    <div class="box grid_h_12 grid_v_4">
        <div class="grid_h_12 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_12 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_12 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
`:else=``]]

[[+row_cells_2:gt=`0`:then=`
    <div class="box grid_h_6 grid_v_4">
        <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
    <div class="box grid_h_6 grid_v_4">
        <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v">[[+cell_2_image]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_1">[[+cell_2_headline]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
    </div>
`:else=``]]

[[+row_cells_3:gt=`0`:then=`
    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_2_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_2_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
    </div>
    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_3_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_3_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_3_content]]</div>
    </div>
`:else=``]]
<div class="clear"></div>

Step 4

Create a Template named ’MultiColumn’ and paste the following as its Template code:

<!DOCTYPE html>
<html>
    <head>
        <title>[[++site_name]] - [[*pagetitle]]</title>
        <base href="[[++site_url]]" />
        <style>
            /* reset */
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
            /* text */
            body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
            /* fixed: cols 12, rows 4, box_w 80, box_h 80, margin_w 10, margin_h 10, w 960, h 320 */
            .container,.container_12{margin-left:auto;margin-right:auto;width:960px;}.grid_h_1,.grid_h_2,.grid_h_3,.grid_h_4,.grid_h_5,.grid_h_6,.grid_h_7,.grid_h_8,.grid_h_9,.grid_h_10,.grid_h_11,.grid_h_12{position:relative;display:inline;float:left;margin-left:10px;margin-right:10px;}.grid_v_1,.grid_v_2,.grid_v_3,.grid_v_4{position:relative;display:inline;float:left;margin-top:10px;margin-bottom:10px;}.alpha_h{margin-left:0;}.omega_h{margin-right:0;}.alpha_v{margin-top:0;}.omega_v{margin-bottom:0;}.grid_h_1{width:60px;}.grid_h_2{width:140px;}.grid_h_3{width:220px;}.grid_h_4{width:300px;}.grid_h_5{width:380px;}.grid_h_6{width:460px;}.grid_h_7{width:540px;}.grid_h_8{width:620px;}.grid_h_9{width:700px;}.grid_h_10{width:780px;}.grid_h_11{width:860px;}.grid_h_12{width:940px;}.grid_v_1{min-height:60px;}.grid_v_2{min-height:140px;}.grid_v_3{min-height:220px;}.grid_v_4{min-height:300px;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}* html .clearfix,*:first-child+html .clearfix{zoom:1;}.middle_1{line-height:60px;}.middle_2{line-height:140px;}.middle_3{line-height:220px;}.middle_4{line-height:300px;}
            /*  */
            .box {background:#ccc}
        </style>
    </head>
    <body>
        <div class="container clearfix">
            [[getImageList? &tvname=`MultiColumn` &tpl=`MultiColumn`]]
            <div class="box grid_h_12 grid_v_1">[[*content]]</div>
            <div class="box grid_h_12 grid_v_1 middle_1">[^q^] queries, querytime [^qt^], phptime [^p^], totaltime [^t^], source [^s^]</div>
        </div>
    </body>
</html>

Step 5

Check the box in the Access column of the Template Variable ’MultiColumn’ within the Template Variables tab of the Template,

Save.

Step 6

Create a new document with the Template named ’MultiColumn’.

Go to the Template Variables tab and add your one-two-thee multi-column rows to the document.

Save.

Step 7

View the page on the frontend.

--

Hope it works for you. If not, hit "Reply"

284 Posts

novolo Reply #34, 12 years, 11 months ago

Do you have some screenshots (backend + frontend) for this example? Would be cool!

MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)

5,888 Posts

Bruno17 Reply #35, 12 years, 11 months ago

Thanks for your Tutorial, pureppl!
You can simplyfie some steps. I will report later about them.
I think I will create a wiki subpage for Tutorials and will add thisone as a first Tut.

btw.:

great idea to add additional infos by adding hidden-inputTVs to different forms!

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

4 Posts

pureppl Reply #36, 12 years, 11 months ago

Quote from: novolo at Jun 12, 2011, 11:40 AM

Do you have some screenshots (backend + frontend) for this example? Would be cool!

5,888 Posts

Bruno17 Reply #37, 12 years, 11 months ago

ok, a bit simplyfied:

Step 1

We have to create some Template Variables: (you’ll find Input Type under the Input Options tab of the Template Variable)

* row_cells_1 (Input Type: Hidden, Default Value: 1)
* row_cells_2 (Input Type: Hidden, Default Value: 1)
* row_cells_3 (Input Type: Hidden, Default Value: 1)

you need only one TV for each TV-type:

* image (Input Type: Image)
* richtext (Input Type: RichText)

Step 2

Now we’ll create another Template Variables named ’MultiColumn’.

Set the Input Type of ’MultiColumn’ to ’migx’.

Stay on the Input Options tab of Template Variable ’MultiColumn’ and paste the following into Form Tabs:

[{
    "formname":"OneCell"
    ,"formtabs": [{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_cells_1"
            ,"inputTV":"row_cells_1"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    }]
},{
    "formname":"TwoCells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_cells_2"
            ,"inputTV":"row_cells_2"
        }]
    },{
        "caption":"First"
        ,"fields":[{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    }]
},{
    "formname":"ThreeCells"
    ,"formtabs":[{
        "caption":"Row Format"
        ,"fields": [{
            "field":"row_cells_3"
            ,"inputTV":"row_cells_3"
        }]
    },{
        "caption":"First"
        ,"fields": [{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_1_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_1_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    },{
        "caption":"Second"
        ,"fields":[{
            "field":"cell_2_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_2_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_2_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    },{
        "caption":"Third"
        ,"fields":[{
            "field":"cell_3_image"
            ,"caption":"Image"
            ,"inputTV":"image"
        },{
            "field":"cell_3_headline"
            ,"caption":"Headline"
        },{
            "field":"cell_3_content"
            ,"caption":"Content"
            ,"inputTV":"richtext"
        }]
    }]
}]

Still on the Input Options tab of Template Variable ’MultiColumn’, paste the following into Grid Columns:

[{
    "header": "Row Format"
    ,"width": "30"
    ,"sortable": "true"
    ,"dataIndex": "MIGX_formname"
},{
    "header": "First"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_1_image"
    ,"renderer": "this.renderImage"
},{
    "header": "Second"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_2_image"
    ,"renderer": "this.renderImage"    
},{
    "header": "Third"
    ,"width": "160"
    ,"sortable": "false"
    ,"dataIndex": "cell_3_image"
    ,"renderer": "this.renderImage"    
}]

Step 3

We’ll need three Chunks.

chunk ’OneCell’ :

    <div class="box grid_h_12 grid_v_4">
        <div class="grid_h_12 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_12 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_12 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
<div class="clear"></div>

chunk ’TwoCells’ :

    <div class="box grid_h_6 grid_v_4">
        <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
    <div class="box grid_h_6 grid_v_4">
        <div class="grid_h_6 alpha_h omega_h grid_v_1 alpha_v">[[+cell_2_image]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_1">[[+cell_2_headline]]</div>
        <div class="grid_h_6 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
    </div>
<div class="clear"></div>

chunk ’Three Cells’ :

    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_1_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_1_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_1_content]]</div>
    </div>
    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_2_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_2_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_2_content]]</div>
    </div>
    <div class="box grid_h_4 grid_v_4">
        <div class="grid_h_4 alpha_h omega_h grid_v_1 alpha_v">[[+cell_3_image]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_1">[[+cell_3_headline]]</div>
        <div class="grid_h_4 alpha_h omega_h grid_v_2 omega_v">[[+cell_3_content]]</div>
    </div>
<div class="clear"></div>

Step 4:

use the same Template as above, but change the snippet-tag for getImageList to:

[[getImageList? &tvname=`MultiColumn` &tpl=`@FIELD:MIGX_formname`]]

this will switch the chunk by the field MIGX-formname, which’s value is the one you’ve choosed by the form-dropdown.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

4 Posts

pureppl Reply #38, 12 years, 11 months ago

Quote from: Bruno17 at Jun 12, 2011, 03:37 PM

this will switch the chunk by the field MIGX-formname, which’s value is the one you’ve choosed by the form-dropdown.

Interesting. Then you can drop thoose TVs:

Quote from: Bruno17 at Jun 12, 2011, 03:37 PM

* row_cells_1 (Input Type: Hidden, Default Value: 1)
* row_cells_2 (Input Type: Hidden, Default Value: 1)
* row_cells_3 (Input Type: Hidden, Default Value: 1)

They where only needed to distinct between the forms within my one-chunk-only solution.

5,888 Posts

Bruno17 Reply #39, 12 years, 11 months ago

Ok,
but you will need at least one field for the first tab, where we have the automatically created form-switcher-dropdown.
You can add a hidden field, which is empty here.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

4 Posts

pureppl Reply #40, 12 years, 11 months ago

Quote from: Bruno17 at Jun 12, 2011, 06:48 PM

Ok,
but you will need at least one field for the first tab, where we have the automatically created form-switcher-dropdown.
You can add a hidden field, which is empty here.

I my example i have one field on the first tab. Its called position to allow for reordering of the items.