TypoScript - The hidden power of TYPO3
TYPO3 is impossible without TypoScript!
Get a quick help and snippets on basic typoscript, menus and sub-menus, including external ts file, includeCSS, includeJS, includeJSFooter, conditional include, setting fluid template, etc. Any TYPO3 development will need the knowledge of TypoScript.
TypoScript is an integral part of TYPO3. To work with TYPO3, one must know typoscript to large extent. TypoScript is a huge subject and has many capabilities. Learning and mastering TypoScript needs extensive working with TYPO3, and over years one may become expert of it. Here we attempt to put few TypoScript snippets that may help TYPO3 developers in their need.
Include external typoscript file
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:armtemplate/Configuration/TypoScript/setup.txt">
Basic page configuration
The following snippet is the first typoscript block needed for a page template.
page = PAGE
page.typeNum = 0
config {
doctype = html5
doctype.value = <!doctype html>
baseURL = [Your base url]
xhtml_cleaning = all
xmlprologue = none
metaCharset = utf-8
renderCharset = utf-8
additionalHeaders = Content-Type:text/html;charset=utf-8
language = en
locale_all = en_EN.UTF-8
htmlTag_langKey = en-EN
prefixLocalAnchors = all
uniqueLinkVars = 1
spamProtectEmailAddresses = 1
index_enable = 1
disablePrefixComment = 1
}
Setting Fluid Template
page.20 = FLUIDTEMPLATE
page.20 {
file = fileadmin/templates/pages/home.html
layoutRootPath = fileadmin/templates/layout/
partialRootPath = fileadmin/templates/partials/
}
BE layout to choose different fluid template
page.20 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.field = backend_layout
key.ifEmpty.data = levelfield:-1, backend_layout_next_level, slide
# Default Template
default = TEXT
default.value = {$templatePath}/home.html
2 = TEXT
2.value = {$templatePath}/subpage.html
3 = TEXT
3.value = {$templatePath}/2cols.html
}
}
Include CSS and JS in pages
page.includeCSS {
mainstyle = fileadmin/templates/css/main.css
dropdown = fileadmin/templates/css/dropdown.css
}
page.includeJSFooter{
file001 = {$templatePath}/js/jquery.min.js
file002 = {$templatePath}/js/main.js
}
page.includeJS{
file001 = {$templatePath}/js/jquery.min.js
file002 = {$templatePath}/js/main.js
}
Conditional include based on IE version
[browser = msie7]
page.includeCSS {
ie7_fix = fileadmin/templates/css/ie7_fix.css
}
[end]
Additional headers in pages
page.headerData.10 = TEXT
page.headerData.10.value (
<meta name="viewport" content="width=device-width, initial-scale=1" />
)
page.shortcutIcon = {$templatePath}/icon/favicon.ico
page.bodyTag = <body>
Additional Footer in pages
page.footerData {
file009 = TEXT
file009.value = <!--[if lte IE 8]><script src="fileadmin/templates/js/respond.min.js"></script><![endif]-->
}
Menus and Sub-menus
lib.main-nav = HMENU
lib.main-nav {
entryLevel = 0
wrap = <ul class="menu">|</ul>
1 = TMENU
1 {
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>
NO = 1
NO.ATagTitle.field = navtitle // title
}
2 < .1
}
lib.breadcrumbs = COA
lib.breadcrumbs.10 = HMENU
lib.breadcrumbs.10 {
includeNotInMenu = 1
special = rootline
1 = TMENU
1 {
noBlur = 1
NO {
doNotLinkIt = |*| |*| 1
allWrap = |<span class="b-drop-menu"><span class="b-drop-menu-title"> ... <span class="b-drop-menu-link"> </span></span><span class="b-drop-menu-body"><span class="b-drop"><i class="q"></i><i class="a"></i><i class="s"></i></span></span></span> |*| |
stdWrap.htmlSpecialChars = 1
stdWrap.noTrimWrap = |||
after =
}
}
}
Powermail - Get value from DB
Powermail provide the prefill option, which can be used to get values from database dynamically. This is very useful when you are using powermail to create registration or booking form for any event. You can pass the event uid in query string and use this value to populate the powermail form field. In the following snippet, we are passing the seminar uid in query parameter tx_armseminar[seminar], which is mapped to powermail textbox field with uid '11'. The seminar uid is used to get the record from table 'tx_armseminar_domain_model_seminar' for the column 'title'. Note the code 'source.intval = 1', this is a good practise to prevent SQL injection. The snippet should work for powermail version 1.6.9 and above.
plugin.tx_powermail_pi1 {
prefill {
uid11 = RECORDS
uid11 {
source.data = GP:tx_armseminar|seminar
source.intval = 1
tables = tx_armseminar_domain_model_seminar
conf {
tx_armseminar_domain_model_seminar = TEXT
tx_armseminar_domain_model_seminar.field = title
}
}
}
}