Schritt 5: Systemsprache und andere Einstellungen

Beim Betrachten des Kalenders fällt uns auf, dass die Wochennamen, Datumsformat und andere Beschriftungen alle in Englisch sind. Das kommt daher, dass wir Typo3 bisher auf die Standardsprache Englisch eingestellt haben, daher sind die Erweiterungen auch in Englisch. Im Backend hat uns das bisher nicht sonderlich gestört, aber im Frontend wollen wir schon in einer Sprache bleiben. Deshalb stellen wir die Sprache jetzt auf Deutsch.

Dazu wählen wir den »Extension Manager« und wählen aus dem Dropdown-Menü oben »Translation handling«. Hier wählen wir die Option »German« an und speichern unsere Änderungen. Dann wählen wir »Update from repository«. Jetzt sucht Typo3 automatisch online nach einer deutschen Übersetzung für alle Erweiterungen und für Typo3 selbst.

Jetzt haben wir schonmal die deutsche Version von allen Inhalten, wir müssen sie nur noch auswählen. Dazu wählen wir das Modul »User settings« und stellen die Sprache hier auf Deutsch. Dann speichern wir unsere Einstellungen und leeren alle Caches. Dazu klicken wir oben rechts auf den gelben Pfeil und dann auf »Clear all caches«. Damit ist das Backend schonmal eingedeutscht.

Jetzt öffnen wir mit dem Template-Modul die Testseite und bearbeiten »Setup«. Über all dem anderen Code fügen wir folgende Zeilen ein:

 

config {   sys_language_uid = 0   language = de   locale_all = deu   htmlTag_langKey = de } date_stdWrap.strftime = %d. %B %Y time_stdWrap.strftime = %H:%M

 

Damit haben wir auch das Frontend auf Deutsch umgestellt. Aber eine Kleinigkeit fehlt uns noch, nämlich das Datumsformat. Dazu öffnen wir die Datei »\typo3conf\localconf.php« und fügen folgende Zeilen ans Ende an:

 

$TYPO3_CONF_VARS['SYS']['ddmmyy'] = 'd. n. Y';

 

Jetzt ist endlich das ganze Frontend in Deutsch.

Die nächste Einstellung die wir ändern wollen ist der Name der Seite. Dazu bearbeiten wir zunächst die Eigenschaften der Seite »Testseite«, der Seitentitel muss geändert werden. Hier sollte jetzt der Name Ihrer Schule hinein kommen. Ich werde exemplarisch die Typo3-Schule einsetzen. Wir speichern unsere Änderungen und begeben uns wieder in die Datei »\typo3conf\localconf.php«. Diesmal hängen wir folgende Zeile an:

 

$TYPO3_CONF_VARS['SYS']['sitename'] = 'Typo3-Schule';

 

Nach dem Spechern uns leeren aller Caches sollte das Wurzelelement des Seitenbaumes auch Typo3-Schule heißen. Nun ändern wir unser Template noch etwas, damit der Seitentitel auch im Titel-Tag des Frontends erscheint. Wir wählen wieder das Template-Modul und die Seite Testseite, die jetzt natürlich anders heißt. Bei mir heißt sie »Typo3-Schule«, bei Ihnen sollte Sie so heißen wie die Schule.

Hier bearbeiten wir wieder »Setup«. Zuerst modifizieren wir den Abschnitt ganz unten:

 

page = PAGE page {   headerData = COA   headerData.10 < temp.docHead      config.noPageTitle = 2      10 < temp.docBody }

 

Mit dieser Modifikation deaktivieren wir den Standard-Titel der Seite. Jetzt müssen wir noch schnell unseren eigenen Titel einfügen. Dazu fügen wir über temp.docHead = COA folgenden Code ein:

 

temp.root1 = HMENU temp.root1.special = rootline temp.root1.special.range = 1|1 temp.root1 {   1 = TMENU   1 {     NO.doNotLinkIt = 1     NO.linkWrap = |  «      NO.stdWrap.field = title   } } temp.root0 < temp.root1 temp.root2 < temp.root1 temp.root3 < temp.root1 temp.root0.special.range = 0|0 temp.root2.special.range = 2|2 temp.root0.1.NO.linkWrap = | temp.root = COA temp.root {   wrap = <title> | </title>   10 < temp.root2   20 < temp.root1   30 = TEXT   30.value = Typo3-Schule }

 

Anschließend modifizieren wir noch diesen Code etwas:

 

temp.docHead = COA temp.docHead {   10 < temp.root   20 = TEMPLATE   20 {     template = FILE     template.file = fileadmin/templates/main/index.html     workOnSubpart = DOCUMENT_HEADER   } }

 

Wir speichern unsere Änderungen und stellen fest, das im Frontend jetzt der Titel der Seite im Titel erscheint.

