Typoscript :: TYPO3 CMS & SEO
ARM Technologies   ...  TYPO3 Typoscript 

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
       }
     }
   }
}