Typo3 (v 4.5) – Lust und Frust

  • Beitrags-Autor:
  • Beitrags-Kategorie:Software & Co.
  • Lesedauer:7 min Lesezeit

Seit Neuestem darf ich mich näher mit Typo3 beschäftigen. Bisher kannte ich es als Systemadministrator (Updates, Dateien und Datenbanken) oder von Vorführungen der Kollegen im Studium. Jetzt kommt das Administrieren bzw. der Aufbau hinzu. Das etwas seltsame TypoScript, Extensions & Co begleiten mich Tag für Tag. Manchmal freut man sich, was alles geht und manchmal ist man der Verzweiflung nahe, weil man die einfachsten Aufgaben nicht „einfach so“ erledigen kann. Für die Leidensgenossen und alle Interessierten stelle ich einige Erkenntnisse hier kurz zusammen.

Die Herausforderung: Menü selber bauen

Ich hätte auch nicht gedacht, dass die Reihenfolge entscheidend ist… Aber es ist so – auch wenn es nicht in der Dokumentation steht…
### Ein Menü für alle Kinderelemente von Seite-ID=2 bauen
lib.menu_links = HMENU
lib.menu_links {
special = directory
special.value = 2
expAll = 1
entryLevel = -1
stdWrap.warp = <ul class="menublock_soundso"><li class="normal plus"> | </li></ul>
## Erste Ebene ##
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>
ACTIFSUB < .NO
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub = <liclass="active normal minus liopen">|</li>
IFSUB < .NO
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="inactiv minus liclosed">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class='liactive'>|</li>
ACT.ATagParams = class='selected'
}
## 2., 3. und 4. Ebene wie die erste behandeln
2 < .1
3 < .1
4 < .1
}
}

