Day 9: Multilinguality in Typo3 sites (stupid flags...)

Day 9, chapter 9: let's dive right in, shall we?

Today I'm working through the rest of chapter 9 of "Praxiswissen Typo3", which involves providing various text-elements of the project site in both English and German. In order to do this, all "override" properties (which can be seen in the TypoScript Object Browser) need to be removed, and all properties that have access to the method "lang" need to be so set: "lang.de".

Some properties, such as "badMess" (Javascript error message) and "wrap", do not have access to the "lang" method, so need to be set explicitly in a conditional after all "page" properties have been set. Here is how the search form looks after transformation:

tt_content.search.30 {
#js error if user does not fill out required field (implemented below in dataArray.10)
  badMess = Bitte füllen Sie alle erforderlichen Felder aus.

#text input: required, name ="sword", size=15, maxsize=30, label = "Ihre Suche:"
  dataArray.10 {
    type = *sword=input, 15, 30

#previously: value.override = Suchwort
    value.override.lang.de = Suchwort

#previously: label.override = Ihre Suche:
    label.override.lang.de = Ihre Suche:
  }

...

#dynamically generated graphical submit button
  image = IMAGE
  image.file = GIFBUILDER
  image.file {
    XY = [10.w]+10,20
    backColor = #76001B
   
    10 = TEXT
    10 {
#previously: text = Suche
      text.lang.de = Suche

      fontFile = fileadmin/fonts/Ubuntu-C.ttf
      fontColor = white
      fontSize = 14
      #niceText = 1
      offset = 5,15
    }
  }
}

We have to explicitly set conditionals for the properties "badMess" (and "wrap"). This block of code comes after all page properties have been set:

page {
...
}

#Multilinguality
#if the GP (GET Parameter) is 1 (english), then set the system language id to 1,
#the configuration language to English,
#the local to G.B.

[globalVar = GP:L=1]
  config.sys_language_uid = 1
  config.language = en
  config.locale_all = gb_UK

#english translations for error message and wrap go here

#for our search field overhead on the right-hand side
  page.10.marks.SUCHE.badMess = Please fill in the following fields:
  page.10.marks.DATUM.10.wrap = |, today is the 

#for our search form in a page
  tt_content.search.30.badMess = Please fill in the following fields:
  tt_content.search.30.image.file.10.text = Search
[global]

Is this all making sense? I find it logical TODAY, but it's all built on 5 days of non-stop intensive TypoScript-learning.

The next step is to replace the language menu, whose current values are links of the text "English" and "German", with two small images of flags (of England and Germany, of course). The mark for the language menu, "###SPRACHE###", needs to be initialised as an HMENU object whose first and only level is graphical (i.e., GMENU).

Note here that there is yet another type of menu defined by "special": we've seen "special = directory" for the classical menu and "special = rootline" for an inline menu, but now we have "special = language", for a language dependent menu.

#language menu    
      SPRACHE = HMENU
      SPRACHE {
        special = language
        special.value = 0,1
       
#normal status of first (and only) level of the language menu - it's graphical        
        1 = GMENU
        1.NO {
          XY = [10.w]+2, [10.h]+2
          backColor = white

#our language menu is made up of two images:
#the German and the English flag for German and English (duh)        
          10 = IMAGE
          10.file = fileadmin/flags/de.gif || fileadmin/flags/gb.gif
          10.offset = 2,2
        }
       
#active status, language menu      
        1.ACT = 1
       
#take properties from the normal status of the language menu
        1.ACT < .1.NO

#override the effect so that the active (currently selected) language shows is greyed out
        1.ACT.20 = EFFECT
        1.ACT.20.value = gray | gamma=1.5
      }

This sort of worked. On the homepage, the correct flag was greyed out depending on what language I had selected. On all other pages, however, only when "German" was selected was a flag greyed out at all (it was the correct one). The flag for "English" stayed bright an colorful on all pages, except the homepage, after being selected. WTF?

I decided to experiment and to create English versions for the other pages - at least the menu title should be translated, by my logic. This is done by clicking on "Page" under the "Web" module on the left-hand side. On the upper left-hand side of the mask that appears, there is a drop-down with the choices "Columns", "Languages" and "Quick-edit". Select "Languages". Another dropdown labelled "make a new translation of this page" allows you to select one of the languages that has been set for the site-root (represented in the page-tree with the Typo3 icon). Select "English".

You are now shown a page with the title "Create new Alternative Page Language". Enter a title in the textfield "Page Title" (obviously). Make sure that the visibility is enabled under the tab "Access" and then save your changes.

NOW, when you click on the page in the frontend of which you just created an English "translation", and pick the English flag icon - IT STAYS GREY! Logically, in order for the selected page to represent the selected language, you have to actually have a translation of that page in the selected language.

One problem with this is that now the header images are gone. (Cries). Do I have to set those up for the English-translation pages too? When I switch the language via flag to "German", yep... the images are still there. I think I'm going to work on setting up user-protected areas now: pages whose content is protected with a login form and a list of permitted users. Also: dynamically-generated print-versions of every page, with just a few lines of TypoScript in the root template.

Four hours later...

Stay tuned for tomorrow's Typo3 excitement, as I attempt to install the tt_news plugin, whose last stable, non-beta version was uploaded in 2005!