Manual for Contao 3.5

Table of Contents

Table of contents

Introduction 1.1 Installation 1.2 Installing Contao 1.2.1 Using the Safe Mode Hack 1.2.2 Manual update 1.2.3 Live Update Service 1.2.4 Moving an installation 1.2.5 Configuring the live server 1.2.6 Administration area 1.3 Listing records 1.3.1 Editing records 1.3.2 Keyboard shortcuts 1.3.3 Managing pages 1.4 Components 1.4.1 Themes 1.4.2 Style sheets 1.4.3 Modules 1.4.4 Page layouts 1.4.5 Page types 1.4.6 Managing content 1.5 Articles 1.5.1 News items 1.5.2 Events 1.5.3 RSS/Atom feed 1.5.4 Newsletters 1.5.5

Forms 1.5.6

Comments 1.5.7 Templates 1.5.8

Markdown 1.5.9

Insert tags 1.5.10 System administration 1.6

Users and groups 1.6.1 Extensions 1.6.2

Maintenance 1.6.3

1 2 Introduction

Manual for Contao 3.5

This is the official manual for users and developers. You can always find the latest version on docs.contao.org.

Licence

The Contao documentation is licensed under a Creative Commons Attribution 3.0 License license (CC BY-NC-SA 3.0). If you want to redistribute a modified or unmodified version of the documentation, you can do so under the license terms.

If you contribute to the documentation, e.g. by creating pull requests, you grant us full usage rights of any content you create or upload. You also ensure that your content does not violate any third-party rights.

We are not claiming exclusive usage rights, therefore you are free to use your contributed content (e.g. texts or images) in any other project as well.

3 Installation

Installation

The following chapters explain how to install and update Contao. You will learn how to use the Contao install tool, how to synchronize an existing installation via FTP, how to set up the Safe Mode Hack and how to configure a live server for Contao.

4 Installing Contao

Installing Contao

First of all, download the latest Contao archive and extract it on your local computer. Move the files into the htdocs folder of your local installation (e.g. XAMPP) or upload them to your server with an FTP program (we recommend using WinSCP). Make sure to upload the hidden .htaccess.default file and replace its name with .htaccess . Depending on your server configuration, the public folder is most likely called htdocs , httpdocs , html or public_html .

If you have SSH access to your server, you can download and extract the archive directly on the command line, e.g. with curl . Depending on the version you want to install, adjust the URLs as described.

Latest version of Contao (4.x):

curl -L http://download.contao.org | tar -xzp

LTS version of Contao (3.5):

curl -L http://download.contao.org/lts | tar -xzp

A specific version (e.g. 3.5.2):

curl -L http://download.contao.org/3.5.2 | tar -xzp

The Contao install tool

To open the Contao install tool, simply add /contao/install.php to the URL of your Contao installation. Note that the install tool is protected against brute force attacks and will be locked if a wrong password has been entered three times in a row. To remove the lock, open file system/config/localconfig.php in a text editor, find the following line and set it to 0 .

$GLOBALS['TL_CONFIG']['installCount'] = 0; // This will remove the automatic lock

Connecting to the database

Log into your server administration panel (e.g. "Plesk" or "cPanel") and create a new database for Contao. Then enter the login credentials in the Contao install tool. Note that the Contao default character set UTF-8 is written as UTF8 in MySQL!

Updating the database tables

Once you are connected to the database, Contao automatically checks its tables and displays a list of recommended changes in case they are not up to date. Make sure to read those recommendations carefully, because Contao only knows its own tables and will try to remove those of other applications eventually sharing the database. Confirm the changes and click the "Update database" button.

Importing a template

A template is a predetermined website with an exemplary page structure and different style-sheets to format the Contao core modules and content elements.

Since version 3.2.11, the sample web-page is no longer included in the download package. Depending on the version used, the new Contao Official Demo or the old Music Academy can be installed as an extension. Information on compatibility is available in the extension repository.

5 Installing Contao

How to install the demo:

1. Create a new Contao installation with admin account 2. Log in as admin to the back end 3. Install the matching extension using the extension repository 4. Log out of the back end 5. Open the install tool again

To import a template, select the entry from the drop-down menu and click the "Import template" button.

Danger

When importing a template, existing data will be replaced!

Creating an admin user

If you did not import a template, you have to create an admin user to log into the Contao back end. After you have created the account, the installation process is completed. The link in the lower right corner will take you to the administration area. If you have imported the example website, you can login as user "k.jones" with the password "kevinjones".

Installing the Contao Demo

See How to install the demo in the section Importing a template above.

Using search engine friendly URLs

If you are running an Apache server and are allowed to use mod_rewrite, you can make Contao generate search engine friendly URLs that look like static HTML documents. A set of default rewrite rules is stored in the .htaccess.default file in the Contao directory. Rename this file to .htaccess so the Apache server can handle it and then log into the back end and navigate to the system settings. Select "Rewrite URLs" in the "Front end configuration" section and save your changes. Now Contao generates static URLs like home.html instead of index.php?id=12 .

6 Using the Safe Mode Hack

Using the Safe Mode Hack

While trying to install Contao with the install tool, you might have seen a warning that the local configuration file is not writable.

File permission issues

The term "Safe Mode Hack" is actually misleading, because it implies that the problem was caused by the PHP safe_mode . However, it is caused by insufficient file permissions and can occur even if safe_mode is disabled, so it should be called "File Permission Hack" instead. PHP as an Apache module is typically run as wwwrun , www-data or nobody , whereas the files that you upload via FTP belong to you (e.g. web4 or ab5678 ). The server therefore denies the PHP script Contao access to those files.

Using FTP for file operations

To work around the permission problem, Contao establishes an FTP connection to modify files and folders. All you have to do is to enter your FTP login details. Take special care when entering the relative path from your FTP root directory to the Contao folder (e.g. html/ , public_html/ or httpdocs/ ).

A few directories still require write permissions, because PHP will access them directly:

assets/images

