Sprachen in TYPO3 anlegen

In TYPO3 müssen zuerst die verschiedenen Sprachen als Datensätze auf der Rootebene angelegt werden. Wir verwenden hier den Single-Tree-Ansatz für die Sprachwahl, nachlesen kann man das unter: http://typo3.org/documentation/tips-tricks/multi-language-sites-in-typo3 (Englisch).

Für das Tutorial habe ich zu der default-Sprache Englisch noch 4 weitere Sprachen eingerichtet. Die Bezeichner des Menüs legen wir im root-template in den Typoscript-Constants an:

text {
 lang0 = Groß Britannien
 lang1 = Italien
 lang2 = Deutschland
 lang3 = Frankreich
 lang4 = Spanien

 langId0 = gb
 langId1 = it
 langId2 = de
 langId3 = fr
 langId4 = es
}

Zudem müssen einige Parameter im Typoscript-Setup für die richtige Ausgabe der Sprache eingerichtet werden.

#default-Sprache Groß Britannien (englisch)
config {
 uniqueLinkVars = 1
 linkVars = L(1-4)
 sys_language_uid = 0
 sys_language_overlay = 1
 sys_language_mode = content_fallback
 language = en
 locale_all = en_GB.UTF-8
 htmlTag_langKey = en
}

Desweiteren müssen dann für die weiteren Sprachen Typoscript-Conditions im Setup angelegt werden.

#Italien
[globalVar = GP:L = 1]
config {
 htmlTag_langKey = it
 sys_language_uid = 1
 language = it
 locale_all = it_IT
}
# Überschreiben des aktuellen Menüpunktes, wenn Sprache ausgewählt - muss natürlich aufs eigene System angepasst werden
page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId1}"> |</strong>
[global]

#Deutschland
[globalVar = GP:L = 2]
config {
 htmlTag_langKey = de
 sys_language_uid = 2
 language = de
 locale_all = de_DE
}
page.10.subparts.languageMenu.1.ACT.linkWrap = <strong class="flags" id="{$text.langId2}"> |</strong>
[global]

#Frankreich
[globalVar = GP:L = 3]
...
[global]

#Spanien
[globalVar = GP:L = 4]
...
[global]

Länderauswahl mit Typoscript erstellen

Das Menü ist eine Spezialform vom Typ „language“. An das HMENU müssen die Web-Site-Sprache IDs bei value eingetragen werden (die default-Sprache 0 & die weiteren Sprach-IDs die angelegt wurden, bzw. angezeigt werden sollen). Hier das Typoscript im Ganzen:

lib.flagmenu = HMENU
lib.flagmenu {
 #Spezialform von HMENU - language
 special = language
 #Web-Site-Sprache IDs der zu verwendenden Datensätze
 special.value = 0,1,2,3,4

 1 = TMENU
 1 {
  wrap = <ul class="flagmenu">|</ul>
  noBlur = 1
  NO {
   #die Bezeichner werden mithilfe der Konstanten neu generiert
   #der Optionsplit "||" trennt die Menüpunkte voneinander
   stdWrap.cObject = TEXT
   stdWrap.cObject.value = {$text.lang0} || {$text.lang1} || {$text.lang2} || {$text.lang3} || {$text.lang4}

   allWrap = <li>|</li>
   #zu den Links werden Parameter über die dataWrap Funktion eingefügt – die Klasse „flags“ sowie die eindeutige Link-ID
   ATagParams.dataWrap = class="flags" id="{$text.langId0}"| || class="flags" id="{$text.langId1}"| || class="flags" id="{$text.langId2}"| || class="flags" id="{$text.langId3}"| || class="flags" id="{$text.langId4}"|
  }

  #Aktiver Zustand
  ACT < .NO
  ACT {
   allWrap = <li class="active">|</li>
   #aktive Sprachen werden nicht verlinkt
   doNotLinkIt = 1
   #der Bezeichner wird mit strong gewrappt
   linkWrap = <strong class="flags" id="{$contentpage.langId0}">|</strong>
  }

  #Spezialfall – wenn Übersetzung nicht vorhanden
  #die Generierung des Menüpunktes wird „entfernt“
  USERDEF1 < .NO
  USERDEF1 {
   #keinen Wrap
   allWrap = |
   #Bezeichner auf leer setzen
   stdWrap.cObject.value =
   #keinen Link erzeugen
   doNotLinkIt = 1
  }
 }
}

