Table of Contents

Templates

How to add your own javascript to <head>

page.headerData.1 = TEXT
page.headerData.1.value = <script>alert(document.compatMode);</script>

Of course, you can also write any other code to the <head> in this way, file inclusions for instance: 

<script type="text/javascript" src="myfunctions.js">

If you use something like the autotemplate mechanism, or you have already prepared some other <head> content, pay attention to the place where you insert your javascript. 

# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate

Here, you don't want to overwrite page.headerData.10 with your own javascript, or the complete <head>-section will also be overwritten.

Single Marker Replacement in a Template with TypoScript

Or: how to insert information in a single location in a template using TypoScript.

Replacing a range of html code is easy. Just use the Auto-Parser plugin and you're ready to go. But how about replacing a single point of code. For instance, you've got this html code: 

<a target="_self" href="/index.php?id=153">Word Shooter Game</a>

And you want to insert the page id dynamically, because you're using this template code on different servers, where the Word Shooter game is on different pages.

If you've build your own front-end plugins, you'll come up with the answer: just use a submarker notation: ###PAGE_ID###. Wrong! For some reason, this is not supported in TypoScript's template handling…

The answer is very simple nevertheless: just use two “range” markers: 

<a target="_self" href="/index.php?id=<!-- ###WORDSHOOTER_PAGE_ID### -->id<!-- ###WORDSHOOTER_PAGE_ID### -->">Word Shooter Game</a>

I agree, this looks ugly, but it does work (Typo3 version 3.7.1).

Now, in the typoscript section of your template, use this code: 

   subparts.WORDSHOOTER_PAGE_ID = TEXT
   subparts.WORDSHOOTER_PAGE_ID.value = 153

Inserting information from outside TypoScript into a template

Which is what you need to do if you want to know who's looking at your template, right now. If, for instance, you want to insert a user determined css file into your html-template. To do this sort of thing, you first need to build your own php function, which you can in turn call in TypoScript.

Here's an example of the function call, in typoscript: 

# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate
page.headerData.13 =  USER_INT
page.headerData.13.userFunc = user_templateSelection->getCssLink

Here, the getCssLink function adds some content to the head section of the html-file. The USER_INT type indicates that we are going to use our own function: USER_INT is a “user-defined cObject”, or so it says in the online TSRef documentation. But where does getCssLink come from? Obviously, we could not have defined it in TypoScript (you cannot define functions in TypoScript).

Well, you have import functions by calling a library: 

includeLibs.something = fileadmin/user_functions/template_selection.php

This points to a php file, which contains the actual function. Here's an example of the contents of such a php file. Going by the previous example, it would be called template_selection.php.

By the way, do not put your php file in between the Typo3 source files (e.g. /media/scripts as some sources suggest), or your user defined function will get lost when you upgrade your Typo3 version. 

/**
 * PHP class to be called from TypoScript.
 *
 */
class user_templateSelection	{
	var $cObj;		// Reference to the parent (calling) cObj set from TypoScript
 
 
	/**
	 * Returns link to css file for use in template.
	 *
	 * @param	string		$content: Input content. Not used. Ignore.
	 * @param	array			$conf: TypoScript configuration of the plugin.
	 * @return	string		returns html-header link to css file
	 */		
	function getCssLink($content,$conf) {
 
		$skin = '01';
		if ($GLOBALS["TSFE"]->fe_user->user["uid"]) {
			$skin = ($temp = $GLOBALS["TSFE"]->fe_user->getKey('user', 'skin')) ? $temp : $skin;						
		}			
		$strCssLink = '<link id="main_css_file" href = "fileadmin/css/skin' . $skin . ' . css" rel="stylesheet" type="text/css"/>';
		return $strCssLink;
	}
}

This functions checks if the current user is also logged in. If he is, then an attempt is made to find out which “skin” (i.e. a css file) he has chosen to view the website with. The complete path to this css file is sent back as a <link> tag.