assets/images/*

system/logs

system/tmp

7 Using the Safe Mode Hack

The permissions (CHMOD 777) are set by the install tool automatically and do not have to be adjusted manually normally. Should it be necessary, please only adjust the three directories mentioned above – despite what you might have read in a tutorial or in the Contao forums!

8 Manual update

Manual update

When it comes to manually updating a Contao installation, you can either upload the whole Contao download archive to the server (replacing files) or you can upload only the files that have been modified since the last update (synchronizing files). Either way, you should always back up the following files and folders - just in case there is an error or you accidentally override them:

files/*

system/config/dcaconfig.php

system/config/initconfig.php

system/config/langconfig.php

system/config/localconfig.php

system/config/pathconfig.php

templates/*

This will back up your local configuration, your custom templates and your files.

Replacing files

Replacing the files of a Contao installation is pretty simple. Just unpack the Contao download archive on the server or extract it on your local computer and upload the files with an FTP client. Then restore the files that you have backed up and remove potential leftovers from earlier Contao versions.

Attention: If you have installed any third-party extensions, make sure to backup and restore them, too, or do not overwrite them at all. Otherwise you will have to reinstall the modules and depending on the extension you might eventually lose data!

If you use the Composer client to manage your extensions, you also have to backup the folder /composer in the root directory.

Synchronizing files

To synchronize a Contao installation, you can either use the Unix diff utility or an FTP program. Unix utilities are typically used by server administrators only, so they will not be explained here. To synchronize files via FTP, open WinSCP and connect to the server. Backup the files mentioned above and then navigate to the Contao directory and click the "Synchronize files" button.

9 Manual update

Review the options carefully and make sure to choose "Preview changes", so you can check which files will be updated. Then confirm each file in the preview window and double check the files that are marked for deletion! Click "OK" to start the synchronization process.

Updating the database

After you have updated the Contao files, you need to update the database, too. Fortunately, the Contao install tool will do most of the work for you. Just open it and enter your password, then scroll down to the database section and confirm the changes.

Purge the internal cache

Finally you should also rebuild the internal cache (for DCA and language files). In the backend go to "Maintenance" and check "Purge the internal cache" in the "Purge data" section. Confirm the action by clicking on "Purge data".

You will now receive a message in the header asking to rebuild the internal cache. Click on "Build the cache" to cache the internal files.

10 Live Update Service

Live Update Service

The Contao Live Update Service is a commercial Contao add-on provided by iNet Robots, the company of the Contao founder and core developer, Leo Feyer. It allows you to update your installation with a only few clicks in the back end, without having to download a Contao archive or using an FTP program to replace or synchronize files.

The Live Update includes the following features:

Arbitrary up- and downgrades to any Contao version Automatic database backup before the update Individual validation and completion of the Contao installation Comparison of the customized templates and the original files

Version selection

Template differences

11 Live Update Service

Troubleshooting

99% of all Live Update issues are caused by wrong file permissions. Contao requires write permissions to manage files and folders, therefore if the Live Update does not work properly, check your server configuration and make sure to set up the Safe Mode Hack as described in this user guide!

Note

If you are having problems activating your Live Update ID or receiving the update archive, please contact the iNet Robots support. If you are having problems configuring the Safe Mode Hack or using Contao, please choose a support option on the support page.

12 Moving an installation

Moving an installation

Moving a Contao installation from a local server to a live server is not much different from installing a fresh Contao version, except that you are using the files from your local installation instead of the Contao download archive and an SQL dump of your local database.

Uploading the files

Open your FTP program, connect to the target server and upload all files from your local Contao installation.

Exporting the database

The easiest way to create a MySQL dump is to use the database administration tool "phpMyAdmin". If you are a server administrator, you can also use the mysqldump utility of course. Log into "phpMyAdmin", choose the database that you want to export and click the "Export" tab in the top menu. It is important to adjust the export settings according to the screenshot below to minimize MySQL version compatibility problems.

Importing the database

Open "phpMyAdmin" on the target server and create a new database for Contao. Depending on the server configuration, you probably have to use the server administration panel (e.g. "Plesk" or "cPanel") to create new databases. Select the empty database and click the "Import" tab in the top menu. Then upload the SQL dump of your local database and start the import.

13 Moving an installation

Adjusting the database configuration

Finally open the Contao install tool of the new installation (the password should be the same as for your local installation) and adjust the database configuration if necessary. Then go to the back end and log in with your username and password.

14 Configuring the live server

Configuring the live server

This chapter is not about configuring a server in terms of installing Apache or compiling PHP, which you cannot do on a shared hosting account anyway. It explains how to check whether the Contao system requirements are met and how to enable PHP 5.

Contao system requirements

Contao requires a webserver like Apache or IIS with PHP and MySQL support.

Software Version (min.)

PHP 5.4.0

MySQL 5.0.3

You also need several PHP extensions to get the full functionality.

PHP extension for mandatory

GDlib image resizing yes

DOM XML files yes

SOAP Extension Repository no

Phar Live Update no

mbstring multi-byte character handling no

mcrypt data encryption no

Note

Depending on your installed extensions, it may be necessary to increase the PHP variable max_input_vars (e.g. 2000 or higher). Otherwise long back end forms cannot be submitted completely.

Contao has been tested successfully with all major browsers like Firefox or Internet Explorer (from version 9).

The Contao check

Download the Contao Check to find out whether your server meets the Contao system requirements. The script will check whether you can use the Extension Repository and the Live Update and whether you have to use the Safe Mode Hack or not. Depending on your system configuration, you can set up a new Contao installation with the web installer or validate an existing installation.

15 Configuring the live server

Extract the Zip file, upload the check folder to your Contao installation directory and open it in a web browser.

Download the Contao Check | Open the GitHub project

ISP-specific settings

There are a few major Internet Service Providers that require a little extra configuration to get Contao to work. Fortunately, they are just the exception from the rule. The ISP-specific settings are described in the Contao forum. If you are looking for hassle-free Contao hosting, check out the list of Contao hosting partners.

16 Administration area

Administration area

To access the Contao administration area (back end) simply add /contao to the URL of your Contao website.

Note

The back end login is protected against brute force attacks, so if you enter a wrong password more than three times in a row, your account will be locked for 5 minutes. Please note that usernames and passwords are case-sensitive.

17 Listing records

Listing records

The Contao core engine supports three views: a simple list ("list view"), a list that is grouped by its parent table ("parent view") and a hierarchical list ("tree view"). These three views can be used to list the records of any table or related tables.

List view

The "list view" lists the records of a single table in a particular order. The results are usually grouped by their first letter.

Parent view

The "parent view" lists the records of a child table that are related to a particular record of a parent table. Parent-child relations are used a lot in Contao, e.g. for articles and content elements, news archives and news articles or style sheets and format definitions.

18 Listing records

Tree view

The "tree view" lists records and other resources like files and folders that are organized in a hierarchical structure. Contao supports listing single hierarchical tables (e.g. the site structure) as well as child tables that relate to hierarchical parent tables (e.g. articles and pages).

Sorting and filtering data

Contao supports various ways to refine results so you do not lose track even if a table has several thousands of rows. A lot of listings can be filtered by one or more fields so they only show the records matching the filter criteria. Most listings additionally offer a full text search that even supports regular expressions. To keep the page loading time down to a minimum, Contao only shows 30 records at a time.

19 Listing records

20 Editing records

Editing records

Editing data is one of the central functions of a Content Management System. Contao offers a lot of professional features that make the editing process as easy and comfortable as possible. You can revert back to earlier versions of a record, restore deleted records, move records via clipboard and even edit multiple records at once. Most of these functions can be accessed using the navigation icons.

List view icons

The "list view" being the simplest view only offers the four basic actions: edit, duplicate, delete and show.

Parent view icons

The "parent view" offers two additional navigation icons to control the order of the records. The order can also be changed via drag and drop. To do so, simply click on the navigation icon "Drag and drop" and drag it to its new position.

21 Editing records

Tree view icons

The "tree view" requires additional icons to handle the hierarchical structure. Besides duplicating a single record, it also supports duplicating a record with all its sub-records as well as pasting it after or into another record, so you can create a nested structure.

22 Editing records

Restoring prior versions

Contao automatically creates new versions of a record every time you save it. As soon as there is more than one version, a drop- down menu which allows you to revert back to a prior version appears at the top of the form. Simply choose a version and click the "Restore" button.

The icon to the right of the "Restore" button allows you to see the differences between two versions.

Editing multiple records

The ability to edit more than one record at a time clearly makes Contao stand out from the variety of content management systems. Click the "Edit multiple" button to switch the editing mode, then select one or more records and choose the fields that you want to modify.

23 Editing records

24 Editing records

25 Keyboard shortcuts

Keyboard shortcuts

To speed up the workflow when working with Contao, there are several back end shortcuts which allow you to execute certain commands. You can e.g. trigger the "save" button at the end of a form by clicking it with your mouse or by using the keyboard shortcut [Alt]+[s] .

General keyboard shortcuts

Shortcut Button Explanation

[Alt]+[h] Home Go to the home page of the back end.

[Alt]+[q] Quit Quit the current back end session (log out).

[Alt]+[t] Top Go to the top of the page.

[Alt]+[b] Back Go back to the previous page.

[Alt]+[n] New record Create a new record.

[Alt]+[e] Edit multiple Switch to the "edit multiple" mode.

[Alt]+[f] Front end preview Open the front end preview in a new browser window.

Keyboard shortcuts in edit mode

Shortcut Button Explanation

[Alt]+ [s] Save Saves the current form.

[Alt]+ Save and Saves the current form and redirects to the previous page. [c] close

[Alt]+ Save and go Saves the current form and redirects to the parent page, e.g. from a content element to [g] back the article tree.

[Alt]+ Saves the current form and redirects to the child records view, e.g. when creating style Save and edit [e] sheets.

[Alt]+ [n] Save and new Saves the current form and creates a new record.

Keyboard shortcuts in "edit multiple" mode

Shortcut Button Explanation

[Alt]+ [d] Delete multiple Deletes all selected records in "edit multiple" mode.

[Alt]+ [x] Cut multiple Moves all selected records in "edit multiple" mode.

[Alt]+ [c] Copy multiple Duplicates all selected records in "edit multiple" mode.

[Alt]+ [v] Override multiple Overrides all selected records in "edit multiple" mode.

[Shift] Select several check Selects several check boxes by holding down the shift key in "edit multiple" boxes mode.

26 Keyboard shortcuts

The keyboard shortcuts above only work on Windows in this form. Mac users have to use [Ctrl]+[⌥ Opt] instead of the [Alt] key together with the keyboard shortcut. In addition, Firefox on Windows deviates from the standard: you have to press [Alt]+[Shift] and the keyboard shortcut.

27 Managing pages

Managing pages

The following chapters explain how to manage pages in Contao. Since Contao is a page-based content management system, pages and the site structure are the central elements of your website and any content that is not associated with a page can never be viewed.

28 Components

Components

Understanding how pages, articles, content elements and modules relate to each other is the key to learning Contao. As mentioned before, the site structure is the central element of your website. Visitors of your website always request pages and not articles like in a node-based CMS.

The diagram shows that articles and layouts are the two most important page elements. Whereas articles store the content of a page, the page layout defines how it is displayed on the website. Contao layouts are CSS-based and of course do not use layout tables. The following chapters explain how to create style sheets and modules, how to combine them in a page layout and how to create pages that are using it.

29 Themes

Themes

A website design typically consists of style sheets, front end modules, page layouts, files and templates, which you can manage in the Contao back end. The theme manager does not change this approach at all, it just adds an option to export and import those resources.

Themes versus front end templates

The main difference between themes and front end templates is that a front end template contains a fully preconfigured example website, including an example site structure, articles, content elements and even users and groups. A theme, in contrast, contains only the actual website design and can therefore be imported without losing any existing data.

Theme components

A theme is a group of style sheets, front end modules and page layouts, which are all stored in the database and automatically recognized by the theme exporter. You will learn more about those elements in the following chapters. A theme typically also includes images and other files from the files directory and optional custom templates from the templates directory. However, those resources are not automatically linked with the theme and therefore have to be added in the theme configuration to be included in the theme export.

30 Themes

Theme export and import

To export a theme, simply click on the export button and download the .cto file to your local computer. Although .cto is a proprietary file extension for Contao themes, the file is actually a ZIP archive that can be extracted with every program that handles .zip files. To reimport the theme, upload the .cto file to your Contao installation, open the theme manager and click on "Theme import". You can import multiple themes at once. After the import has been completed, you can assign the page layout(s) of the new theme in the site structure.

31 Style sheets

Style sheets

Accessible websites should always be styled using CSS, that is why Contao includes a "style sheets" module which allows you to manage format definitions in the back end. To reference the various Contao elements, you need to know their class names. Content element classes start with "ce_" (e.g. "ce_text") and module classes with "mod_" (e.g. "mod_search"). If you are not sure, simply look into the page source.

Every style sheet can be limited to one or more media types and/or to a particular Internet Explorer version, in case you need to fix one of its numerous bugs. Pay attention to the order of the format definitions, because later commands override earlier ones.

/* Set the general value first */ .mod_search { margin:24px; }