Das fertige Menü könnte so aussehen

Fazit:

Für ein Sprachauswahl bietet TYPO3 über die Spezialform des HMENUs mittlerweile eine gute Möglichkeit per Typoscript ein Menü zu generieren. Es sind keine zusätzlichen PHP-Skripte oder Extensions mehr nötig. Durch CSS und Optionsplit im Typoscript kann man auch verschiedene Flaggen zu den Links einfügen, die auch auf Ladezeit der Website optimiert sind.

Dieser Artikel ist die Kurzform meines Original-Tutorial aus dem TYPO3-Magazin TY-MA 03. Im Artikel sind auch einige Tipps zur Einrichtung der Sprachen im TYPO3 Backend beschrieben.
Das TYPO3-PDF-Magazin kann man direkt auf http://ty-ma.de bestellen.

Manchmal kann man für eine umfangreiche Bookmark- oder Share-Liste auch Extensions für TYPO3 installieren. Dazu später mehr.

Facebook Typoscript – Gefällt mir!

Ich möchte hier aber die Möglichkeit der Einbindung über Typoscript vorstellen.

In der Designvorlage sind drei Icons abgebildet, also es sollen drei Links zu Facebook, Twitter und Mister Wong generiert werden, die per Klick die URL und den Titel der Seite übermitteln sollen.

HTML-Struktur

Ein einfacher DIV-Block mit den jeweiligen Links.

<div class="shareBlock">
 <a class="facebookLink" href="#">Facebook</a>
 <a class="twitterLink" href="#">Twitter</a>
 <a class="wongLink" href="#">Mister Wong</a>
</div>

CSS mit Sprite-Image

Auch, wenn es in dem Beispiel “nur” drei Icons sind, macht es Sinn, diese als CSS-Sprites anzulegen. Es ist durchaus denkbar, dass später noch weitere Social-Dienste angefügt werden. Aus Performance-Gründen werden hierbei die HTTP-Request auf einem niedrigen Niveau gehalten und alle Icons in eine Grafik gepackt. Aus diesem Grund erhalten alle Links im CSS den gleichen Hintergrund (social-icons.png) und im Anschluss wird über background-position der jeweilige Bereich der Sprite-Grafik angezeigt.

.shareBlock {
	background: url(teilen.png) no-repeat 0 50%;
	clear: both;
	margin: 0 0 20px -17px;
	padding: 3px 0 5px 100px;
}
.twitterLink, .facebookLink, .wongLink {
	background: #fff url(http://blog.marit.ag/wp-content/uploads/social-icons.png) no-repeat;
	display: inline-block;
	height: 32px;
	width: 32px;
	text-indent: -9999px
}
.facebookLink {background-position: 0 0}
.twitterLink {background-position: 0 -50px}
.wongLink {background-position: 0 -100px}

Der Einfachheit halber habe ich die Icons in der Sprite-Grafik in einem Raster von 50px angelegt – so kann man die background-position leichter “finden”.

Das Arbeiten mit CSS-Sprite-Grafiken hat mehrere Vorteile:

• nur 1 Bild für alle Icons wird geladen
• nur 1 HTTP-Request
• die Dateigröße dieser Datei ist viel geringer als die Summe mehrerer Icon-Grafiken
• barrierearm, da Textlink mit Hintergrund-Grafik

Typoscript-Snippet

#| sociallinks |#

