Integrating a Template into MODX part 4

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

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.

Column 1 TV

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.

Input Options & RichText

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.

Template Access

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.

Template Variables Tab & Column 1 Rich Text

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

Remaining TVs

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.

Duplicate TV Values

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.

Column 1 Div

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:


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

Column 1 TV Tag

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:


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

Homepage Template TV Tags

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:

[[*tvImage:!empty=`<image src="[[*tvImage]]"/>`]]

Make sure to read the Official MODX Output Modifier documentation for more info on how to use them.

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.

18 Jul

Author Benjamin Marte Category Tutorials Comments (6)

Comments (6)

  1. CottageWebsiteStuff:
    Jul 24, 2012 at 04:01 AM

    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.

  2. Benjamin Marte:
    Jul 24, 2012 at 06:37 AM

    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.

    Thanks for reading the tutorial and the suggestion.

  3. Henk Herwig:
    Feb 15, 2013 at 03:53 AM

    Dear Benjamin,

    We are working on a new website for our Society for Japanese Arts. For that we want to use a CMS.
    Is it possible to make a text page with the content arranged in columns?

    Author Title page

    Matthi Forrer.....................T sh sai Sharaku, the man, his works and Tsutaya Jusab r ............................................ p. 5-29
    David Pollack.................... A broader view: The rise of the ukiyo-e triptych...................................................................p. 30-40
    Ton and Mies Becker........The coming-out of a manju netsuke..................................................................................... p. 40-45
    Gina Collia-Suzuki............ Zuihitsu: Beautiful blackened smiles..................................................................................... p. 46-48

    I would appreciate your advice very much.
    with kind greetings
    Henk Herwig

  4. Benjamin Marte:
    Feb 19, 2013 at 08:12 PM

    @Henk there are many ways to accomplish this, the easiest way would be to use template variables or use something more advanced like MIGX it all depends on how you want to display your data.

  5. Michael:
    Jul 06, 2013 at 12:12 PM

    Dear Ben: can you tell me how I may also have my html (at least) formatted and color-coded, like your screen shot examples? I'm using the Cloud web environment.

  6. Benjamin Marte:
    Jul 06, 2013 at 06:27 PM

    @Michael I'm using Ace as my editor you can get it from the extras repo and make sure to check out my review of it

    Good Luck.

Leave a Comment

This thread has been closed from taking new comments.

Scroll to top