TYPO3 Best Practice Workshop
TYPO3 Best Practice Workshop
TYPO3 Best Practice Workshop
1
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Best Practice Workshop
Table of Contents
TYPO3 Best Practice Workshop....................1 Modern Template Building......................................16
Introduction........................................................... 3 Templavoila (Futuristic Template Building)..............18
TYPO3 Development System..................................4 TypoScript: Standard Configuration....................20
Local Development vs. Remote Development............4 Digital Asset Management (DAM)........................21
TYPO3 Provider...................................................... 5 Multilanguage Websites.......................................23
Directory Structure................................................6 Multiple-Tree Concept............................................ 23
Install Tool Settings............................................... 7 One-Tree Conept................................................... 23
Page and User TSconfig.........................................8 Debugging............................................................ 24
Rich Text Editor (RTE)............................................9 Tools..................................................................... 25
Paragraph and Character Styles...............................9 Firefox Add-on: Firebug......................................... 25
Modular TypoScript Code..................................... 12 Firefox Add-on: Web Developer..............................25
Extension Manager..............................................13 Useful Links.......................................................... 26
Templates.............................................................16 ............................................................................ 27
2
TYPO3 Best Practice Workshop - best_practice_workshop Introduction
Introduction
There are many different ways to implement a TYPO3 project. For those new to TYPO3 it is often difficult to decide which way
to choose and to understand which configurations are necessary and meaningful.
This workshop presents a number of shortcuts and best practices to reduce development time. These have been found very
useful in the daily work of the authors, but we understand that some developers may want to choose alternatives to the
methods shown here.
3
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Development System
Extension Development
TYPO3 extensions are programmed in PHP language. The recommended development platform is Eclipse (Java based), either
in form of PDT (PHP Development Tools, free) or ZendStudio (commercial). Most of the TYPO3 developers are using Eclipse,
so there is broad support and know-how for it.
4
TYPO3 Best Practice Workshop - best_practice_workshop TYPO3 Provider
TYPO3 Provider
TYPO3 can be installed either in a low-cost webspace (shared server, 5 to 50 Euro) or on an exclusive server (50 to 500
Euro).
Most shared hosting packages are NOT suited for TYPO3 because of the system requirements. The default memory limit for
PHP scripts is 16 MB (for PHP5), while TYPO3 typically needs 20 to 50 MB (and more depending on complexity of the project
and installed extensions).
TYPO3 also requires additional software to be installed on the server: ImageMagick or GraphicsMagick for all image
processing functions and tools for indexing external documents as well as additional functionality for the Digital Asset
Management (DAM) feature.
There are a number of hosting companies that offer specialized TYPO3 hosting (both webspace and servers). Here you can
expect that the system requirements are met and that TYPO3 along with the necessary tools are already installed.
Depending on the complexity of the web pages, server performance and number of customers hosted on the server, a
webspace package can typically handle between 100.000 and 1 million page request per month. Websites that expect more
traffic should be hosted on an exclusive server. Websites with several million page impressions per month will require special
clustering configurations.
For maximum flexibility it is strongly recommended that a Secure Shell (SSH) access is available.
5
TYPO3 Best Practice Workshop - best_practice_workshop Directory Structure
Directory Structure
6
TYPO3 Best Practice Workshop - best_practice_workshop Install Tool Settings
["GFX"]["TTFdpi"] = '96'
["BE"]["compressionLevel"] = '3';
["FE"]["compressionLevel"] = '3';
["GFX"]["gdlib_2"] = '1';
["GFX"]["noIconProc"] = '0';
['SYS']['forceReturnPath'] = '1'
['BE']['forceCharset'] = 'utf-8'['SYS']
['SYS']['UTF8filesystem'] = '1'
7
TYPO3 Best Practice Workshop - best_practice_workshop Page and User TSconfig
User TSconfig is designed for users or groups of users. User TSconfig can be entered for both BE users and BE groups.
User TSconfig Top Level Objects:
admPanel, options, setup.defaults, setup.override, TCAdefaults.[tablename].[field], auth, page, tx_[extension key with no
underscore]
8
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)
Demo configuation:
The RTE is configured using TSconfig, there are several sample configurations available in forums. With TSconfig the
appearance and features of the editor can be configured on the page level and/or user level. This means that different parts
of the website can use different RTE configurations, as well as there can be configurations for different users.
It is recommended to disable the insertion of images inside the RTE, rather the 'text with image' content element should be
used. When images are uploaded in the RTE, they will all be stored in the same directory and some of the advanced options
for images are not available.
9
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)
Using CSS and TSconfig it is also possible to configure the RTE for a WYSIWYG presentation. Currently a two-step
configuration is necessary: the styles need to be set both in an external CSS file as well as in TSconfig.
The externals CSS file is referenced in TSconfig:
RTE.default.contentCSS = fileadmin/templates/css/rte.css
Styles that are not defined in the CSS file will not be available in the selection boxes of the RTE. This is how the configuration
looks in the CSS file:
p.moreinfo {
background: #7a7a7a url(../img/moreinfo.gif) no-repeat;
font-weight: bold;
color: #ffffff;
margin: 3px 0 0 0;
padding: 4px 0 3px 30px;
Classes defined in CSS can be added or removed from the RTE configuration:
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses .= removeFromList(csc-frame-frame1, csc-frame-frame2)
10
TYPO3 Best Practice Workshop - best_practice_workshop Rich Text Editor (RTE)
In some cases it will be necessary to use slightly different font-sizes in the CSS for the RTE than on the website to achive the
same visual representation, this is because the general font size setting for the RTE is less than 100%.
Finally, use the code below to add the paragraph and character styles to the dropdown boxes (comma separated list):
RTE.default.classesParagraph = moreinfo, ...
RTE.default.classesCharacter = important, ...
11
TYPO3 Best Practice Workshop - best_practice_workshop Modular TypoScript Code
On the root page of the site with one main template these extensions are the inserted in “Include basis templates”.
Using this method you can edit the code more easily and reuse the snippets for other projects.
Defining constants in the root template for the sitename, filepath etc. is also very helpful. Hence these constants can be
inserted multiple times into the setup snippets as variables.
12
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager
Extension Manager
There are 3 categories of extensions:
● System extensions are part of the TYPO3 package and supplied with the source code (example: RTE,
indexed_search, css_styled_content). They are located in the directory typo3/sysext
● Global extensions are available to all TYPO3 projects that share the same source code installation, they are
located in the directory typo3/ext (typically empty)
● Local extensions are available only to the TYPO3 project in which they are installed. They are located in the
directory typo3conf/ext
It is possible to have one extension installed for example as global AND als local extension, in this case the local extension
takes precedence.
It is recommended to install additional extensions always as local. Only in rare circumstances it will be necessary to update
system extensions, updates of these are made available as part of new TYPO3 versions.
Extensions that have been released to the public are available for download from the TYPO3 Extension Repository (TER).
Those extensions have been reviewed by the TYPO3 Security Team are always visible in the TER, in order to see extensions
without review a checkbox has to be set in the extension manager settings:
Also you may want to download extensions from the official TER and not from one of the mirror servers (since sometimes
there is a delay for updates to find their way to the mirrors):
13
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager
TYPO3 projects should be regularly checked for available extension updates. This is easy with the menu “Check for extension
updates”. Just click on the extension name to install the update – but be sure to read the comments and update information
in the manual. Did we mention that it is a good idea to have a recent backup?
Sometimes it may be necessary to obtain an older version of an extension. In the default view, the extension manager only
offers the newest version for download. But clicking on the name of the extension rather than the download/install icon on
the left offers the older versions:
14
TYPO3 Best Practice Workshop - best_practice_workshop Extension Manager
15
TYPO3 Best Practice Workshop - best_practice_workshop Templates
Templates
HTML templates are used as the basis for any TYPO3 project. The template defines the overall structure of the website and
consists of regular HTML code. Depending on the project, one or more templates may be used for the different sections of a
website.
The template contains placeholders which are used to mark the insertion points for the dynamic content. For each dynamic
element of the website (menus, content, language selection, ...) a placeholder is required. Before delivering a page to the
browser, TYPO3 reads and analyzes the template file, reads the dynamic content from the database and inserts it into the
placeholders (or they are replaced with the dynamic elements).
There are two general methods to create and use the templates in TYPO3, which are discussed below.
Note: it is also technically possible to create a project in TYPO3 with TypoScript alone – not using any template file. However
this method is obsolete and not covered in this document.
The extension automaketemplate converts according to the setup below all div tags into subparts.
Example:
<div id="contentMain"> </div>
is converted into:
<div id="contentMain"><!-- ###contentMain###--> <!-- ###contentMain###--></div>
First you must create a folder structure like this in the folder fileadmin:
The main templates are stored in the folder "fileadmin/template/main/", all sub templates are stored in the folder sub. Save
the following templates in the folders.
Main template: template_01.html (wrapper for the sub templates) in folder main
<!-- ###DOCUMENT_HEADER### -->
<!-- ###DOCUMENT_HEADER### -->
<!-- ###DOCUMENT_BODY### begin -->
16
TYPO3 Best Practice Workshop - best_practice_workshop Templates
<div id="nonFooter">
<div id="page">
<div id="content"> </div>
<div id="header"> </div>
<div id="topmenu"> </div>
</div>
</div>
<div id="footer"> </div>
<!-- ###DOCUMENT_BODY### end -->
<div id="ct1">
<div id="contentWrap">
<div id="contentMain"> </div>
<div id="contentRight"> </div>
<div id="contentBorder"> </div>
</div>
<div id="leftmenu"> </div>
</div>
temp.contentAreaTemplate = TEMPLATE
temp.contentAreaTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = sub
workOnSubpart = DOCUMENT_BODY
subparts.contentMain < styles.content.get
subparts.contentRight < styles.content.getRight
subparts.leftmenu < styles.content.getLeft
subparts.BORDER < styles.content.getBorder
}
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = main
17
TYPO3 Best Practice Workshop - best_practice_workshop Templates
workOnSubpart = DOCUMENT_BODY
subparts.content < temp.contentAreaTemplate
}
temp.headTemplate = TEMPLATE
temp.headTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_HEADER
}
temp.contentAreaHeaderTemplate = TEMPLATE
temp.contentAreaHeaderTemplate {
template =< plugin.tx_automaketemplate_pi1
template.content.templateType = sub
workOnSubpart = DOCUMENT_HEADER
}
page = PAGE
page {
typeNum = 0
bodyTag = <body>
10 < temp.mainTemplate
headerData.10 < temp.headTemplate
headerData.20 < temp.contentAreaHeaderTemplate
}
That's it!
In the page properties of the root page set the TV Storage folder in the 'Gerneral Record Storage Page':
18
TYPO3 Best Practice Workshop - best_practice_workshop Templates
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
Mapping
The key concept of TemplaVoila is the mapping of the template to the elements in TYPO3. Mapping is started through the
File->Filelist module. A right-click on the name of the template file offers the option TemplaVoila:
When clicking on the preview button, the template of the website is shown in visual mode:
In the first step, a root container must be mapped to the body-tag of the template. By clicking on the map button, the HTML
tags in the template are displayed in the preview:
19
TYPO3 Best Practice Workshop - best_practice_workshop Templates
The root container is mapped by clicking on the <body> tag. In the Action column we can select between INNER and OUTER
mapping. Choosing INNER, the elements inside the tag are mapped, leaving the HTML tag intact. With OUTER mapping, the
content between the HTML tag and the tag itself are replaced. Outer mapping is necessary if not only the content but also
the tags are generated dynamically. For the root container INNER mapping must be selected, since the <body> tag needs to
remain:
By mapping the <body> tag, a container is created that will contain the elements of the webpage. To create the elements, a
fieldname must be added. The name always starts with field_ and must be unique. Only letters a-z and underscore are
allowed. The first element will be the main navigation of the website:
Depending on the layout and implementation of the template, it may sometime be easier to map in the HTML source view:
20
TYPO3 Best Practice Workshop - best_practice_workshop Templates
After saving we can click on the edit icon and now have the option to add a path to our future Typoscript object:
21
TYPO3 Best Practice Workshop - best_practice_workshop TypoScript: Standard Configuration
config {
## XHTML Settings ##
## Set DOCtype
doctype = xhtml_trans
## Clean XHTML Code
xhtml_cleaning = all
## Removes comments around content elements
disablePrefixComment = 1
## Hide <xml...> tag instead of doctypeSwitch
#config.xmlprologue = none
## Language configuration ##
lang = de
language = de
locale_all = de_DE
htmlTag_langKey = de
## Activate Admin-Panel
admPanel = 0
## AWSTAT ##
## Create logfile for AWSTATS, count website access
stat_apache = 1
stat_apache_logfile = logfile.log
stat_excludeBEuserHits = 1
## Save statistics in database. Attention: database can grow very big when activating!
# stat_mysql = 1
22
TYPO3 Best Practice Workshop - best_practice_workshop Digital Asset Management (DAM)
When media files are uploaded through the element browser, they are automatically indexed and meta data is extracted.
However if files are added for example through FTP or the File->Filelist module, they are not added to the database. Using
the DAM indexer these files can be added to the database after uploading.
23
TYPO3 Best Practice Workshop - best_practice_workshop Digital Asset Management (DAM)
Using the TYPO3 Element Browser the editor can now search for keywords and quickly get a list of all matching files:
24
TYPO3 Best Practice Workshop - best_practice_workshop Multilanguage Websites
Multilanguage Websites
Many websites are multi-lingual: the visitor can select between languages. TYPO3 has extensive support for generating sites
in any language.
For optimum results TYPO3 should be configured to use the utf-8 character set. Depending on the language, a single
character is represented by 1 to 4 bytes. This not only makes it possible to display character sets like Chinese, but also to mix
several different character sets in one page (for example German, Russian and Japanese).
The character set should be set in the install tool before content is entered, since it is quite difficult to convert a project from
one encoding to another at a later point in time.
Multiple-Tree Concept
If the page structure and content differs a lot in the various languages, the best way to setup a project will be the multiple-
tree concept. Here each language has its own page structure. The language selector will always point to the starting page of
the other languages.
Configuration of the multiple-tree concept requires only to set the language-specific Typoscript parameters on the starting
page of each page structure.
One-Tree Conept
In this configuration it is assumed that the page structure in the various languages is basically identical. For each page there
will be a corresponding page in the other language(s). The language selector switches between the different language
versions of the same page. If a translation for a specific page is not available either the default language is shown or the
language selector will not allow to switch to the other language.
25
TYPO3 Best Practice Workshop - best_practice_workshop Debugging
Debugging
26
TYPO3 Best Practice Workshop - best_practice_workshop Tools
Tools
Firefox Add-on: Firebug
Firebug integrates with Firefox. While you browse you can edit, debug, and monitor CSS, HTML, and JavaScript live in any
web page.
27
TYPO3 Best Practice Workshop - best_practice_workshop Useful Links
Useful Links
28
TYPO3 Best Practice Workshop - best_practice_workshop
Reference
– Possible subsections: Reference (TypoScript)
Syntax:
[over-color] | [out-color] | [id-prefix]
Example:
page = PAGE
page.typeNum = 0
page.10 = HMENU
page.10.wrap = <table border=1>|</table>
page.10.1 = TMENU
page.10.1.NO {
allWrap = <tr><td valign=top id="1tmenu{elementUid}"
style="background:#eeeeee;">|</td></tr>
subst_elementUid = 1
RO_chBgColor = #cccccc | #eeeeee | 1tmenu
RO = 1
}
This example will start out with the table cells in #eeeeee and change
them to #cccccc (and back) when rolled over. The “1tmenu” string is a
unique id for the menu items. You may not need it (unless the same menu
items are more than once on a page), but the important thing is that the
id of the table cell has the exact same label before the {elementUid} (red
marks). The other important thing is that you DO set a default
background color for the cell with the style-attribute (blue marking). If
you do not, Mozilla browsers will behave a little strange by not capturing
the mouseout event the first time it's triggered.
[tsref:(cObject).TEST]
29