How to swap images in TYPO3 templates (great for internationalization)
June 24th, 2008I was re-building the templates for a quick international website last week and wanted to swap the logos for the different languages. There are, of course, a plethora of manual ways to do this, but I cater to the lazy webmaster. I mean, isn’t laziness at least partially the point of using a CMS (and paying somebody an hourly rate to tweak the crap out of your templates)? This should have been easier (like five minutes), but either my searching skills suck or the final hack I did was not well-documented (it took fifteen minutes). Either way, I wanted to post instructions for using your Typoscript template to swap images in a TemplaVoila template you’re using (that’s right, you’re combining technologies… how Web 2.0 is that?). So, obviously you need to have a place in your HTML template to map a logo (or other image) to dynamically. I used a div tag. That took 3 seconds, and I’m pretty sure you know how to do that if you’re building a template for TemplaVoila to begin with. Next, I put the following XML into the TemplaVoila Data Structure to create a TypoScriptObject:
<field_logo type="array">
<tx_templavoila type="array">
<title>Logo</title>
<description>map to logo</description>
<sample_data type="array">
<numIndex index="0">(logo)</numIndex>
</sample_data>
<eType>TypoScriptObject</eType>
<TypoScriptObjPath>lib.logo</TypoScriptObjPath>
</tx_templavoila>
</field_logo>
Then, at the beginning of the Template Setup for the website, I just added these two little lines to fill in a default image:
lib.logo = IMAGE
lib.logo.file = fileadmin/template/june_2008/images/logo.jpg
Then, the last (still really easy step) was to add the following line to my language setup in the Template Setup under the non-default languages:
lib.logo.file = fileadmin/template/june_2008/images/logo_es.jpg
You can see this line in context where it will replace the logo image when somebody loads the Spanish language:
#Setting up spanish language:
[globalVar = GP:L=1]
config {
sys_language_uid = 1
language = es
}
lib.logo.file = fileadmin/template/june_2008/images/logo_es.jpg
If you want to see this in action, you can just go to FulfillingDestiny.com in English or Spanish (or just go to the page and switch languages when you’re there, obviously).