Attaching a plugin to your template

Here is how you output the contents of a plugin to a specific subPart of your template.

First, get your html-template ready. Add an html element in which the plugin content should appear, and give the element an id. E.g.: 

<div id="topsurf_extension">DUMMY CONTENT</div>

Warning: do add dummy content, or the substitution system in Typo3 (v.3.7.1) will get confused for some reason!

Now, in your typoscript template, make sure that the element is wrapped in subpart-comments: 

DIV.id.topsurf_extension = 1

(We are assuming that you're using the Auto-Parser plugin for this purpose.)

And finally, assign the content to the marked subpart: 

subparts.topsurf_extension < plugin.tx_sotopsurfs_pi1

You can also specify a configuration for your plugin. Normally, you use the file ext\your_extension\ext_typoscript_setup.txt to do this. But you can also overrule the configuration in the setup section of a typoscript template.

Warning: you must specify the configuration in a separate section of your template. The easiest way to do this, is by making a new template record altogether. Think of this new template record as a “helper” template. 

# set source for rss
tmp.rss < plugin.tx_sorssimport_pi1
tmp.rss {
 
  maxItem = 5
  url = http://www.rssonderwijs.nl/news/ict.php
 
}

Then, in your “main” template, insert the content: 

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
 
   template =< plugin.tx_automaketemplate_pi1
   workOnSubpart = DOCUMENT_BODY
   #... More assignments here ...
 
   subparts.SideBarRight <  tmp.rss
}

Rendering a (tt_content) record in your template

Reading the contents of a table in your template is relatively straightforward, using TypoScript: 

page.10 = RECORDS
page.10.source = 1
page.10.tables = tt_content
page.10.conf.tt_content = TEXT
page.10.conf.tt_content {
  field = header
  case = upper
  wrap = <B> | </B>
}

(This is untested code, coming from the “Typoscript by Example” document)

I have not been able to find out yet, however, how to render tt_content records which are of ctype: shortcut.

You make shortcuts on an ordinary page by inserting a “regular text element” and then changing the type to “insert records”. You then get to select a record from another page (using the page and records browser popup).

It would be very nice to have these shortcuts available in typoscript templates as well…

Maybe this is a clue: 

   shortcut = <tt_content.shortcut.20
   shortcut.0.conf.tt_content = <lib.renderObj
   shortcut.0.tables = tt_content

I found this snippet of TypoScript in the TSRef, in a section about “plaintextLib.inc” http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/11/5/

TemplaVoilà

Encapsulated Table Bug

The alternative templating system (or: “futuristic”) is finally nearing maturity in Typo3 4.0.2. There is one small bug however: TemplaVoilà does not like tables within cells: 

  <td>
    <table>
      ...  
    </table>            
  </td>

TemplaVoilà will simply omit the closing table tag, leaving you with a huge mess.

I found out the hard way that you can solve this by embedding the table in div tags: 

  <td>
    <div class="tableContainer">
      <table>
        ...  
      </table>  
    </div>          
  </td>

Updating a Template

If you have updated the html code for a template, go to the TemplaVoilà module, click ”[ Update mapping ]”, click “save” and empty the cache. Do NOT click the “Modify DS / TO” button! (Or you'll have to remap the ENTIRE template…)

Oh, and in case you're wondering where your stylesheet link went, just uncheck the fields under Adding parts from HTML header, click on save, check them again, click save again (and empty the cache…)

Adding a Flexible Content Element

  1. Choose “TemplaVoilà” > root-page (the globe icon)
  2. Tab: “Template Files” > “New DS/TO?”
  3. Now, CLEAR ALL (or you will not see any elements to perform the next step on)
  4. map CO Root to your FCE's containing element (usually a div or another block-level element)
  5. “Save As”: choose “Content Element” for Template Type.

See also: Tutorial by Marlies Cohen


Personal Tools