TYPO3 4.3 Multimedia Cookbook

By Dan Osipov
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started

About this book

TYPO3 is one of the world's leading open source content management systems, written in PHP, which can be used to create and customize your web site. Along with text content, you can display high quality images, audio, and video to your site's visitors by using TYPO3. It is essential to manage various types of multimedia files in content management systems for both editors and the users on the frontend of the site.

The book gives you a step-by-step process for organizing an effective multimedia system. It also gives solutions to commonly encountered problems, and offers a variety of tools for dealing with multimedia content. The author's experience in large-scale systems enables him to share his effective solutions to these problems.

If you choose to work through all the recipes from the beginning, you will start by setting up a basic web site set up, aimed at future expansion and scalability. Next, you will cover the basics of digital asset management—a major topic important in all enterprises. You can organize user groups because next you will be creating accounts for users and assigning permissions. Then you will jump into metadata—text information describing the multimedia objects—and learn how it can be manipulated in TYPO3. You will embed multimedia on your site when you have read the various methods for embedding mentioned in this book. Before you finish the book you will learn about some advanced topics, such as external API integrations and process automation.

Publication date:
February 2010
Publisher
Packt
Pages
228
ISBN
9781847198488

 

Chapter 1. Getting Started

Recently, the Internet has shifted from being a provider of mostly textual information to a rich media platform; delivering high quality audio, video, and more. This shift was pioneered by sites such as YouTube, Flickr, Last.fm, Facebook, and others. The availability of broadband and faster connection speeds, throughout the world, has aided this shift. This change has brought new challenges to content providers, as they now need to organize and deliver to the customer not only textual content, but all other forms of media. While textual information can be easily manipulated, multimedia objects are a lot harder to work with.

Traditional Content Management Systems (CMS) have focused on organizing and manipulating textual information, but modern systems have more support for multimedia. In this book, we will discover how to manage various forms of rich media content in TYPO3 one of the world's leading open source CMSs.

In this chapter, we will cover:

  • Setting up a web server on Debian

  • Setting up a multithreaded environment

  • Setting up a web server on Windows

  • Creating a scalable architecture

  • Setting up an NFS share

  • Setting up TYPO3

  • Installing needed extensions

  • Creating a template for a site

 

Introduction


Welcome to this book about the vast world of TYPO3 Multimedia! In this book, we will cover various topics that relate to manipulating multimedia objects in the TYPO3 content management system.

In this chapter, we will lay down some expectations for the rest of the book, and set up the environment that we will use for most of the examples used throughout the book.

Expectations and prerequisites

In order to get the most from this book, there are some expectations of prior knowledge and experience. It is assumed that the reader has a good understanding of TYPO3, which can be achieved by reading the introductory tutorials—Inside TYPO3, TYPO3 Core API, and Modern Template Building guide—essential to understanding how TYPO3 works. Basic TypoScript knowledge is required as well.

We will write several extensions in this book; however, we will omit a lot of the details about extension writing, focusing rather on the specifics of the extension. If you're new to extension development in TYPO3, you should look for resources on the subject on www.typo3.org. TYPO3: Extension Development, Dmitry Dulepov, Packt Publishing is an excellent book that covers all of the prerequisites and much more.

There are multiple ways to achieve anything in TYPO3. The best solution depends on the situation, and generally requires some compromises. This book cannot illustrate the best solution to every problem, but attempts to show various possibilities and approaches to problem solving using practical examples.

Most examples assume you have administrator access to the installation. If you are an editor or a designer, and have a restricted access to the system, you should skip the examples that pertain to developers, or ask your system administrator to provide you appropriate access.

Note on IDE

While all of the examples presented in this book can be completed using standard tools such as a web browser and a text editor, I highly recommend using an Integrated Development Environment (IDE) if you're serious about web development. IDE would save you time, boost your productivity, and provide insight into your application that is simply not possible with standard tools.

There are a variety of PHP IDEs available for various platforms and budgets. Popular products include Komodo IDE, Zend Studio, NetBeans, and Eclipse with PDT plugin. My weapon of choice is NuSphere PhpED, and you may see examples and screenshots throughout the book that make use of the PhpEd platform. The examples can be transposed to the IDE you're using, but this may require looking in the manual or searching online for the detailed description.

 

Setting up a web server on Debian