lib.sociallinks = COA
lib.sociallinks {
	wrap = <div class="shareBlock">|</div>

	10 = TEXT
	10 {
		value = Facebook
		typolink.title = Auf Facebook teilen
		typolink.ATagParams = class="facebookLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}|
			10.typolink.parameter.data = TSFE:id
			10.typolink.returnLast = url
			10.typolink.addQueryString = 1
			10.typolink.addQueryString.exclude = id

			20 = TEXT
			20.data = page:title
			20.wrap = &t=|
			20.rawUrlEncode = 1
		}
	}

	20 = TEXT
	20 {
		value = Twitter
		typolink.title = Tweet it!
		typolink.ATagParams = class="twitterLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.data = page:title
			10.noTrimWrap = |ließt%20grad:%20||
			10.dataWrap = http://twitter.com/home/?status=|
			10.rawUrlEncode = 1

			20 = TEXT
			20.dataWrap = %20-%20{$baseURL}|
			20.typolink.parameter.data = TSFE:id
			20.typolink.returnLast = url
			20.typolink.addQueryString = 1
			20.typolink.addQueryString.exclude = id
		}
	}

	30 = TEXT
	30 {
		value = Mister Wong
		typolink.title = Wong it!
		typolink.ATagParams = class="wongLink"
		typolink.parameter.cObject = COA
		typolink.parameter.cObject {
			10 = TEXT
			10.dataWrap = http://www.mister-wong.de/index.php?action=addurl&bm_url={$baseURL}|
			10.typolink.parameter.data = TSFE:id
			10.typolink.returnLast = url
			10.typolink.addQueryString = 1
			10.typolink.addQueryString.exclude = id

			20 = TEXT
			20.data = page:title
			20.wrap = &bm_description=|
			20.rawUrlEncode = 1
		}
	}
}

