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.

Tip: Remember you can use Output Modifiers so a TV won’t’ display it’s empty. For example let’s say you have a TV of
an image type with the name tvImage, in order to use a modifier so it doesn’t render the empty image tag unless the
TV has content it your MODX tag would look something like this:

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.

Benjamin Marte

Benjamin Marte is a Front End Developer with more than 10 years of experience creating interactive multimedia experiences
both online and offline. He currently works as a Senior Front End Developer at
Wolters Kluwer. He’s the creator of CMSTricks where he blogs about the MODX Content Management System and tweets
with a focus on MODX and Web Development under the handle
@benmarte

Comments (6)

Just a quick suggestion: Perhaps in a future tutorial you could show how to use a snippet to sniff out whether
or not a TV has content first before that content is displayed using a chunk of HTML. This is useful especially
with image TVs, because if the client has not set a photo for the imageTV, you don’t want empty image placeholders
showing up on the website.

There’s really no need to do a custom snippet for that when you can use a MODX Output Modifier to take care of
the job. I covered some output filter usage in my previous tutorial but I will add it as a tip on this tutorial
as well.