Before we start anything else, we need to set up a web server. The most common setup for TYPO3 is based on a LAMP stack (Linux, Apache, MySQL, and PHP), although other setups are supported as well. Next, we will install all the components required by TYPO3 on a Debian Linux server.

Note

Paths may vary depending on system and setup options.

Getting ready

Setting up a Debian server is very easy, because all the packages you need are available through APT (Advanced Packaging Tool). Make sure that the package lists are up-to-date by running:

Shell> apt-get update

How to do it...

Issue the following command while logged in as root:

Shell> apt-get install apache2-mpm-prefork libapache2-mod-php5 php5-gd php5-mysql mysql-server-5.0

Note

At the time of writing, the latest stable version of Apache on Debian (Lenny) is 2.2.9, while PHP is 5.2.6, and MySQL is 5.0.51a. These versions meet the requirements of our system, and don't have any known bugs that prevent TYPO3 from working correctly.

How it works...

APT makes software maintenance easy, as all packages can be upgraded or removed through simple commands. You could install the packages from source, but it would make subsequent upgrades difficult. With APT, you can run the following to update the package cache information and upgrade your system:

Shell> apt-get update
Shell> apt-get upgrade

Note

One could also use the short notation of this:

apt-get update && apt-get upgrade

It's highly recommended to do this on a regular basis to apply any security patches. But be careful upgrades could break some functionality!

Note

Make sure you have a backup/failover plan in place before performing any upgrades.

There's more...

We can also install some other components to add additional functionality to our system.

ImageMagick

This line will install ImageMagick on your system.

Shell> apt-get install imagemagick

This installs ImageMagick—a powerful graphic processing program. TYPO3 works with GD and ImageMagick, and you can enable the use of ImageMagick in the Install Tool. As ImageMagick is an external program (unlike GD, which is a PHP extension), it is more efficient and feature-rich when it comes to image processing. Therefore, it's highly recommended that you install and enable it.

An alternative to ImageMagick is GraphicsMagick—a fork of ImageMagick with a more stable API. GraphicsMagick is also more efficient, and performs better than ImageMagick, especially on multi-core processors. No changes to TYPO3 are required to work with GraphicsMagick, and it can be utilized as soon as it is installed by using the following command:

Shell> apt-get install graphicsmagick

To verify that everything is functioning correctly, you can go into TYPO3 Install Tool (available when you install TYPO3 as described in recipe Setting up TYPO3), and select Image Processing to check the configuration, then run some tests, as shown on the following screenshot:

Apache commands

Apache provides a few tools that significantly simplify maintenance tasks. Here are some useful commands:

Shell> a2enmod module_name 
Shell> a2dismod module_name

The first command line (shown above) enables a module while the second command line disables a module (example: mod_rewrite).

Shell> a2ensite site_name 
Shell> a2dissite site_name

The first command line enables a website configuration file while the second command line disables a website configuration file (example: default).

Note

Always put different site configurations in separate files. This way you can be sure that disabling a site configuration will only disable that website, and will not have any adverse effects on the other sites hosted on the server.

Shell> apache2ctl start 
Shell> apache2ctl stop 
Shell> apache2ctl restart

The commands you just saw are used to start, stop, or restart the server respectively. Make sure to restart the server after configuration changes, as they will not take effect (alternatively, you can reload the server).

There are many other resources online to help you set up and optimize the web server. One such resource that also gives some information specific to TYPO3 is http://www.installationwiki.org/Typo3.

See also

  • Setting up a multithreaded environment

  • Creating a scalable architecture

  • Setting up an NFS share

 

Setting up a multithreaded environment


TYPO3 is an enterprise content management system, so it is thread safe—meaning two instances of the script can be executed simultaneously, and they will run in parallel without interfering with each other. Therefore, Apache can be set up with mod_fcgid and PHP processes will be allowed to run in parallel.

Note

This setup is not recommended if you have a server with only one or two core processor.

