Mastering TypoScript

2 comments | Posted: 30 April 07 in Books, by Nathan Smith

Mastering TypoScript Few systems, retail or open source, are as powerful as TYPO3. More than just a typical CMS, it is a complete web application framework. Part of what makes it so popular is the extensibility, allowing developers to create additional functionality. However, TYPO3 is not without its drawbacks. It has a notoriously difficult learning curve, and the admin area leaves quite a bit to be desired as far as usability. TYPO3 has taken off in Europe, winning multiple awards. In the USA though, it has yet to gain a foot-hold.

That is, except for the Web Empowered Church, which uses TYPO3 as the CMS and framework of choice for building church websites. My two latest freelance clients have been two churches with thousands of attendees each week. Each of them makes use of the WEC extensions written for TYPO3, via TypoScript.

So, now that we have a background on what TypoScript is exactly, let’s talk about the book Mastering TypoScript. It was written by Daniel Koch, then translated from the original German version to English by Wolfgang Spegg. It presupposes familiarity with TYPO3 and PHP, delving right away into the guts of the system. Here’s what I gleaned from the book…

Syntax

The first chapter begins with an introduction of TypoScript which, true to the similarity in name, is somewhat reminiscent of JavaScript. The way that variables and properties are defined looks a bit like JS dot notation and object literal declaration. By way of comparison, here is how JavaScript and TypoScript might look if constructing an object named mustang.

JavaScript – dot notation:

// Create empty object: "mustang"
// and then add properties to it.

var mustang              = {};
    mustang.manufacturer = 'Ford';
    mustang.build        = 'American';
    mustang.category     = 'sport';
    mustang.doors        = 2;
    mustang.passengers   = 4;

JavaScript – object literal:

var mustang = {
  'manufacturer' = 'Ford';
  'build'        = 'American';
  'category'     = 'sport';
  'doors'        = 2;
  'passengers'   = 4;
};

TypoScript – dot notation:

mustang                    = CAR
mustang.manufacturer       = TEXT
mustang.manufacturer.value = Ford
mustang.build              = TEXT
mustang.build.value        = American
mustang.category           = TEXT
mustang.category.value     = sport
mustang.model              = TEXT
mustang.doors              = 2
mustang.passengers         = 4

TypoScript – object literal:

mustang              = CAR
mustang {
  manufacturer       = TEXT
  manufacturer.value = Ford
  build              = TEXT
  build.value        = American
  category           = TEXT
  category.value     = sport
  model              = TEXT
  doors              = 2
  passengers         = 4
}

As you can see from the above examples, while the syntax is similar, TypoScript is a bit more verbose. It requires specifically describing a values as either TEXT or HTML in order for TYPO3 to handle the values correctly. Values not declared as any type will default to being treated as a number.

With JavaScript, simply enclosing a value in single or double quotes is enough. Numbers which are not contained in quotes are considered numeric values in JavaScript. Additionally, performing math on a number stored as a text will convert it to a number, such as multiplying it by 1.

Rich Text Editor

TYPO3 allows you to control a number of HTML related properties, which arguably should never be handled in markup anyways. These include:

This list of discrepancies simply points to aspects of TYPO3 which arose in its formative stages, and remain for legacy support. Any self-respecting web developer knows that purely presentation aspects like those should be left to CSS alone, and should never be embedded in HTML.

Luckily, you can also restrict tools which can be used by content writers. Doing so simply requires specifying an allowTags array. You can conveniently omit deprecated presentational tags, to keep them from being used at all. This way, you pare down some of TYPO3’s power, lest it be wielded haphazardly.

Templating

Another interesting thing about TYPO3 is the concept of markers. These are a bit like variables which allow you to plant dynamic content within the skeleton of an HTML document. For instance, if I wanted to have the top-level heading on a page change, I would denote it in the design template like so…

<h1>###TITLE_OF_NEWS_STORY###</h1>

There is also another method of templating on the horizon, called TemplaVoilà. It makes it possible for TypoScript developers to integrate templates using a visual interface, never having to touch any PHP. I am usually leery of GUI tools because the code the create typically isn’t what I’m trying to accomplish on a granular level. However, from what I’ve heard from TYPO3 gurus, this is not actually creating HTML for you, simply allowing you to map dynamic content to areas of your static page skeleton. See the TYPO3 wiki for more on that.

Graphics

TYPO3 can also handle graphics processing on the server. This requires two PHP libraries to be installed. The first is GDLib, typically enabled in most PHP configurations. The second is ImageMagick, which is great for scaling images to create photo thumbnails. These yield a dizzing array of possible visual effects: adjusting image tone, crop, rotate, invert colors, emboss, scale, shadow, outline – to name a few. These should of course be used sparingly.

Forms

TYPO3 also has a form builder, allowing the admin to create complete forms without necessarily having to know HTML. Mandatory fields can be set for things like sign-up forms, where the user must enter a minimum amount of personal information in order to register for an event. You can also create login forms for certain sections of a site. This would be good for a personnel directory, which you’d not want publicly viewable due to email spam and telemarketers.

Extensions

Chapter 11 covers extensions. There are a few examples given, such as a chat room extension and newsletter extension. It then goes on to explain how you would go about writing your own extension, if you needed additional functionality not covered by existing options.

i18n

Chapter 13 is all about how to use TYPO3 in a multilingual environment. Entire sites can be configured to be auto-translated into different languages. While I’m sure these site versions aren’t 100% accurate (nothing automated is), it would certainly go a long way to appealing to a broader audience. It supports an impressive number of languages, with the current count at over 30.

Summary

TYPO3 has tremendous breadth and depth, but is not exactly the most user friendly CMS. The fact that there is an entire configuration language dedicated to it makes the learning curve a bit intimidating for newcomers. Additionally, the drabness of the administrative interface is a bit of a turn-off.

However, for the amount of power in customization that it offers, you’d be hard pressed to find another option that runs on PHP. Django is similar in complexity and flexibility, but it’s written in Python. Bottom line, if you find yourself working with TYPO3, I’d highly recommend Mastering TypoScript.

Discuss This Topic

  1. 1 richards

    I was very interested in Typo3 due to the simple fact that the original developer is a Christian and has made it known throughout the code.

    That aside I haven’t looked at it for quiet some time, but 3-4 years ago, boy howdy was it a rough and painful project. I’m glad to see there is a book and more documentation. Maybe I’ll give it a whirl again sometime soon.

     
  2. 2 Nathan Smith

    Richards: TYPO3 certainly has its challenges. It has a lot of legacy problems with many of its extensions – mixed markup and presentation, etc. The admin interface is a bit difficult to get used to. Still, people have done some pretty cool stuff with it. Just have to get past the initial learning curve, I suppose.

     

Comments closed after 2 weeks.