Jetzt das passende CSS dazu („Cousines“ der aktuellen Seiten ab der 3. Ebene nicht anzeigen = per CSS ausblenden). Und das geht so: Aktive Elternelemente, die aktuelle Seite und alle Links beim darüber fahren schwarz machen (#000) – den Rest grau (#999). Abstand bei jeder Hierarchieebene um ein halbes „x“ nach rechts einrücken.
ul.menu li
{
padding-bottom: 0.5ex;
}
li.minus
{
color: #000;
}
li.liclosed ul.menu
{
display: none;
}
.menu .inactiv.minus a
{
color: #999;
}
li.active.minus a:hover, li.active.minus a:active
{
color: #000;
}
.liopen .menu li a
{
color: #999;
}
.liopen .menu li.liactive a
{
color: #000;
}
.active.normal.minus.liopen > a
{
color: #000;
}
div#menu > ul.menu > li.inactiv > a:hover
{
color: #000;
}
li.active ul.menu li.active > a
{
color: #000;
}

Druckversion international:

### Das Wort Druckversion in die Sprachen übersetzen ###
lib.print_word = TEXT
[globalVar = GP:L = 0]
lib.print_word.value = Druckversion
[global]
## Wenn englisch die Sprachen-ID = 2 hat, dann schreibt man das so
[globalVar = GP:L = 2]
lib.print_word.value = Printer friendly version
[global]
## usw...
## Printlink: Seiten-ID und Sprachen-ID in den Link aufnehmen und um das übersetzte Wort legen
lib.printlink = COA
lib.printlink {
10 = TEXT
10{
data = TSFE:id
wrap = index.php?id=|&
}
20 = TEXT
20 {
data = TSFE:sys_language_uid
wrap = type=98&no_cache=1&L=|&print=1
}
30 < lib.print_word
30 {
wrap = " target="_blank">|</
}
}
lib.printlink.wrap = <a href="|a>

#### Druckversion #####
druckversion = PAGE
druckversion {
typeNum = 98
bodyTag = <body onload="javascript:window.print()">
10 = HTML
10.value = <div id='website'><div id='content'><div id='content_center'>
30 < styles.content.get
40 = HTML
40.value = </div></div></div>
}
## Aus dem Fileadmin die passende CSS-Datei für den Druck wie für die Ansicht einbinden.
druckversion.includeCSS {
file1 = fileadmin/templates/main/styles/print.css
file1.title = Standardansicht
file1.media = screen
file2 = fileadmin/templates/main/styles/print.css
file2.title = Druckversion
file2.media = print
}

TW_RSSFeeds-Plugin meckert ab PHP 5.2 (und ab 5.3 stürzt sogar ab):

Der Übeltäter ist schnell gefunden.

allow_call_time_pass_reference to true in your INI file in /pfad/zu/wwwroot /typo3conf/ext/tw_rssfeeds/pi1/class.tx_twrssfeeds_pi1.php on line 454

Da hat jemand wohl für PHP4/5.0-1 programmiert. Um es zu fixen, reicht es, das „&“ vor $this in eben dieser Datei in der Zeile 454 zu entfernen. (Also xml_set_object($this->parser, $this);)

Die schlimme Erkenntnis in diesem Fall: Die meisten Typo3-Plugins sind entweder veraltet (so dass sie nicht mehr funktionieren) oder sie wurden sehr billig zusammengeschustert. (Ich bin auch kein PHP-Guru aber ich versuche ohne die Übergabe von Referenzen oder ähnlichen Tricks auszukommen.)

Auch eine riesige Auswahl an Plugins bringt einem nichts, wenn diese mit der aktuellen (Typo3- oder PHP-) Version nicht laufen.

Herausforderung: Schriftgröße mit den drei „A“s beliebig skalieren lassen

Mit „efafontsize“ (EFA steht für Einfach Für Alle – dem Portal für hürdenfreies Surfen) geht es am schönsten. Man setzt nur statt die Bildchen „span“s ein:
### Wir starten bei 80% der Größe und springen um 10% rauf und runter
lib.fontsize < plugin.tx_efafontsize_pi1
lib.fontsize {
defaultFontSize = 80
fontSizeIncrement = 10
}
## wichtig: "page.1" - da hier der "BODY" verarbeitet werden muss, um die "80%" einzusetzen
page.1 < plugin.tx_efafontsize_pi1
page.1.userFunc = tx_efafontsize_pi1->initEfA

lib.fontsize.smaller = 1
lib.fontsize.smaller {
insideHTML = HTML
insideHTML.value = <span style="font-size: 80%;">A</span>
}
lib.fontsize.reset = 1
lib.fontsize.reset {
insideHTML = HTML
insideHTML.value = <span style="font-size: 110%;"> A </span>
}
lib.fontsize.bigger = 1
lib.fontsize.bigger {
insideHTML = HTML
insideHTML.value = <span style="font-size: 140%;">A</span>
}

Eines scheint hier nur problematisch zu sein: Die folgende Zeile macht die Größenberechnung der Schrift irgendwie „unberechenbar“
if (h < this.defPx) this.base = this.defPx/h;
(Zeilennummer: 43) Ich komme auch ohne diese wunderbar aus!

Stärke von Typo3 – Includes!

In einer Installation kann man nicht nur einen Zweig (eine Domäne) fahren. Es ist (begrenzt) mandantenfähig. Zwar nicht auf der administrativen Ebene (Templates, Extensions, User & Co) aber man kann einzelnen Zweigen eigene Domänen zuordnen. Als „DB-Mounts“ kann man sie einzelnen Personen oder Gruppen zur Bearbeitung freigeben usw…

Doch die eigentliche Stärke (in meinen Augen) liegt in den Includes („Enthält“) von Typo3-Templates. (BTW: Diese haben eher wenig mit Layout zu tun – sie sind vielmehr Verarbeitungsanweisunge, ohne die Typo3 gar nicht läuft.) Ein Stück TypoScript – nennen wir es „schriftgroeße“ kann im Zweig „A“ liegen aber zugleich vom Typo3-Template des Zweiges „B“ verwendet werden. Damit hat man nur einmal die Code-Schnipsel liegen. Sollten Anpassungen für „B“ nötig sein, setzt man sie wie folgt um:

  1. Den Inhalt von „schriftgroeße“ kopieren
  2. „schriftgroeße_B“ im Zweig „B“ anlegen
  3. Den kopierten Inhalt in „schriftgroeße_B“ einfügen
  4. Anpassungen vornehmen (was sich nicht ändert so weit es geht rauslöschen)
  5. Im Reiter „Enthält“ (Includes) „schriftgroeße“ hinzufügen & speichern
  6. Im Template für den Zweig „B“ im selben Reiter „schriftgroeße“ rausnehmen und „schriftgroeße_B“ einfügen & speichern

Mit wenig Code (und vielen Klicks) haben wir die entsprechenden Änderungen gemacht. Klasse!

Herausforderung: Austauschbare Hintergrundbilder für bestimmte Bereiche

Auch das geht (wenn man weiß wie)… Es ist nicht einfach aber einmal eingearbeitet fast ein Kinderspiel.

Man gibt in den Seiteneigenschaften (die Rechte muss man die Redakteuren doch gestehen) im Tab „Ressourcen“ ein Bild aus einem bestimmten Pfad im Fileadmin an. Bei uns heißt es „Bereichslogos“. Die Reihenfolge ist auch hier wichtig: wir nehmen das erste Bild aus dieser Liste. Unser Container, der das Hintergrundbild enthalten soll, heißt „logo_center“.

Die Lösung kann nur im CSS liegen, deshalb definieren wir im Header ein „style“-Element und hinterlassen dort die Definitionen für „#logo_center“. Wenn kein Bild angegeben wurde, legen wir selber eines fest (2. Zeile).
page.headerData.10 = TEXT
page.headerData.10.value = <style type="text/css">#logo_center{background:url(/fileadmin/Bereichslogos/logo.jpg) no-repeat scroll 0 0 #FFFFFF;}</style>
page.headerData.10.override {
required = 1
# nimm von dieser Seite - oder wenigstens von den Eltern
data = levelmedia: -1, slide
wrap = <style type="text/css">#logo_center{background:url(/fileadmin/Bereichslogos/|) no-repeat scroll 0 0 #FFFFFF;}</style>
# wir nehmen das erste Bild - nach Computerzählung die "0"
listNum = 0
}

Einfach oder?

Weitere Erkenntnisse folgen in wenigen Tagen bis Wochen ;-)