How to do it...

  1. 1. Install components of the server:

    Shell> apt-get install libapache2-mod-fcgid apache2-mpm-worker php5-cgi Shell> a2enmod actions Shell> a2enmod fcgid
    
  2. 2. Replace contents of /etc/apache2/mods-available/fcgid.conf with:

    <IfModule mod_fcgid.c> AddHandler fcgid-script .fcgi SocketPath /var/lib/apache2/fcgid/sock IPCConnectTimeout 60 IPCCommTimeout 256 BusyTimeout 256 ProcessLifeTime 256 </IfModule>
    
  3. 3. Modify site configuration, by default located in /etc/apache2/sites-available/default

  4. 4. Add the following to the virtual host definition:

    Alias /fcgi-bin/ /var/www/fcgi-bin.d/
    Action php-fcgi /fcgi-bin/php-fcgi-wrapper
    
  5. 5. Add the following lines to the directory definition for /var/www/:

    AddHandler fcgid-script .php
    FCGIWrapper /usr/bin/php-cgi .php
    
  6. 6. While there, modify the Options, adding +ExecCGI. Your final site configuration should look like this:

    <VirtualHost *:80>
    ServerAdmin [email protected]
    Alias /fcgi-bin/ /var/www/fcgi-bin.d/
    Action php-fcgi /fcgi-bin/php-fcgi-wrapper
    DocumentRoot /var/www/
    <Directory /var/www/>
    AddHandler fcgid-script .php
    FCGIWrapper /usr/bin/php-cgi .php
    Options Indexes FollowSymLinks MultiViews +ExecCGI
    AllowOverride None
    Order allow,deny
    allow from all
    </Directory>
    </VirtualHost>
    

    Note

    Refer to the Apache manual for descriptions of some of the options listed above, as well as other configuration options.

  7. 7. Create the executable link to PHP CGI module:

    Shell> mkdir /var/www/fcgi-bin.d Shell> ln s /usr/bin/php5-cgi /var/www/fcgi-bin.d/php-fcgi-wrapper
    

How it works...

apache2-mpm-worker package, downloaded in the first command line call, is designed to run several threads simultaneously. PHP CGI binary is installed in the same statement.

We then enable the fcgid Apache module, and adjust its configuration. Most installations need to increase the timeout; otherwise, you will be looking at an Internal Server Error if the page rendering takes too long. To further complicate the diagnosis, timeouts are not recorded in logs. We increase the values of IPCConnectTimeout, IPCCommTimeout, and BusyTimeout, along with the ProcessLifeTime. Depending on your configuration, you may need to increase these values further.

Now, when a request comes in to Apache, the PHP CGI process will be launched to handle it. With multiple simultaneous requests, multiple processes will be launched, and run parallel to each other, handling individual requests.

Note

If you have multiple clients using this server, they can have separate PHP processes, and not interfere with each other (for security purposes). You can find more information on configuring this set up at http://typo3.org/development/articles/using-php-with-mod-fcgid/.

See also

  • Creating a scalable architecture

  • Setting up an NFS share

 

Setting up a web server on Windows


TYPO3 runs on a Windows server with IIS. This setup is less common, but supported. Most examples in this book assume you're running a Linux server.

If you want a development environment on your local computer running Windows, you can set up WAMP server. It is an all-in-one installer that can set up all the necessary components in minutes. Obviously, it will not be optimized for performance, but it will be enough to start experimenting with TYPO3. Just download the installation package, and run the executable file. It will guide you through the steps needed to complete the installation.

Note

Download WAMP distribution at http://www.wampserver.com/en.

An alternative to WAMP is XAMPP—another package containing Apache, MySQL, PHP, and Perl. Unlike WAMP, XAMPP is not specific to Windows platforms, and could be installed on a Mac, Linux, or Solaris system as well.

Note

Find out more about XAMPP at http://www.apachefriends.org/en/xampp.html.

How to do it...

  1. 1. Go to Control Panel | Add or Remove Programs | Add/Remove Windows Components, and check the box next to Internet Information Services (IIS) as shown in the following screenshot. Have your original installation CD handy, as you will probably be asked for it to complete the installation.

  2. 2. Download the TYPO3 source and dummy package, and extract them into C:\Intepub\wwwroot.

  3. 3. Download the installer binary package from http://php.net, and run it. Select the IIS CGI or Fast CGI module, and make sure that you install the complete package (including extensions).

  4. 4. Restart the web server, and proceed with TYPO3 installation.

How it works...

Windows web environment is powered by Internet Information Services (IIS). This component is available in most Windows systems, but not installed by default. In Step 1, we install this missing component. Once the installation is complete, our server is functional and capable of serving files over the Web.

At this point, if you browse to a PHP file on the server through a browser, you should see the PHP source code. The problem is it is not executing—that is because PHP is not yet installed, and IIS doesn't know how to handle PHP files. We solve this problem in Step 3.

