Integrating a Template into MODX part 4

Template Variables

A Template Variable (TV) is a custom field, or more specifically it is custom field for a MODx Resource. TVs are used to extend the default attributes available for a Resource (e.g. for a Page or WebLink). A normal MODx Resource has a certain number of default fields: pagetitle, content, description, etc. If you need to add some custom fields to your pages, e.g. a second content area or a dropdown list of month names, or any other bit of custom data, you do this by adding a Template Variable to your template. MODx allows you to have a virtually unlimited number of TVs.

Now that we know what a Template Variable is let s see what they can do, Click on the Elements Tab then Right Click on Template Variables and select New Template Variable

In the Template Variable page, fill the Name, Caption and Description fields. In this example I used column1 in the Name and Column 1 in the Caption and put a brief Description of what this TV does.

Next, click on the Input Options Tab and in the Input Type drop down select RichText this tells MODX that our TV is a RichText field.

Click on the Template Access Tab here select which template will have access to this TV we need this TV to be accessible by the Homepage Template so let s checkmark it.

Now that MODX knows which template will make use of this TV let s see how it works, click on Resources then click on your Home resource you will notice MODX added a Template Variables tab if you click on it you will see our TV with the caption we used for our TV (Column 1 ) the description and the Rich Text field.

Proceed to create TV for the remaining 3 columns, the testimonials and the 2 sub heading sections on the homepage.

Instead of repeating the previous steps we can duplicate the TV we just created by Right clicking on it and choosing Duplicate TV and just rename it making sure to duplicate its values since all of them need to be Rich Text TVs. After duplicating each TV make sure to go into each TV and change their Caption and Description. If we needed a different type of TV we could still duplicate them but we would need to change its type so keep that in mind when duplicating a TV.

Now that we got all our TVs created we need to add them to our Homepage template, click on Elements then Templates and select your Homepage template.

In order to make this process faster I suggest you open a secondary tab and open your Home resource in one tab and your Homepage template in the other.

In your Homepage Template locate the content of the first column it s the first div with the class grid_3 in the div with the ID Content.

Now let s cut (ctrl+x) the contents of the column 1 div and paste it in our Column 1 Rich Text field on our second tab, since we are copying HTML code click on the HTML button in TinyMCE then in the Pop-Up window paste (ctrl+v) the HTML code and click Update, this prevents TinyMCE from rendering the actual code as text.

Back in our Homepage Template we have to put the TV tag column 1 where we cut the text from, so we have to place the column 1 tag which is:

[[*column1]]

Now MODX knows where to render the content of our Column 1 Rich Text field TV.

Repeat these steps for each of the remaining TVs copying and pasting each columns content into the corresponding Rich Text field using the HTML button in TinyMCE, remember the TV tags in your Homepage Template must match the name of the TV name you used so if you used column2 as the name for your second column TV the tag would be:

[[*column2]]

So after replacing all the content in the Homepage Template with the corresponding TV Tag it should look like this

Now our clients can edit each section of the site individually via the MODX manager using the TinyMCE editor via the Template Variables Tab.

Our next section will let us move the Rich Text fields from the Template Variables tab to the Documents tab removing the extra step of having the client click on the Template Variables tab in order to update the Homepage, this is called Form Customization.