So. How do one find extra performance, without buying new expensive hardware. One way could to experiment with caching options. The eAccelerator software is highly recommend for TYPO3 setup, so I did some testing with this and there was quite a bit of performance hidden here.

The installation was quite simple on my setup. I followed the installlation guide which was more or less a set of commands. phpize, configure, make, make install and the copy the .ini file to the PHP ini directory. Reload apache/php and that’s it. All done.

If the website is running TYPO3 and there still are performance issues, then you should check that the configuration of the site and server, uses the internal caching mechanism found in TYPO3. If this is not disable (from an extension or something else) there will most likely be major performance boost waiting here. This is the typical bottle neck in TYPO3 and it should be considered carefully, as this optimized the performance of TYPO3.

An easy way of controlling this, is to setup the javascript and css files from the template configuration. There are some different ways of doing this and I will demonstrate two of them here.

The template configuration examples should be self-explainable, so I will not comment them futher:

Javascript option 1 – headerData:

page.headerData.230 = TEXT
page.headerData.230.value = <script type="text/javascript" src="/fileadmin/myjavascript.js"></script>

Javascript option 2 – includeJS:

page.includeJS {
  file1 = fileadmin/myjavascript.js
  file1.type = application/x-javascript
  file2 = fileadmin/myjavascript2.js
}

CSS option 1 – headerData

page.headerData.231 = TEXT
page.headerData.231.value = <link rel="stylesheet" type="text/css" href="/fileadmin/stylesheet.css" />

CSS option 2 – includeCSS

page.includeCSS {
  file1 = fileadmin/stylesheet.css
}

CSS option 3 – page.stylesheet

page.stylesheet = fileadmin/stylesheet.css

Hope this tip can be helpful. Please notice that the CSS option 3 only enables you to set 1 stylesheet, where the other examples support multiple files.

When displaying the images in the frontend, I would scale the images to a size specified in the plugin configuration. I was using the following code:

...
$imageConf['file'] = $row[image];
$imageConf['file.']['maxH'] = $this->conf[largeMaxH];
$imageConf['file.']['maxW'] = $this->conf[largeMaxW];
$thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);
...

The $row[image] would contain the image file to be displayed and the maxH and maxW is being set to the image sizes from the plugin configuration. When loading the page every image would be resized to the correct size, but when a single gallery reached about 100+ images this process started to perform very poorly. Actually is was slow – very slow.

What to do?!

Well, I figured out that I would try to make a function, where the image only would get resized once and then reused. I created an extra database field (a blob-field would be preferred) for storing the cached information.

Generating the images is still done with the above example, but now the filename for the resized image is being saved in the database. I choose a setup using a multidimensional array with keys representing the image height and width like this:

...
$imageConf['file'] = $row[image];
$imageConf['file.']['maxH'] = $this->conf[largeMaxH];
$imageConf['file.']['maxW'] = $this->conf[largeMaxW];
$thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);

$cached[$this->conf[thumbnailMaxW]][$this->conf[thumbnailMaxH]] = $thumbnailImage;
...

Until now there is no change in the performance as every image still is being resized on the fly. The last piece of the puzzle is to check whether or not there exists a cached image. To do this I am using two check:

$thumbnailImage = $cached[$this->conf[largeMaxW]][$this->conf[largeMaxH]];
if ($thumbnailImage == "" || ! file_exists($thumbnailImage)) {
  $imageConf['file'] = $row[image];
  $imageConf['file.']['maxH'] = $this->conf[largeMaxH];
  $imageConf['file.']['maxW'] = $this->conf[largeMaxW];
  $thumbnailImage = $this->cObj->IMG_RESOURCE($imageConf);

  $cached[$this->conf[thumbnailMaxW]][$this->conf[thumbnailMaxH]] = $thumbnailImage;

  $updateCache = 1;
}

First check is to see if the database contains information about a cached image and the second check is to see if the cache image still exists within the typo3temp directory. If one or both of these check fails, then a new cached image will be generated and the $updateCache is set to 1 indicating that the database should be updated later on in the script.

It’s a while since I made the actual code and I cannot remember the exact render times, but there was a massive performance boost in my extension.

The two I will cover is:
1. Manually adding language page
2. Integrated TYPO3 language support

1. Manually adding language page

This I will only touch briefly, as the solution should be obvious when the layout is presented. It should be very easy. Just create a tree like this and manually do the linking:

That’s it.

2. Integrated TYPO3 language support