Additional instructions for configuring PHP to run on IIS are available in the PHP manual: http://www.php.net/manual/en/install.windows.php

There's more...

We've just installed the processing side of the application. We can use a DB on another server, or install MySQL.

Installing MySQL database on Windows

MySQL can be installed on Windows very easily. Just download the MSI Installer file and run it. The install wizard will take you through the steps needed to install the database.

TYPO3 can be configured to use other databases besides MySQL, including PostgreSQL, MS SQL, Oracle, and others. This support is provided by DBAL (Database Abstraction Layer) extension, so install it if you intend to use one of these products instead of MySQL.

See also

  • Setting up TYPO3

 

Creating a scalable architecture


In the previous examples, we've installed the database server on the same physical machine as the web server. Although a small website will perform just fine on a single server, larger sites will hit performance bottlenecks caused by limited capacity. A common industry solution to this problem is to place the web server on a different physical server from the database. This allows accommodation of future traffic increases by adding more processing servers.

As mentioned before, TYPO3 is thread-safe, so the processes running on one server will not interfere with processes on the other servers.

How to do it...

Once you have moved your database to a different server, you need to point TYPO3 to the new DB host. If you haven't installed TYPO3 yet, refer to the next recipe. Otherwise, select the Admin Tools | Install module in the TYPO3 backend, or if you don't have access to the backend yet, go to http://example.com/typo3/install/ (replacing example.com with the domain name of your site).

Note

Resolving missing ENABLE_INSTALL_TOOL file error

You may get an error, stating that the Install Tool has been locked due to missing ENABLE_INSTALL_TOOL file. This file is a security precaution, preventing anyone from potentially accessing system settings. If this file is present, it is removed after one hour of inactivity for the same reason. But there are several ways to recreate it. If you're logged in to the backend, the easiest way to create the file is to go to User tools | User settings [admin], and under Admin functions tab, click the button Create Install Tool Enable File:

If you don't have access to the backend, you can create the file manually using the following command line or a file explorer:

Shell> touch /var/www/typo3conf/ENABLE_INSTALL_TOOL

Once you have gained access to the Install Tool, go to Basic configuration, and adjust the database access information.

There's more...

You can now scale horizontally, by adding more processing servers accessing the same database. In this setup, storage becomes a problem. Luckily, most static files needed by TYPO3 are stored in the fileadmin folder that can be mounted from an external resource, such as Network Attached Storage (NAS). See the next recipe Setting up an NFS share to see how this can be accomplished.

We have now arrived at a highly scalable set up. Should the traffic to the application increase, extra nodes—either web servers or database servers—can be added. This also allows for failover in case of hardware or software failure. These setups are more complex and are outside the scope of this book.

See also

  • Setting up an NFS share

 

Setting up an NFS share


In the Creating a scalable architecture recipe, we arrived at a server architecture to support a website. That architecture required a separate storage, linked to processing servers over the network. In this recipe, we will cover how you could set up such NAS on a Debian Linux server with no special hardware.

How to do it...

  1. 1. Run the following command to install all the required components for Network File System (NFS) sharing:

    Shell> apt-get install nfs-kernel-server nfs-common portmap
    
  2. 2. Edit /etc/exports file, and add the following line:

    /var/www/fileadmin 10.0.0.0/24(rw)
    
  3. 3. Run the following command to make the changes effective:

    Shell> exportfs -a
    
    

How it works...

You can fine tune the line in /etc/exports to fit your needs. Pay particular attention to access if you want your files to be secure. You could list individual servers as a comma-separated list, and give them explicit permissions to the shared folder.

The folder fileadmin will now be shared by other computers on the network, and could be accessed by several web servers in our scalable architecture. Changes to the TYPO3 code—such as installing extensions or changing configuration values—will still need to be done independently on each server, but all media files can be stored on the NFS share.

There's more...

In the following section we will see how we can mount a Network File System.

Mounting an NFS

You need to install similar tools—nfs-kernel-server, nfs-common, portmap—to mount the network file system correctly. Run the following command as a root user:

Shell> apt-get install nfs-common

After that, mount the shared folder on a different server with the following command:

Shell> mount -t nfs hostname:/nfs_folder /var/www/fileadmin

See also

  • Creating a scalable architecture

 

Setting up TYPO3


We now have a web server running; so, we can install TYPO3.