Jetzt fügen wir nach der Datumsformatierung noch ein paar Zeilen TypoScript hinzu, mit dem wir definieren, wie Überschriften einzelner Content Elemente dargestellt werden. Standardmäßig werden sie als h1-Überschriften angezeigt, aber ich finde es macht mehr Sinn, sie als Unterüberschriften zu definieren — die gesamte Seite hat eine Überschrift erster Ordnung und jedes Inhaltselement könnte eine Überschrift zweiter Ordnung haben.

 

lib.stdheader > lib.stdheader=TEXT lib.stdheader.field=header lib.stdheader.stdWrap.wrap=<h2>|</h2> lib.stdheader.stdWrap.required = 1

 

Übrigens würde ich auch empfehlen, das »Theme Wall«-Logo gegen das Schullogo auszutauschen, damit die Schulhomepage sofort vom Nutzer zugeordnet werden kann.

Anzeige

Schritt 6: Bilder richtig präsentieren

Es ist für eine Schulhomepage sehr wichtig, Bilder gut präsentieren zu können. Medien auf der Schulhomepage sind der Schlüssel zum Erfolg, sie machen den »langweiligen« Schulalltag erst interessant. Einfach gesagt kann man sagen: Je mehr Bilder und Abwechslung die Seite bietet, desto mehr Besucher und Erfolg wird sie haben.

Abgesehen davon ist es ein positiver Nebeneffekt, das Äußenstehende einen besseren Einblick in das Schulleben gewinnen, dadurch steigt meist automatisch die Attraktivität der Schule.

Wichtig für unsere Schulhomepage ist, dass sie von Schülern bedient werden kann. Fotos mit einer Digitalkamera aufzunehmen und auf einen Computer zu laden kann mittlerweile jeder Schüler, über das Dateilisten-Modul von Typo3 ist es auch ein Kinderspiel, die Bilder auf den Server hochzuladen. Doch hier kommt das Problem: Bilder von einer Digitalkamera sind meistens sehr groß, und große Bilder haben eine große Ladezeit zur Folge. Welcher Besucher wird ewige Ladezeiten in Kauf nehmen, wenn er sich eigentlich nur schnell die Fotos vom letzten Schulfest anschauen wollte.

Es ist immens wichtig, das die Bilder vor dem Senden an den Besucher verkleinert werden, das geschieht normalerweise noch vor dem Hochladen auf den Server von Hand in einem Grafikbearbeitungs-Programm. Doch hier müssen wir im Kopf behalten, dass die Schüler die Bilder selbstständig einpflegen können sollen. Nicht jeder Schüler weiß, wie man Bilder skaliert, außerdem passiert es allzu häufig, dass Bilder falsch skaliert werden, und die Proportionen nicht mehr stimmen. Nach Möglichkeit sollten die Schüler also nicht gezwungen werden, die Bilder selbst zu bearbeiten.

Mit der richtigen Erweiterung können wir Typo3 dazu bringen, die Bilder automatisch zu skalieren, zuzuschneiden und in einer benutzerfreundlichen Galerie darzustellen. Ich habe hierzu eine Erweiterung mit dem Namen »Lightbox Gallery« entwickelt, welche all dies automatisch übernimmt. Der Nutzer muss nur die Bilder in ein Verzeichnis seiner Wahl hochladen und das Plugin zum Artikel hinzufügen, den Rest übernimmt die Erweiterung.

Um die Erweiterung zu Installieren wechseln wir wieder zum Modul »Erweiterungen« und wählen die Funktion »Erweiterung importieren«. Jetzt suchen wir mit dem Suchfeld nach der Erweiterung mit dem Schlüssel »lightboxgallery« und installieren diese. Diesmal ist keine weitere Konfiguartion notwendig.

Um nun eine Bildergalerie im Frontend in einem Artikel anzuzeigen, laden wir als erstes ein paar Beispielbilder über das Dateiliste-Modul hoch. Wir müssen für jede neue Galerie einen eigenen Ordner unterhalb des Ordners »user_upload« anlegen. In diesem Fall scheint mir »test« ein guter Name für den Ordner zu sein. Dann laden wir ein paar Bilder hoch.

Mehr müssen wir mit den Bildern gar nicht machen. Jetzt müssen wir nur noch zum Seiten-Modul wechseln und die Seite bearbeiten, auf der die Galerie erscheinen soll. Da wir gerade nur einen Test durchführen, nehme ich jetzt einfach mal die Startseite. Hier füge ich ein neues Inhaltselement hinzu und wähle unter Plug-Ins die Lightbox Galerie. Auf dem Reiter Plug-In müssen wir jetzt nur noch den Ordner »test« auswählen und speichern, dann sollte die Galerie sofort funktionieren.

Die Bildergalerie scheint wunderbar zu funktionieren, also können wir den test-Ordner und das Inhaltselement wieder löschen.