Typoscript am Beispiel Facebook

	10 = TEXT
	10 {

ein cObject TEXT wird initiiert

		value = Facebook

Der Wert “Facebook” wird festgelegt (Ankertext)

		typolink.title = Auf Facebook teilen

ein Link (a-Tag) wird drumherum generiert und das title-Attribut vom Link wird mit “Auf Facebook teilen” gefüllt

		typolink.ATagParams = class="facebookLink"

eine Link-Klasse “facebookLink” wird über ATagParams eingesetzt

		typolink.parameter.cObject = COA
		typolink.parameter.cObject {

für den Typolink-Parameter (href) wird ein neues cObject vom Typ COA initiiert

			10 = TEXT
			10.dataWrap = http://www.facebook.com/sharer.php?u={$baseURL}|

erster Teil des href: der externe Link zur sharer.php-Funktion von Facebook mit dem u-Parameter der Typoscript-Konstante “$baseURL” direkt als dataWrap (in den Typoscript-Constants muss diese Konstante vorhanden sein, Beispiel: baseURL = http://blog.marit.ag/)

			10.typolink.parameter.data = TSFE:id

die aktuelle Seiten-ID wird ausgelesen

			10.typolink.returnLast = url

die URL wird als String zurückgegeben

			10.typolink.addQueryString = 1

alle weiteren URL-Parameter werden ausgelesen, Beispiel tt_news oder L-Parameter für die Sprachwahl

			10.typolink.addQueryString.exclude = id

die zusätzliche Seiten-ID wird hier ausgeschlossen

			20 = TEXT

zweiter Teil des Links

			20.data = page:title

der Seitentitel wird ausgelesen

			20.wrap = &t=|

dieser Wert wird als Wert für den Parameter t des href gewrappt

			20.rawUrlEncode = 1

kodiert den übergebenen String entsprechend RFC 1738 zur sauberen Übergabe

		}
	}

und alle Klammern wieder schließen

Extensions die man installieren kann

• Facebook Social Plugins (socialplugins)
• Links for Social bookmarking and social network (wt_socialbookmarks)
• Social Media Links (form4_socialmedialinks)
• Sexy-Bookmarks (sexybookmarks)

Fazit

Für den Einsatz von Facebook-Share oder Twitter-Button kann man durchaus Typoscript verwenden. Eine schlanke schnelle Lösung auch wenn man weitere Bookmark-Dienste oder Soziale Netzwerke hinzufügen möchte. Ich würde dabei immer den Weg über CSS-Sprites mit allen Icons in einer Grafik gehen, schon aus Performance-Gründen.

Ein kurzer Satz über den Unterschied zwischen der Facebook-Like! Funktion und Share. Für mich persönlich ist die Share-Funktion aktuell für diesen Zweck des “Verbreitens/Teilens” bei Facebook besser geeignet. Ich kann beim Prozess auf Facebook noch zusätzliche Kommentare hinzufügen und ein Vorschaubild auswählen (das direkt aus der Seite ausgelesen wird), sofern eines vorhanden ist. Bei der Like-Funktion (Gefällt mir!) wird bei Facebook lediglich ein Satz abgespeichert “Sven gefällt Marit AG TYPO3 Blog Facebook-Share und Twitter-Update Button mit Typoscript” ohne weitere Kommentar-Möglichkeiten.

Natürlich jetzt nicht vergessen diesen Artikel zu teilen

FacebookTwitterMister Wong

Da die Browserunterstützung für die Verläufe noch nicht sehr fortgeschritten ist, ist es eher ein Blick in die Zukunft, es sei denn, man kann auf eine browserweite optische Gleichheit verzichten oder man macht ein Workaround mit Bildern. Der aktuelle Stand der CSS3-Eigenschaft “linear-gradient” ist hier nachzulesen. Die Vorreiter in der Entwicklung sind – wie gewohnt – Webkit (Safari ab 4.0, Chrome 4) und Gecko (Mozilla Firefox ab 3.6). Opera unterstützt die Eigenschaft bisher nicht. Die Internet Explorer kann zwar seit IE 5.5 über die filter-Eigenschaft bedient werden, aber das ist weder performant noch zielführend – da nur ein einfacher Verlauf erzeugt werden kann.

In der aktuellen Ausgabe des TYPO3 Onlinemagazins TY-MA habe ich beschrieben, wie man solche Teaserboxen in TYPO3 4.3  über die Inhaltsrahmen (section_frames) der Contentelemente erstellt.

Dabei werden für die Teaserboxen CSS-Klassen vergeben. Über CSS-Background-Images für die Überschrift und für den Inhaltsbereich wird dann der DIV-Block optisch zur Teaserbox. Da die Teaser-Boxen ein feste Breite haben, kann dabei 1 Bild für den Teaser-Top-Bereich und 1 Bild für den Teaser-Bottom-Bereich verwendet werden. So bleibt die Teaserbox in der Höhe flexibel.

Allerding werden wie schon erwähnt 2 Bilder, in unserem Fall also rund 2Kb Bilddaten geladen. Zudem sind das 2 HTTP-Request, die man in Zukunft mit dem Einsatz von CSS-Gradients einsparen kann – somit wird die Website beim Aufruf noch schneller. Als Vergleich folgende Übersicht der verschiedenen Varianten, 1x das Original mit 2 Bilddateien, 1x als CSS3 Version mit nur einem kleinen Bild und 1x ohne jegliche Bilder.

Man kann sehen, dass der optische Unterschied zwischen der reinen CSS Umsetzung nur sehr gering ist. Dreieckige Objekte lassen sich bisher nur schwerlich mit CSS implementieren.

Wir nehmen folgenden HTML-Schnippet als Basis:

<div class="css-block">
 <h3>Block teaser blue</h3>
 <div class="css-block-inner">
  <p>
  Cras tortor turpis, vulputate non, accumsan a, pretium in, magna.
  Cras turpis turpis, pretium pulvinar, pretium vel, nonummy eu, leo.
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
  Curabitur augue nibh, iaculis eget, suscipit ut, sodales in, lectus.
  </p>
 </div>
</div>

Das CSS dazu ist folgendes:

.css-block {
 /*
 W3C Spec
 background: linear-gradient(top, yellow, blue 20%, #0f0);
 */
 background: -moz-linear-gradient(top, #fff 0, #fff 67%, #d2d2d2 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));
 padding: 1px;

 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

 box-shadow: 0 15px 20px -10px #e1e1e1;
 -moz-box-shadow: 0 15px 20px -10px #e1e1e1;
 -webkit-box-shadow: 0 15px 20px -10px #e1e1e1;
 }

.css-block-inner {
 background-color: #ebebeb; /*fallback color*/
 background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
  #8598aa 0,
  #fff 17%,
  #fff 83%,
  #ebebeb 99%,
  #fff 100%);
 background: url(img/arrow.png) no-repeat, -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #8598aa),
  color-stop(0.17, #fff),
  color-stop(0.83, #fff),
  color-stop(0.99, #ebebeb),
  color-stop(1, #fff));
 padding: 10px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

.css-block h3 {
 background-color: #2b4c6b;
 background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #6b8298),
  color-stop(0.5, #6b8298),
  color-stop(0.5, #2b4c6b),
  color-stop(1, #2b4c6b));
 padding: 1px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #2b4c6b;
 color: #fff;
 padding: 7px 10px;
 margin: 0;
 }

Der äußere DIV-Block “.css-block” erhält einen Verlauf von #fff (weiß) zu #d2d2d2 (helles grau). Dabei sind für die Eigenschaft “background” folgende Werte zugewiesen:

background: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);

-moz-linear-gradient() ist die Wertzuweisung für Mozilla (Firefox), die kommagetrennten Werte in der Klammer bedeuten dann folgendes

• top = Verlauf beginnend oben
• #fff  0 = start bei 0% mit der Farbe #fff (weiß), wobei man den Initialwert (0%) auch weglassen kann
• #fff  67% = bis 67% mit der Farbe #fff (weiß) weitermachen
• #d2d2d2 100% = Verlaufsende bei 100% mit der Farbe #d2d2d2 (helles grau), wobei man den Endwert (100%) auch weglassen kann

Die Anweisung für Webkits ist leicht unterschiedlich im Syntax:

background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));

Der innere DIV-Block “.css-block-inner” mit einem zusätzlichen Bild erhält für unser Beispiel nun diese Werte für den Hintergrund:

background-color: #ebebeb; /*fallback color*/
background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
 #8598aa 0,
 #fff 17%,
 #fff 83%,
 #ebebeb 99%,
 #fff 100%);

Wir weisen eine “Fallback”-Farbe zu (background-color: #ebebeb) – für Browser, die Verläufe noch nicht darstellen können. Dann weisen wir ein Hintergrundbild zu – url(img/arrow.png) no-repeat – das ist der kleine Pfeil, der von der Überschrift in den Haupttext “ragt”. Hinter dem Komma wird der Verlauftshintergrund definiert. Es fängt bei 0 mit der Farbe #8598aa (helles blau) an, geht bis 17% ins #fff (weiß) über, weiter mit #fff bis 83% der Höhe, übergehend zu #ebebeb (helles grau) bis 99% und wieder zu #fff bis 100%. Das ergibt am unterem Rand ein leichtes “Blitzen” und wirkt ein wenig 3-Dimensional.

Für die Überschrift h3 wird ebenfalls ein Verlauf benötig, allerdings mit einer “harten Kante”:

background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);

Die Farbe #6b8298 (mittelblau) geht von 0-50%. Das dunklere blau #2b4c6b geht direkt weiter von 50-100%. Dadurch entsteht beim Verlauf die “harte Kante”.

Noch ein wenig “box-shadow” und “border-radius” und schon ist unsere Teaserbox mit CSS3-Verlauf fertig.

Fazit:

Die Möglichkeiten mit CSS3 sind nahezu unbegrenzt für die Umsetzung moderner Layouts, leider müssen wir mit der Implementierung noch eine Weile warten, bis alle Browser die Eigenschaften unterstützen. Dann lassen sich die netten Effekte aus Photoshop wie Schatten, runde Ecken oder Verlauf ausschließlich mit CSS umsetzen.

TYPO3 4.3 – Frontend-Edit Demo