/* Then override it for IE7 */ *:first-child+html .mod_search { margin:18px; }

If the order was reversed, the general value would override the IE-specific margin.

32 Style sheets

33 Modules

Modules

Front end modules allow you to add almost any kind of functionality to your website. The Contao core includes modules to generate various navigation menus, handle user registration and authentication, search the website, import RSS feeds and many more. To create a module, log into the back end and choose "Themes" -> "Front end modules" in the navigation menu.

Module CSS class Description

Navigation menu mod_navigation Generates a navigation menu from the site structure.

Custom navigation mod_customnav Generates a custom navigation menu.

Breadcrumb navigation mod_breadcrumb Generates a breadcrumb navigation menu.

Quick navigation mod_quicknav Generates a drop-down menu from the site structure.

Quick link mod_quicklink Generates a custom drop-down menu.

Book navigation mod_booknav Generates a book navigation menu.

Article navigation mod_article_nav Generates a pagination menu to navigate articles.

Sitemap mod_sitemap Generates a list of all pages in the site structure.

Automatic logout - Automatically logs out a user.

Personal data mod_personalData Generates a form to edit a user's personal data.

Registration mod_registration Generates a user registration form.

Change password mod_changePassword Generates a form to change the password.

Lost password mod_password Generates a form to request a new password.

