Outsource TemplaVoila TypoScript code

To get a better overview of TypoScript code of TemplaVoila data structures, you should store it in an external template.

Motivation

The centralization of code is an important characteristic of a well-structured system. This applies when programming in PHP, as well as in the creation of TypoScript templates.

To get a better overview of TypoScript code of TemplaVoila data structures, you should store it in an external template.

Negative Example

The graphic illustrates, how an exemplary TemplaVoila element is created. It is named field_content and can contain multiple content elements and flexible content elements (FCEs) of TemplaVoila. The type of the element is selected with the drop down box "Preferences element" (see marking).

Definition of an element in TemplaVoila
Definition of an element in TemplaVoila

Once you assigned the basic settings to the element and saved it, TemplaVoila then generates an XML code that reflects the data structure of the element.

The section of the definition of our — very simple — field_content element is shown below:

XML data structure (generated by TemplaVoila)
<field_content type="array">
	<tx_templavoila type="array">
		<title>Inhalt</title>
		<sample_data type="array">
			<numIndex index="0"></numIndex>
		</sample_data>
		<eType>ce</eType>
		<TypoScript>
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
		</TypoScript>
		<proc type="array">
			<stdWrap></stdWrap>
		</proc>
		<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
	</tx_templavoila>
	<TCEforms type="array">
		<label>Inhalt</label>
		<config type="array">
			<type>group</type>
			<internal_type>db</internal_type>
			<allowed>tt_content</allowed>
			<size>5</size>
			<maxitems>200</maxitems>
			<minitems>0</minitems>
			<multiple>1</multiple>
			<show_thumbs>1</show_thumbs>
		</config>
	</TCEforms>
</field_content>

In lines 9 to 11, some TypoScript code had been generated. This code is responsible for the output of all content elements that our TemplaVoila element will contain. It can be extended if special formatting or a completely different representation is required.

Let's suppose that there are a lot of page templates and FCEs in our TemplaVoila-based Web site: This can get very complex soon, as the TypoScript code is distributed across many XML data structures.

Best Practice

A clean and better solution to this problem is to remove all TypoScript code from the XML data structures of TemplaVoila and store it in one or more external TypoScript templates. The outsourced code is later inserted into the respective data structure by a single statement.

The benefits of outsourcing are obvious:

  • The code for all TemplaVoila objects is centralized in one place and thus more clearer.
  • You can edit the code with the editor you are familiar with.
  • You don't need to modify the XML data structure when changing the TypoScript code.
  • You can use inheritance in TypoScript.

Simply create a TypoScript template and put the code from the data structure (everything between the <TypoScript> tags) into it. Replace the number 10 with any descriptive name for the outsourced code.

For FCEs, we use this convention: lib. is followed by fce, then its name (here: test), and then the name of the field (here: content, because of "field_content").

Outsourced TypoScript of the FCE TypoScript, SETUP section
lib.fce_test.content = RECORDS
lib.fce_test.content {
  source.current = 1
  tables = tt_content
  wrap = <div class="fce-test">|</div>
}
 
# ... more TypoScript Code for TemplaVoila elements ...

Just for demonstration purposes, we extended the original code by a wrap. Of course, much more complex extensions are possible.

In the XML data structure you then replace the outsourced code with a simple assignment:

XML data structure with replaced TypoScript
<field_content type="array">
  <tx_templavoila type="array">
    <title>Inhalt</title>
    <sample_data type="array">
      <numIndex index="0"></numIndex>
    </sample_data>
    <eType>ce</eType>
<TypoScript><![CDATA[
10 < lib.fce_test.content
]]></TypoScript>
    <proc type="array">
      <stdWrap></stdWrap>
    </proc>
    <oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
  </tx_templavoila>
  <TCEforms type="array">
<!-- further definitions omitted here -->
  </TCEforms>
</field_content>

This approach can be applied to all your flexible content elements and page templates that you create with TemplaVoila. Soon you will notice the benefits of outsourcing TypoScript code from XML data structures.