How to do it...

  1. 1. Download the latest stable release, and a dummy package from http://typo3.org.

  2. 2. Read INSTALL.txt.

  3. 3. Extract all files to /var/www.

    Note

    To ease upgrades in the future, or to run several TYPO3-driven sites from the same code base, you should extract the TYPO3 source package into a separate directory from the dummy package. For example, you could create a directory src under /var/www, and create a folder for each version of TYPO3 that you plan on using. Also, under /var/www, create a folder for each site you want to have on this server, and extract the dummy package into each folder. Next, create symbolic links for folders misc, t3lib, and typo3 in the site folders, linking to the source package.

    • misc:

      ln -s /var/www/src/typo3-4.3.0/misc /var/www/mysite/misc
      
    • t3lib:

      ln -s /var/www/src/typo3-4.3.0/t3lib /var/www/mysite/t3lib
      
    • typo3:

      ln -s /var/www/src/typo3-4.3.0/typo3 /var/www/mysite/typo3
      

    When a new version is released, simply create a new folder for it, and change the links. If you realize that the new version is incompatible, you can quickly restore links to the old version.

  4. 4. Launch 1-2-3 installer. If you have a fresh new installation, simply go to http://example.com/typo3/index.php, and it will redirect you to the installer.

  5. 5. Enter your database information in Step 1. If you installed the database on the same host as the web server, enter localhost under address.

  6. 6. In Step 2, select an empty database where you would like the TYPO3 data to be stored, or create a new database. Make sure the database you choose to use is empty.

  7. 7. In the final step, TYPO3 will import the default data schema and records it needs to operate. You should now be able to log in to the TYPO3 backend.

    Note

    If the backend user account has not been created, you can access the Install Tool, and go to Database Analyzer to create the new backend user account.

How it works...

There are several ways to download the latest version of TYPO3 source and the dummy package. The best way to access both is to go to http://typo3.org/ and click on Download. The source package contains all the TYPO3 core files needed for the system, while the dummy package helps create the needed directories and files specifically for your site.

Before you proceed with uploading the files to the web server, you must read the instructions in INSTALL.txt. Installation instructions change often and there may be components of the web server that are required in the future. Installation documentation covers all the nuances of installing the specific version you have just downloaded.

There's more...

After you have finished installing, explore the Install Tool fully, as it contains a full array of options you need to configure your system. Go to http://example.com/typo3/install to launch the Install Tool (replacing example.com with the domain name of your site).

  • Basic Configuration runs a basic check of file permissions and server settings, and will report if there are any problems. Make sure to go through any issues, as they're likely to impact operations. You can also change database information here.

  • Database Analyzer will check the integrity of your database schema. Click COMPARE under Update required tables to see if the database needs to be upgraded. Make sure that you do this after every TYPO3 source or extension upgrade. You can also delete all data, or import it again.

  • Update Wizard should be used when you upgrade your TYPO3 source version—for example from 4.3 to 4.4.

  • Image Processing will run a series of tests to check the ImageMagick, GD, or GraphicsMagick configuration.

  • All Configuration gives an overview of all the system configuration variables available in the system. Go through all the options, and adjust the value to fit your system.

  • typo3temp/ gives statistics and lets you perform operations on temporary files created by TYPO3.

  • Clean up database lets you clear cached image sizes.

  • phpinfo() gives a standard PHP status report.

  • Edit files in typo3conf/ allows some basic edit operations on files in the typo3conf directory.

  • About gives some general information about the use of the script, in greater detail than just described.

There is an excellent installation guide available from http://dmitry-dulepov.com/e-books/typo3-installation-and-upgrade.html. It covers setup instructions, as well as steps that need to be taken to optimize and secure the new installation.

See also

  • Installing needed extensions

  • Creating a template for a site

 

Installing needed extensions


Most of the power of TYPO3 comes from extensions. In fact, much of the system you have just installed is powered by extensions—these come packaged with the source, and are called system extensions, or simply sysext. You can find them under the typo3/sysext folder. These extensions have been deemed necessary for most installations, and many come preloaded by default. There are more extensions available through the TYPO3 Extension Repository (TER), and they can be installed as local extensions, and will reside under the typo3conf/ext folder. You can get a complete list at http://typo3.org/extensions.