Close account mod_closeAccount Generates a form to delete a member account.

Newslist mod_newslist Adds a list of news items to the page.

Newsreader mod_newsreader Shows the details of a news item.

News archive mod_newsarchive Adds a news archive to the page.

News archive menu mod_newsmenu Generates a navigation menu to browse the news archive.

Calendar mod_calendar Adds a calendar to the page.

Event reader mod_eventreader Shows the details of an event.

Event list mod_eventlist Adds a list of events to the page.

Event list menu mod_eventmenu Generates a navigation menu to browse the event list.

Subscribe mod_subscribe Generates a form to subscribe to one or more channels.

Unsubscribe mod_unsubscribe Generates a form to unsubscribe from one or more channels.

Newsletter list mod_nl_list Adds a list of newsletters to the page.

Newsletter reader mod_nl_reader Shows the details of a newsletter.

FAQ list mod_faqlist Adds a list of frequently asked questions to the page.

FAQ reader mod_faqreader Shows the answer to a frequently asked question.

FAQ page mod_faqpage Shows the FAQ list and FAQ reader on the same page.

34 Modules

Form mod_form Adds a form to a page.

Search engine mod_search Adds a search form to a page.

Comments mod_comments Manage comments or guestbook entries.

Listing mod_listing Lists the records of a table.

Flash movie mod_flash Embeds a Flash movie into a page.

Article list mod_article_list Generates a list of articles of a column.

Random image mod_random_image Adds a random image to a page.

Custom HTML - Allows you to add custom HTML code.

RSS reader mod_rss_reader Adds an RSS feed to a page.

Access control

Each front end module can be protected so only guests or members of a particular group can see it on the website.

35 Page layouts

Page layouts

Page layouts determine the basic page setup, e.g. the number of columns or the overall width, and they define which front end modules are shown in which columns. They also allow you to include style sheets, to link to RSS or Atom feeds, to associate a Google Analytics ID and to add arbitrary JavaScript code that is required to control interactive elements and plugins. The Contao CSS framework automatically divides the browser window into several layout sections and shows the modules that have been assigned to them one below the other.

That implies that by the time you create a page layout, you have to have created all style sheets and front end modules that you want to include in it. Therefore it is recommended to create resources in the following order:

Create the necessary front end modules Create the necessary style sheets Optionally create news archives or calendars Create a new page layout and combine the components

36 Page layouts

37 Page types

Page types

The page type determines whether a page shows content, forwards to another page or defines the starting point of a new website within the page tree. Contao supports 6 different page types which are explained below.

Page type Description

Regular A regular page contains articles and content elements. It behaves like a static HTML page. page

External This type of page automatically redirects visitors to an external website. It works like a hyperlink. redirect

Internal This type of page automatically forwards visitors to another page within the site structure. redirect

Website This type of page marks the starting point of a new website within the site structure. root

403 If a user requests a protected page without permission, a 403 error page will be loaded instead. This page Access must be added on the first level inside your website root page. denied

404 Page If a user requests a non-existent page, a 404 error page will be loaded instead. This page must be added on not found the first level inside your website root page.

Start page