This is quite different compared to the first setup. We will be using the built-in language support in TYPO3, based on a tree structure like this:

First step is to create the languages and this is done by selecting list, clicking your site in the tree structure and then adding a website language:

Then create the number of languages needed for the site.

Second step is the template configuration. Before doing this, we have to check which id numbers the languages has been given. This is done by selecting list on your site (just as when we created the languages) and the hover your mouse above each language:

When this is done, then go to the template setup field and enter the following:

config.sys_language_overlay = hideNonTranslated
config.linkVars = L

[globalVar = GP:L=en]
  config.sys_language_uid=2
  config.language = en
[global]

[globalVar = GP:L=dk]
  config.sys_language_uid=1
  config.language = dk
[global]

What this does is:
config.sys_language_overlay = hideNonTranslated will hide a page or content element, if is does not have content for the specific site. Remove or outcomment this, if you want all elements displayed.
config.linkVars = L is the parameter used in the url for selecting language. Ie http://domain.tld/index.php?id=2?L=dk
[globalVar = GP:L=dk] a section like this, configures the language based on the parameter passed by the linkVars. Here it will trigger on L=dk
config.sys_language_uid=1 this will join the dk-parameter with the language id 1, which we found earlier.
config.language = dk this will set the page language for dk

Third and final step is to configure a page to use the new languages. This is done by selecting list, clicking the page and adding an Alternative Page Language


Then select which language you want to create a page for, type in the page title and save it.

We are now ready for translating the page. When editing an element on the newly configured page, there is now a new option in the top of the page. Select the new language and type in the translation.

That’s it. TYPO3 will now display the Danish content when visiting the page with the L=dk parameter in the url.

When both the content and the rightbar is of the type Content Elements, you have to manually insert elements on every single page, that should have output.

Wouldn’t it be nice, if the rightbar could have some default Content Elements outputted automatically, if you haven’t inserted any elements? Yes, it would!

So. To the fun part. Open your TemplaVoila section in the TYPO3 backend and edit the Data Structure (DS) for the template. The textfield Data Structure XML has a lot of XML-data and you should scroll down until you find the section of your element. In my case the element is named field_right and I should then find something like this:

...
        <field_right type="array">
				<tx_templavoila type="array">
					<title></title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>ce</eType>
					<TypoScript><![CDATA[
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
	10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
                    ]]></TypoScript>
...

We are then going to edit the <TypoScript>-section, so it should look like this:

...
        <field_right type="array">
				<tx_templavoila type="array">
					<title></title>
					<sample_data type="array">
						<numIndex index="0"></numIndex>
					</sample_data>
					<eType>ce</eType>
					<TypoScript><![CDATA[
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
	10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
	20 = COA
	20 {
		10 = RECORDS
		10.tables = tt_content
		10.source = 57
		if {
			value.current = 1
			equals =
		}
	}
                    ]]></TypoScript>
...

This will insert an extra set of data. The COA-element is a container used only for checking if there is any content. Inside the 20 we will insert the content of the tt_content-element with the uid 57, if the current value is nonexisting.

The uid should be changed to the uid of your choice and it is even possible to insert a comma separated list of multiple uids.

The result should now be, that the content of uid 57 will be shown on every page, if the page does not have any elements add to the field_right section in TemplaVoila.

There you go. A TemplaVoila setup with some default output.

*IMPORTANT* when making updates to the TemplaVoila configuration (mappings etc.) the above changes WILL BE overwriting.

I’m using TemplaVoila with a very simple setup. 3 fields – header image, menu and a content-element. The focus will be on the header image element, which in my case is mapped to a <div > and saved as the type “TypoScript Object Path” with an “Object Path” named “lib.headerimg“.

The next step is to setup the template to insert an image in the lib.headerimg. This is done by inserting to following into the Template Setup field:

lib.headerimg = IMAGE
lib.headerimg {
  #this is the default image, for pages with no specific image add
  file = fileadmin/default.gif

  #if the selected page has an added image, the set this instead of the default above
  file.import.override.field = media

  #fetch image from the upload/media/ folder
  file.import.data = levelmedia: -1, "slide"
  file.import = uploads/media/

  #lock the configuration to use only the first added image
  file.import.listNum = 0
}

That’s it! Save, clear cache and view your site. Every page should now be showing the default.gif image as entered in the template configuration.

To make the image change for a single page, your should go the page property for the page, select the “Resources” tab and upload an image in the “Files” section. When the image is uploaded, this page should now be showing the newly added image.