As we will be dealing a lot with multimedia, we should install the Digital Asset Manager (DAM) extension. Its extension key is dam. While you can run a website without it perfectly well, a lot of the information provided in subsequent chapters will assume that you have a lot of media objects, and need an efficient way of organizing them. DAM is designed to do just that.

There are several ways to install extensions in TYPO3. Next, we will cover how you can install extensions using the Extension Manager—which is the simplest way to install extensions. For other possibilities, refer to the There's more... section further ahead. You may choose different options depending on the situation, so you should be familiar with all methods.

How to do it...

  1. 1. Go to Admin Tools | Extension Manager.

    Note

    If you've just installed the system, the Extension Manager is not configured for automatic extension retrieval. If it is already set up, skip to Step 7.

  2. 2. In the top-most selection box, choose Settings to go to the settings submodule.

    Note

    Terminology

    A quick note about terminology: All options in the left frame of the backend menu are called modules. Some modules may have submodules—those are usually available in selection boxes at the top of the content frame. Refer to TYPO3 official documentation for an overview of the structure of the backend.

  3. 3. Under Security Settings, check the box if you want access to extensions that have not been reviewed. If you leave the box unchecked, and are unable to find some mentioned extensions, this would probably be the reason.

  4. 4. If you plan on uploading extensions to TER, then under User Settings, enter your TYPO3 account information. You can sign up for a free account at http://typo3.org.

  5. 5. Under Mirror list, select the mirror that is closest to you, or leave the recommended setting of random.

  6. 6. Scroll to the bottom and click Update to save your changes.

  7. 7. Go back to the submodule selector and choose Import Extensions.

  8. 8. In the List or look up all extensions box, type in dam.

  9. 9. In the list that appears, choose the Media (DAM) extension, and choose the Import button.

  10. 10. You will be notified of any Dependency Error that you can ignore or resolve.

    The Extension Manager will perform all the necessary database updates.

There's more...

In the following section we will cover other methods of importing extensions from T3X files and code repositories.

Importing T3X files

Extensions are distributed and can be downloaded as files with T3X extension. You can download the files through the TER. Once you have the file, it can be imported through the Import Extensions submodule of the extension manager. The rest of the steps are the same as above.

Checking out unstable extensions

In between stable releases, unstable versions can be exported from repositories. These versions contain bug fixes and new features, but may not be fully tested, and therefore contain some problems. Here is how the latest revision of DAM can be checked out from the repository. Create a new folder under typo3conf/ext/dam, and in it, run the following command:

Shell > svn co https://svn.typo3.org/TYPO3v4/Extensions/dam/dam/trunk

Note

This command assumes you have Subversion installed. If you don't, you will get an error. Subversion client can be installed through APT:

Shell> apt-get install subversion

If you're using Windows, you can use Tortoise SVN that is a graphical interface to the Subversion client. It integrates seamlessly into Windows Explorer and most commands can be accessed through right-click context menu. Go to http://tortoisesvn.net/ to find out more about Tortoise SVN.

The rest of the steps for installation are the same as above.

 

Creating a template for a site


Our goal is to have a website for people to visit, and as such that website needs a frontend template where content will be displayed (TYPO3 can be used for other applications as well).

Getting ready

We will create a very basic template, which will allow us to see the results of the work in TYPO3 on the page. On a real project, you will probably be given a template by a designer.

Make sure to create a template directory under fileadmin, and create a file mainTemplate.html with the following contents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site template</title>
</head>
<body>
<!-- ###DOCUMENT_BODY### begin -->
<div id="container">
<div id="leftContent">
<!-- ###LEFT_COLUMN### -->
Left Column Content
<!-- ###LEFT_COLUMN### -->
</div>
<div id="centerContent">
<!-- ###CENTER_COLUMN### -->
Center Column Content
<!-- ###CENTER_COLUMN### -->
</div>
<div id="rightContent">
<!-- ###RIGHT_COLUMN### -->
Right Column Content
<!-- ###RIGHT_COLUMN### -->
</div>
<div id="borderContent">
<!-- ###BORDER_COLUMN### -->
Border Column Content
<!-- ###BORDER_COLUMN### -->
</div>
</div>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>

Also, create a new CSS file in the same directory, called mainStyle.css with the following content:

#container {
width: 100%;
height: 100%;
}
#leftContent {
float: left;
width: 200px;
display: inline;
}
#centerContent {
float: left;
width: 500px;
display: inline;
}
#rightContent {
float: right;
width: 200px;
}
#borderContent {
float: right;
width: 200px;
}