When the front end is opened with an empty request URL (e.g. http://www.example.org/ ), Contao will show the first published page within the respective website root. You should set the alias of this page to index . Only then will the generated URL to that page also be an empty request.

As of version 3.5.18 , Contao will also automatically redirect to the start page using its alias and the globally defined suffix (e.g. http://www.example.org/home.html ), if the alias is not index .

Multi-domain mode

Contao supports multiple websites within the site structure and automatically redirects visitors to a particular website root page depending on its DNS and language settings. Let us assume that you are running a bilingual corporate website which uses the domain "www.example.com" and a small private website which uses the domain "www.personal.example.org". You need three website root pages for that:

Type DNS Language code Fallback language

German corporate website none de no

English corporate website none en yes

Personal website www.personal.example.org de yes

The following table shows to which page a visitor will be redirected depending on the domain and his browser language.

Domain Browser language Redirect target

www.example.com English English corporate website

www.example.com German German corporate website

www.example.com Spanish English corporate website

38 Page types

www.personal.example.org irrelevant Personal website

Note that if we had not set the "language fallback" option, the personal website would only be available for German speaking users!

Access rights

Access rights determine what back end users are allowed to do with a page and its articles. It has nothing to do with protected pages that can only be accessed by certain front end users! Similar to the Unix file permission system, there are three permission levels:

Access as the owner of a page Access as a member of the group that owns the page Access as an unprivileged user

Each level can have different permissions. By default, the owner of a page is allowed to edit the page itself as well as its articles, whereas a user of the group that owns a page is only allowed to edit articles. Unprivileged users have no writing permissions at all.

39 Managing content

Managing content

The following chapters explain how to manage content in Contao. The Contao core supports many different content types like articles, news, events, newsletters or forms. Further content types like banners, tickets, products or recommendations are available in the Extension Repository. To create content, log into the back end and choose one of the modules in the Content section of the navigation menu.

40 Articles

Articles

Articles are containers for content elements. Grouping content elements that belong together makes it easy to move, publish, copy, edit or export them all at once instead of one by one. Each article is associated with a particular page and layout section and therefore has a fixed position in the site structure and on the website. Contao optionally shows only the article teaser with a "Read more" link.

Content elements

Content elements are an easy and intuitive way to create content. Instead of just using a Rich Text Editor, Contao provides a separate element for each type of content like texts, lists, tables, hyperlinks, images or downloads. Here is an overview of the Contao core content elements:

Name CSS class Description

Headline ce_headline Generates a headline (h1 - h6).

Text ce_text Generates a rich text that can be formatted using TinyMCE.

HTML - Allows you to add custom HTML code.

List ce_list Generates an ordered or unordered list.

Table ce_table Generates an optionally sortable table.

Code ce_code Highlights code snippets and prints them to the screen.

Markdown ce_markdown Generates HTML code from a markdown text.

Accordion (single element) ce_accordion Generates a single accordion element (with MooTools).

Accordion (wrapper start) ce_accordionStart Generates the opening part of the accordion wrapper.

Accordion (wrapper stop) - Generates the closing part of the accordion wrapper.

Content slider (wrapper start) ce_sliderStart Generates the opening part of the slider wrapper.

Content slider (wrapper stop) - Generates the closing part of the slider wrapper.

Hyperlink ce_hyperlink Generates a link to another website.

Top link ce_toplink Generates a link to jump to the top of the page.

Image ce_image Generates a stand-alone image.

Gallery ce_gallery Generates a lightbox image gallery.

Video/audio ce_player Generates a video or audio player.

YouTube ce_youtube Adds a YouTube video.

Download ce_download Generates a link to download a file.

Downloads ce_downloads Generates multiple links to download files.

Article - Includes another article.

Content element (parent class) Includes another content element.

Form ce_form Includes a form.

Module (parent class) Includes a front end module.

41 Articles

Comments ce_comments Adds a comment form to the page.

Access control

Each content element can be protected so only guests or members of a particular group can see it on the website.

Flash content

Flash content is a special type of content which is not shown in an article on the website but loaded into a dynamic Flash movie using "loadVars()". To allow communication between Contao and Flash, you have to add the following function to the root frame of your movie:

TextField.prototype._loadArticle = function(flashID) { tf = this;

// Enable HTML mode and remove content tf.html = true; tf.htmlText = "";

// Instantiate a new LoadVars object lv = new LoadVars(); lv["flashID"] = flashID; lv.sendAndLoad(URL + "flash.php", lv, "POST");

lv.onLoad = function(success) { if (success) { tf.htmlText = lv["content"]; } } }

// Load the Flash content "myArticle" into the text field "myTextBox" myTextBox._loadArticle("myArticle");

Importing a style sheet

The following ActionScript allows you to import a style sheet to format a dynamic text field:

TextField.prototype._addCSS = function(style_sheet) { tf= this;

42 Articles

// Instantiate a new StyleSheet object st = new TextField.StyleSheet(); st.load(URL + style_sheet);

st.onLoad = function(success) { if (success) { tf.styleSheet = st; } } }

// Add the style sheet "basic.css" to the text box "myTextBox" myTextBox._addCSS("basic.css");

Note that Flash only supports a small subset of HTML tags, so some of your styles might not display correctly.

43 News items

News items

The news/blog extension allows you to manage news items or blog posts and display them in the front end. Unlike articles that are associated with a particular page, news items are organized in news archives, which allows you to easily group, categorize or export them.

News archives

News archives are used to group and/or categorize news items. Each archive can relate to a certain language or a particular topic.

Front end modules

Front end modules are used to display news items on the website. They can be configured with the "Modules" module in the back end and have to be added to an article or page layout to actually show up on the website. The news/blog extension includes four front end modules:

Module CSS class Description

Newslist mod_newslist Adds a list of news items to a page.

Newsreader mod_newsreader Shows the details of a news item.

News archive mod_newsarchive Adds a news archive to a page.

News archive menu mod_newsarchiveMenu Generates a navigation menu to browse the news archive.

Permalinks

Each news item has a unique URL (permalink) that can be used to reference it:

http://www.example.com/news/items/james-wilson-returns.html

The above URL requests the news item "james-wilson-returns" via the page "news". Remember that Contao is a page-based CMS, so if the page "news" did not exist or if it did not include the news reader module, the news item would not be displayed.

44 Events

Events

The calendar extension allows you to manage events and display them in a calendar or event list on the website. Unlike articles that are associated with a particular page, events are organized in calendars, which allows you to easily group, categorize or export them.

Calendars

Calendars are used to group and/or categorize events. Each calendar can relate to a certain language or a particular topic.

Front end modules

Front end modules are used to display events on the website. They can be configured with the "Modules" module in the back end and have to be added to an article or page layout to actually show up on the website. The calendar extension includes four front end modules:

Module CSS class Description

Calendar mod_calendar Adds a calendar to the page.

Event reader mod_eventreader Shows the details of an event.

Event list mod_eventlist Adds a list of events to the page.

Event list menu mod_eventmenu Generates a navigation menu to browse the event list.

Permalinks

Each event has a unique URL (permalink) that can be used to reference it:

http://www.example.com/event-reader/events/final-exams.html

The above URL requests the event "final-exams" via the page "events". Remember that Contao is a page-based CMS, so if the page "events" did not exist or if it did not include the event reader module, the event would not be displayed.

45 RSS/Atom feed

RSS/Atom feed

This feature can be used for news archives and calendars. Here is an example with the calendars list.

Settings

One or several calendars can be grouped and exported as an RSS or Atom feed. It goes the same for news archives. At the same time, you can choose to export only the teasers or full articles of each event or news.

46 RSS/Atom feed

XML files

The XML files are generated automatically in the share directory of your Contao installation. In this example : share/events.xml .

47 Newsletters

Newsletters

The newsletter extension allows you to manage and send newsletters and optionally display them on the website. Unlike articles that are associated with a particular page, newsletters are organized in channels, which allows you to easily group or categorize them.

Recipients

Newsletter subscriptions are normally handled by the respective front end modules, so you do not have to manage recipients manually. For data privacy reasons, Contao requires Double Opt-In subscriptions and stores only the e-mail address of the subscriber.

In case you already have a list of recipients, you can import them into Contao from a CSV file.

Personalized newsletters

Insofar as you are sending newsletters to registered members, you can personalize them with so called "Simple Tokens". Simple tokens are similar to insert tags and can be used in both the HTML and the text content of a newsletter.

Dear ##firstname## ##lastname##,

Please check and update your personal data:

Street: ##street## Postal: ##postal## City: ##city## Phone: ##phone## E-mail: ##email##

The Administrator

In contrast to insert tags, however, simple tokens do not only allow you to insert data of the member table tl_member , but also to realize simple if-else statements to e.g. specify the salutation.

{if gender=="male"} Dear Mr ##lastname##, {elseif gender=="female"}

48 Newsletters

Dear Mrs ##lastname##, {else} Dear Sirs, {endif}

[newsletter content]

{if phone==""} Please update your contact details and enter your phone number. {endif}

The Administrator

Sending newsletters

Especially on shared hosting servers, there are typically limitations regarding the script execution time and/or the number of e- mails that can be sent per minute. Contao tries to work around both problems by splitting the sending process into several cycles to prevent script timeouts and adding a custom waiting time between each cycle to control the number of e-mails per minute.

Front end modules

Front end modules are used to handle subscriptions and to optionally display newsletters on the website. They can be configured with the "Modules" module in the back end and have to be added to an article or page layout to actually show up on the website.

Module CSS class Description

Subscribe mod_subscribe Generates a form to subscribe to one or more channels.

Unsubscribe mod_unsubscribe Generates a form to unsubscribe from one or more channels.

49 Newsletters

Newsletter list mod_nl_list Adds a list of newsletters to the page.

Newsletter reader mod_nl_reader Shows the details of a newsletter.

Permalinks

Each newsletter has a unique URL (permalink) that can be used to reference it:

http://www.example.com/newsletters/items/james-wilson-returns.html

The above URL requests the newsletter "james-wilson-returns" via the page "newsletters". Remember that Contao is a page-based CMS, so if the page "newsletters" did not exist or if it did not include the newsletter reader module, the newsletter would not be displayed.

50 Forms

Forms

The built-in form generator can be used to create interactive forms that are sent via e-mail or stored in the Contao database. Uploaded files can be sent as e-mail attachment or stored in the Contao files directory. The form generator supports four different data formats:

Format Description

Raw The form data will be sent as plain text message with each field in a new line. data

XML The form data will be attached to the e-mail as an XML file. file

CSV The form data will be attached to the e-mail as a CSV file. file

Ignores all fields except email, subject, message and cc (carbon copy) and sends the form data like it had been E-mail sent from a mail client. File uploads are allowed.

Form fields

Similar to content elements, Contao provides a separate element for each type of form field like text fields, password fields, select menus, file uploads, hidden fields or submit buttons. Here is an overview of the Contao core form fields:

Field CSS class Description

Headline headline A custom field to insert a section headline.

Explanation explanation A custom field to insert an explanation text.

HTML code - A custom field to insert HTML code.

A container for form fields with an optional legend (only available for tableless Fieldset - forms).

Text field text A single-line input field for a short or medium text.

A single-line input field for a password. Contao automatically adds a Password field password confirmation field.

Textarea textarea A multi-line input field for a medium or long text.

Select menu select/multiselect A single- or multi-line drop-down menu.

Radio button radio A list of multiple options from which one can be selected. menu

Checkbox menu checkbox A list of multiple options from which any can be selected.

File upload upload A single-line input field to upload a local file to the server.

Hidden field - A single-line input field that is not visible in the form.

Security A simple math question to verify that the form is being submitted by a human captcha question (CAPTCHA).

Submit field submit A button to submit the form.

Front end module

51 Forms

The front end module is used to display forms on the website. They can be configured with the "Modules" module in the back end and have to be added to an article or page layout to actually show up on the website. The form generator extension includes one front end module:

Module CSS class Description

Form mod_form Adds a form to a page.

Content element

The content element is used to display forms on the website. They can be configured with the "Form" content element in the back end and have to be added to an article to actually show up on the website. The form generator extension includes one content element:

Content element CSS class Description

Form ce_form Includes a form.

52 Comments

Comments

Comments are another form of content that you can manage from the back end. Comments must be enabled in the calendar and news archive preferences.

Front end module

The front end module is used to display comments on the website. They can be configured with the "Modules" module in the back end and have to be added to an article or page layout to actually show up on the website. The comments extension includes one front end module:

Module CSS class Description

Comments mod_comments Manage comments or guestbook entries.

Content element

The content element is used to display comments on the website. They can be configured with the "Comments" content element in the back end and have to be added to an article to actually show up on the website. The comments extension includes one content element:

Content element CSS class Description

Comments ce_comments Adds a comment form to the page.

BBCode

You can allow the front end users to use the BBCode markup language.

Contao supports the following tags:

BBCode Definition

[b][/b] Replaces the tag with a bolded text.

[i][/i] Replaces the tag with an italicized text.

[u][/u] Replaces the tag with an underlined text.

[img][/img] Replaces the tag with an image (Add an URL between the tags).

[code][/code] Replaces the tag with a monospaced text.

[color=#ff0000][/color] Replaces the tag with a colored text.

[quote][/quote] Replaces the tag with a quoted text.

[quote=John]Hello[/quote] Replaces the tag with a quoted text and the author name (e.g. John wrote: Hello).

[url][/url] Replaces the tag with a link.

[url=http://][/url] Replaces the tag with a link (insert the URL as the parameter)

[email][/email] Replaces the tag with a mailto link.

[[email protected]][/email] Replaces the tag with a mailto link (insert the e-mail address as the parameter).

53 Comments

54 Templates

Templates

A template is mainly composed of HTML and PHP code. It is used to structure a piece of content of a module or a content element, etc. For example, the template news_full.html5 displays the full content of a news item whereas the template news_short.html5 displays only a portion of this content.

The templates are located in their own modules. For example, news_full.html5 is located under system/modules/news/templates/news .

If you edit this file directly in this folder, it will be overwritten the next time you will update Contao and you will lose all your changes. To avoid this, Contao allows you to modify the templates directly from the back end. In this case, the file is duplicated and your changes will be preserved during each update.

Create a new folder and add one or more templates you want to edit. Subsequently, do not forget to attach the folder to the theme as explained in the paragraph Theme components.

A template can be a part of the structure of a module, a content element, a form, etc. and that is why they are prefixed. They can be easily grouped, ordered and recognized. For example: the prefix j_ means "jQuery" and nl_ means "newsletter".

Template inheritance

The inheritance allow you to create a template based on a second template. This means that a template (child) inherits the content of a second template (parent).

In order that the content of a parent template may be modified or completed in the child template, it must be surrounded by an element named block .

A block is built as follows:

block('name_of_the_block'); ?>

// Block content

endblock(); ?>

The example below shows a parent template with a block surrounding the content of the head tag.

Template fe_page.html5 :

block('head'); ?> <?php echo $this->title; ?> endblock(); ?> ...

55 Templates

In the child template fe_custom.html5 , a style sheet is added in the head tag in addition to the inherited content of the parent template fe_page.html5 .

Template fe_custom.html5 :

extend('fe_page'); ?>

block('head'); ?> parent(); ?> endblock(); ?>

The extend() function specifies the template name whose it inherits the content. The parent() function allows to complete a block without replacing the inherited content.

The output of the fe_custom.html5 template will be:

A title ...

Template insertion

A template can be inserted into another template thanks to the insert() function.

insert('template_name'); ?>

The insert() function also accepts the assignment of variables as second parameter.

insert('template_name', array('key'=>'value')); ?>

// This passes all variables from the current template insert('template_name', $this->getData()); ?>

In the example below, we would like to insert the template image-copyright.html5 in the template image.html5 .

The template image.html5 contains an img tag and the insert() function.

Template image.html5 :

src; ?>" alt="alt; ?>" /> insert('image-copyright', array('name'=>'Donna Evans', 'license'=>'Creative Commons')); ?>

The template image-copyright.html5 contains a small tag that will be inserted below the img tag in the template image.html5 . The variables name and license will be replaced with the values determined in the insert() function.

Template image-copyright.html5 :

Photograph by name; ?>, licensed under license; ?>

56 Templates

The output of the image.html5 template will be:

Photograph by Donna Evans, licensed under Creative Commons

57 Markdown

Markdown

Markdown is a lightweight markup language that allows you to format text with a simple syntax. It has the advantage of being easy to read and write and it can be automatically converted to HTML.

You will find some examples of this syntax below:

Syntax

Paragraphs

Paragraphs are separated by line breaks:

First paragraph

Second paragraph

Headings

There are six levels of headings:

# Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6

Strong

To mark important text:

**strong** __strong__

It will be converted to HTML with the following code: strong

Emphasize

To mark text that has stress emphasis:

*emphasize* _emphasize_

It will be converted to HTML with the following code: emphasize

Code

To mark a piece of computer code:

`monospaced font`

58 Markdown

It will be converted to HTML with the following code: monospaced font

Block of code

For a block of code, add four spaces before each line.

monospaced font ...... on several lines

Blockquotes

Blockquotes can be created with a right angle bracket placed at the beginning of the line.

> This is a blockquote.

Line breaks

Add two or more spaces at the end of a line:

Contao is an accessible Open Source content management system.

Links

There are two syntaxes for links: inline and reference.

An inline link is structured as follows:

[Contao](https://contao.org/en) or with an optional title:

[Contao](https://contao.org/en "Contao's official website")

A reference-style link is structured as follows:

[Contao's official website][1]

[1]:https://contao.org/en

The reference can be added anywhere in the document.

Images

There are also two syntaxes for images as for links.

An inline image is structured as follows:

![Alt text](/path/to/img.jpg "Optional title")

A reference-style image is structured as follows:

![Alt text][id]

59 Markdown

[id]: /path/to/img.jpg "Optional title"

The reference can be added anywhere in the document.

Lists

Unordered lists

Unordered lists use asterisks or hyphens:

* List item * List item * A nested list item * A nested list item * List item

- List item - List item - List item

Ordered lists

Ordered lists use numbers:

1. List item 2. List item 3. List item

Extended syntax

It is not possible to describe all items with Markdown such as tables or footnotes for example. That is why there is a project called "Markdown Extra" that complements the basic language.

You will find some examples of this extended syntax below:

Tables

A table can be created like this:

First Header | Second Header | Third Header ------| ------| ------Content Cell | Content Cell | Content Cell Content Cell | Content Cell | Content Cell

You can create alignements by adding colons:

First Header | Second Header | Third Header :------| :------: | ------: Left | Center | Right Left | Center | Right

Footnotes

Footnotes can be created like this:

That's some text with a footnote.[^1]

60 Markdown

[^1]: And that's the footnote.

The footnote definition can be added anywhere in the document.

Further information

For a complete documentation about Markdown, please refer to the official website by following this link.

For a complete documentation about Markdown Extra, please refer to the official website by following this link.

61 Insert tags

Insert tags

Insert tags are wildcards that are replaced with dynamic content when a page is printed to the screen. They e.g. allow you to show the current date, address a front end user by his name or include a file. Insert tags can be used almost anywhere in Contao, even on cached pages.

Link elements

The following insert tags allow you to link to another page or article using its ID or alias.

Insert tag Description

{{link::*}} This tag will be replaced with a link to an internal page (replace * with the page ID or alias).

{{link::back}} This tag will be replaced with a link that points to the last visited page. It can also be used as {{link_open::back}} , {{link_url::back}} or {{link_title::back}} (see below).

{{link::login}} This tag will be replaced with a link to the login page of the currently logged in front end user (if any).

{{link_open::12}}Click {{link_open::*}} Will be replaced with the opening tag of a link to an internal page: here{{link_close}} .

Click here .

{{link_name::*}} This tag will be replaced with the name of an internal page (replace * with the page ID or alias).

{{link_open::12}}Click {{link_close}} Will be replaced with the closing tag of a link to an internal page: here{{link_close}} .

{{article::*}} This tag will be replaced with a link to an article (replace * with the article ID or alias).

{{article_open::12}}Click {{article_open::*}} Will be replaced with the opening tag of a link to an article: here{{link_close}} .

Click {{article_url::*}} This tag will be replaced with the URL of an article: here .

Click here .

{{news::*}} This tag will be replaced with a link to a news item (replace * with the news ID or alias).

{{news_open::12}}Click {{news_open::*}} Will be replaced with the opening tag of a link to a news article: here{{link_close}} .

Click here .

{{news_feed::*}} This tag will be replaced with the URL of a news feed (replace * with the news feed ID).

{{event::*}} This tag will be replaced with a link to an event (replace * with the event ID or alias).

{{event_open::12}}Click {{event_open::*}} Will be replaced with the opening tag of a link to an event: here{{link_close}} .

{{event_url::*}} This tag will be replaced with the URL of an event: Click

62 Insert tags

{{event_url::*}} here .

Click {{event_title::*}} This tag will be replaced with the title of an event: here .

{{calendar_feed::*}} This tag will be replaced with the URL of a calendar feed (replace * with the calendar feed ID).

{{faq::*}} This tag will be replaced with a link to a frequently asked question (replace * with the FAQ ID or alias).

{{faq_open::12}}Click {{faq_open::*}} Will be replaced with the opening tag of a link to a question: here{{link_close}} .

Click {{faq_url::*}} This tag will be replaced with the URL of a question: here .

Click {{faq_title::*}} This tag will be replaced with the title of a question: here .

Member properties

The following insert tags allow you to display any property of the currently logged in member (front end user).

Insert tag Description

{{user::*}} This tag will be replaced with the content of a field in the table `tl_member` in relation to the current member. (replace * with the name of the field).

{{user::firstname}} This tag will be replaced with the first name of the currently logged in member.

{{user::lastname}} This tag will be replaced with the last name of the currently logged in member.

{{user::company}} This tag will be replaced with the company name of the currently logged in member.

{{user::phone}} This tag will be replaced with the phone number of the currently logged in member.

{{user::mobile}} This tag will be replaced with the mobile number of the currently logged in member.

{{user::fax}} This tag will be replaced with the fax number of the currently logged in member.

{{user::email}} This tag will be replaced with the e-mail address of the currently logged in member.

{{user::website}} This tag will be replaced with the web address of the currently logged in member.

{{user::street}} This tag will be replaced with the street name of the currently logged in member.

{{user::postal}} This tag will be replaced with the postal code of the currently logged in member.

{{user::city}} This tag will be replaced with the city of the currently logged in member.

{{user::country}} This tag will be replaced with the country of the currently logged in member.

{{user::username}} This tag will be replaced with the username of the currently logged in member.

Page properties

The following insert tags allow you to display any property of the current page.

Insert tag Description

{{page::*}} This tag will be replaced with the content of a field in the table `tl_page` in relation to the current page. (replace * with the name of the field).

{{page::id}} This tag will be replaced with the ID of the current page.

63 Insert tags

{{page::title}} This tag will be replaced with the name of the current page.

{{page::pageTitle}} This tag will be replaced with the title of the current page.

{{page::language}} This tag will be replaced with the language of the current page.

{{page::parentAlias}} This tag will be replaced with the alias of the parent page.

{{page::parentTitle}} This tag will be replaced with the name of the parent page.

{{page::parentPageTitle}} This tag will be replaced with the title of the parent page.

{{page::mainAlias}} This tag will be replaced with the alias of the parent main page.

{{page::mainTitle}} This tag will be replaced with the name of the parent main page.

{{page::mainPageTitle}} This tag will be replaced with the title of the parent main page.

{{page::rootTitle}} This tag will be replaced with the name of the website.

{{page::rootPageTitle}} This tag will be replaced with the title of the website.

Environment variables

The following insert tags allow you to display environment variables like the page name or the request string.

Insert tag Description

{{env::host}} This tag will be replaced with the current host name.

{{env::url}} This tag will be replaced with the host name and the protocol.

{{env::path}} This tag will be replaced with the current base URL including the path to the Contao directory.

{{env::request}} This tag will be replaced with the current request string.

{{env::ip}} This tag will be replaced with the IP address of the current visitor.

{{env::referer}} This tag will be replaced with the URL of the last page visited.

{{env::files_url}} This tag will be replaced with the static URL of the files directory.

{{env::assets_url}} This tag will be replaced with the static URL of the assets directory.

Include elements

The following insert tags allow you to include various resources like articles, modules or files from the "templates" directory.

Insert tag Description

{{insert_article::*}} This tag will be replaced with the referenced article (replace * with the article ID or alias).

{{insert_content::*}} This tag will be replaced with the referenced content element (replace * with the element ID).

{{insert_module::*}} This tag will be replaced with the referenced module (replace * with the module ID).

{{insert_form::*}} This tag will be replaced with the referenced form (replace * with the form ID).

{{article_teaser::*}} This tag will be replaced with the teaser of an article (replace * with the article ID).

{{news_teaser::*}} This tag will be replaced with the teaser of a news item (replace * with the news ID).

{{event_teaser::*}} This tag will be replaced with the teaser of an event (replace * with the event ID).

This tag will be replaced with the content of a .php, .tpl, .xhtml or .html5 file from the

64 Insert tags

This tag will be replaced with the content of a .php, .tpl, .xhtml or .html5 file from the {{file::*}} "templates" directory (replace * with the file name). You can also provide arguments: {{file::file.php?arg1=val&arg2=val}} . You can also retrieve the path of a file from the database with its UUID: {{file::6939a448-9b30-11e4-bcba-079af1e9baea}} .

Miscellaneous

The following insert tags allow you to perform miscellaneous tasks like adding the current date or including lightbox images.

Insert tag Description

{{date}} This tag will be replaced with the current date according to the global date format.

{{date::*}} This tag will be replaced with the current date according to a custom date format.

{{last_update}} This tag will be replaced with the date of the last update according to the global date format.

{{last_update::*}} This tag will be replaced with the date of the last update according to a custom date format.

{{email::*}} This tag will be replaced with a clickable and encrypted link to an e-mail address.

{{email_open::*}} This tag will be replaced with a clickable and encrypted link to an e-mail address. However, the closing will not be added.

{{email_url::*}} This tag will be replaced by the encrypted e-mail address only.

This tag can be used to mark foreign words within a text: {{lang::fr}}Au revoir{{lang}} . It {{lang::*}} will be replaced with Au revoir and adds the xml:lang="fr" attribute if the doctype is XHTML.

{{post::*}} This tag will be replaced by a given POST variable. It could be used to display fields from a submitted form.

{{abbr::World Wide Web}}WWW{{abbr}} {{abbr::*}} Mark abbreviations in a text: . It will be replaced with WWW .

Mark acronyms in a text: {{acronym::Multipurpose Internet Mail {{acronym::*}} Extensions}}MIME{{acronym}} . It will be replaced with MIME .

{{ua::*}} Output properties of the user agent: {{ua::browser}} . It will e.g. be replaced with "chrome".

This tag will be completely removed if the page language does not match the tag language. You {{iflng::*}} can use it to define language-specific labels: {{iflng::en}}Your name{{iflng::de}}Ihr Name{{iflng}} .

This tag will be completely removed if the page language matches the tag language. You can use {{ifnlng::*}} it to define language-specific labels: {{ifnlng::de}}Your name{{ifnlng}}{{iflng::de}}Ihr Name{{iflng}} .

This tag will be replaced with the thumbnail of an image (replace * with the database ID, UUID or a file system path): {{image::58ca4a90-2d30-11e4-8c21-0800200c9a66? width=200&height=150}} . width: Thumbnail width, {{image::*}} height: Thumbnail height, alt: Alternative text, class: CSS class, rel: rel-attribute (e.g. "lightbox"), mode: Mode ("proportional", "crop" or "box").

This tag will be replaced with an image and various image sources depending on your image size preferences and if the size parameter is a valid ID (replace * with the database ID, UUID or a file system path): {{picture::58ca4a90-2d30-11e4-8c21-0800200c9a66? size=1&template=picture_default}} . width: Thumbnail width, height: Thumbnail height, {{picture::*}} alt: Alternative text, class: CSS class,

65 Insert tags

mode: Mode ("proportional", "crop" or "box"), size: An image size ID (See Themes -> Image sizes), template: The default template (picture_default).

This tag will be replaced with a translated label. The first parameter is a language file name or CNT LNG {{label::CNT:au}} {{label::*}} an acronym such as (countries) or (languages). Examples: displays "Australia" and {{label::tl_article:title:0}} displays "Title". Note that only the first colon is a double colon.

{{version}} This tag will be replaced with the current Contao version (e.g. 3.2.7).

{{request_token}} This tag will be replaced with the request token of the current session.

{{toggle_view}} Adds the link which allows you to switch between mobile and desktop layout.

{{br}} This tag will be replaced with the HTML
tag (line break).

Insert tag flags

Using flags, insert tags can be further processed. For example, the value can be passed to specific PHP methods. Multiple flags can be applied:

Available flags:

Flag Description More information

uncached Do not replace insert tag when the page is cached

refresh Do not cache the insert tag, even if it is used multiple times on the same page

addslashes Quote a string with slashes PHP function

stripslashes Remove the slashes from a quoted string PHP function

standardize Standardize the output (e.g. for a page alias or CSS class)

ampersand Convert ampersands to HTML entities

specialchars Convert special characters to HTML entities

nl2br Inserts HTML line breaks before all newlines in a string PHP function

nl2br_pre Same as nl2br , but keeps line breaks in