Note

Case Sensitivity

Make sure you follow case sensitivity, as TypoScript code is case sensitive, and it doesn't see mainStyle.css as the same as mainstyle.css.

Come up with a convention for yourself. If you know all your names, follow camelCase, you will save yourself a lot of double checking and headaches when something doesn't work.

How to do it...

  1. 1. In the Template module, browse to the page you would like to be the root of the site. Create a new root template.

  2. 2. In the Includes tab, include the styles.content (default) static template.

    Note

    Any page can be the root of a new site, even if it's within an already defined page tree structure. By default, templates propagate through the tree, but a new template record can be set as root:

  3. 3. In the setup field, add the following code:

    page = PAGE page.typeNum = 0 page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/templates/mainTemplate.html
    workOnSubpart = DOCUMENT_BODY subparts.LEFT_COLUMN < styles.content.getLeft subparts.RIGHT_COLUMN < styles.content.getRight subparts.BORDER_COLUMN < styles.content.getBorder subparts.CENTER_COLUMN < styles.content.get } page.includeCSS.mainStyle = fileadmin/templates/mainStyle.css
    

How it works...

There is a lot that happens in just a few lines. Let's refresh your TypoScript knowledge.

page=PAGE creates a new top-level page object, and page.typeNum=0 assigns a page type of 0 that is the default. So, when you go to the page with no type argument, this page object will be used.

Note

Other type numbers can be used to display content in a different form. For example, different type value can render a page for mobile device, for print, or even as XML for external applications, such as RSS feeds.

In the earlier code, page.10=TEMPLATE defines a content object at position 10 in the content object array. When the page is rendered, the content objects are each rendered in numerical order. Page.10 is defined as a TEMPLATE content object, so it will take an HTML template file, and process it. Lines template=FILE and template.file=fileadmin/templates/mainTemplate.html define the location of the template file that will be loaded. workOnSubpart=DOCUMENT_BODY tells the page object to use the DOCUMENT_BODY subpart section of the template.

At this time, the template file will be loaded and output as it is. However, the following lines replace the respective subparts with output from each column:

page.10 { subparts.LEFT_COLUMN < styles.content.getLeft subparts.RIGHT_COLUMN < styles.content.getRight subparts.BORDER_COLUMN < styles.content.getBorder subparts.CENTER_COLUMN < styles.content.get }

This is possible because we included the styles.content static template.

What will happen now is TYPO3 will get a list of all content elements in each column, and render them, that is, it will convert content into HTML. It will then place the resulting HTML code in place of the subparts.

The design in mainTemplate.html is very simple—just HTML. We want to apply some styling to that structure. Line page.includeCSS.mainStyle=fileadmin/templates/mainStyle.css includes our CSS file, which does just that.

There's more...

For more information about templates, you should read a detailed guide to templating in TYPO3: http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/ (Modern Template Building). We will briefly go through a few more features.

Markers vs. Subparts

In the mainTemplate.html file, we have used four subparts. This lets us preview the file, and see exactly where the content will go once it is rendered. Subparts are defined by a unique marker, enclosed in HTML comment tags, and surrounding some text, as in:

<div><!-- ###TEMPLATE_SUBPART### --> Code that will be replaced <!-- ###TEMPLATE_SUBPART### --></div>

Sometimes, you just want content to be inserted into a specific point, in such a case, you can use a marker. A marker is similar to a subpart, but exists by itself and doesn't reside in an HTML comment:

<div>###TEMPLATE_MARKER###</div>

Subparts are also used by extensions, where the subparts contain markers. This may not be clear at this point, but after working with a few templates you will grasp the difference.

Including JavaScript

To include JavaScript files, add the following lines to TypoScript:

page.includeJS.someCode = fileadmin/templates/someCode.js

See TypoScript Reference (TSref) for more options: http://typo3.org/documentation/document-library/references/doc_core_tsref/current/

About the Author

  • Dan Osipov

    Dan Osipov has worked with TYPO3 CMS for over two years on a full time basis. He created the system architecture used to power high-traffic, dynamic news sites, where emphasis is placed on multimedia and relevancy. He is also a member of Digital Asset Management team, focused on development of the DAM extension for TYPO3.

    Browse publications by this author
Book Title
Access this book, plus 7,500 other titles for FREE
Access now