Es gibt zahlreiche Galerie Extension im TER. Einige davon haben zahlreiche Features, sind flexibel einzusetzen. Nicht selten muss man dafür eine komplizierte Konfiguration in Kauf nehmen. Da heißt es Handbuch wälzen, TypoScript Constants, TypoScript Setup, HTML Vorlagen und CSS entsprechend einzurichten. Für komplexere Anforderungen mag das Sinn machen. Manchmal ist aber weniger mehr. Mit dem Standard Bild-Element von TYPO3 und ein wenig TypoScript kann man nämlich schon einige schöne Dinge hinbekommen.

In diesem Fall gab es folgende Anforderung, die in diesem Tutorial abgedeckt werden:

Eine Galerie wird lediglich als kleines Teaser-Bild (quadratischer Ausschnitt des Original-Bildes) anzeigt. Rechts daneben soll ein RTE-Beschreibungstext zu dieser Galerie dargestellt werden. Klickt man auf das Teaser-Bild erscheint das vergrößerte Bild in einer Lightbox. Darin soll der Benutzer dann weitere zu der Galerie gehörende Bilder (weniger als 10) ansehen können. Vor- und Zurück-Buttons wären dafür ausreichend.

Alle mir bekannten Lightbox-Lösungen bieten bereits eine solche Funktionalität, allerdings ist mir keine Gallery Extension bekannt, die es ermöglicht „out of the box“ in der Thumbnail-Ansicht lediglich das erste Bild, dafür aber in der Lightbox alle Bilder anzuzeigen.

Aufgrund der einfachen Anforderungen und der geringen Anzahl der Bilder pro Galerie passt das Standard-Bild Element schon ganz gut. Was fehlt ist die Anzeige nur eines Teaser-Bildes und die Lightbox, mit „Galerie“-Funktion. Eine Lightbox per TypoScript geht natürlich nicht, dafür kommt in diesem Tutorial die Extension jq_fancybox zum Einsatz. Die Fancybox ist ein jQuery Plugin. Die Extension bindet also automatisch jQuery und das JavaScript für die Lightbox ein. Wenn man jQuery schon eingebunden hat, dann muss man in der Extension Manager Konfiguration von jq_fancybox das zusätzliche Einbinden von jQuery unterbinden, ansonsten kann man die Extension einfach installieren und die Standard-Konfiguration bestätigen. Die Extension ersetzt dann die traditionelle Klick-Vergrößern Funktion mit der Fancybox.

So weit so gut.

Jetzt muss die Möglichkeit geschaffen werden, dass die Thumbnails beim TYPO3 Inhaltselement „Bild“ einen Ausschnitt des Originalbildes zeigt, wobei redaktionell die Größe der Thumbnails vorgegeben werden soll. Zudem muss sichergestellt werden, dass dies nur für diese spezielle Galerie geschieht, nicht grundsätzlich. Parktisch, dass das Feld „layout“ seit TYPO3 4.5 nun auch beim Inhaltselement „Bild“ zur Verfügung gestellt wird, es eignet sich perfekt für die Unterscheidung.

Fügen wir also per PageTS Konfig in den Seiten Eigenschaften der Wurzel-Seite ein neues Layout hinzu:

TCEFORM.tt_content.layout.addItems.55 = Lightbox Galerie

Jetzt kann dieses Layout im Inhaltselement ausgewählt werden
und dieses Layout dann im TypoScript ansprechen. Zunächst mal das TypoScript damit das Teaser-Bild in der im Inhaltselement angegebenen Größe zurechtgeschnitten wird und zwar nur, wenn das entsprechende Layout gewählt ist:

tt_content.image.20 {
	// cropscale thumbnail images
	equalH.if.value.field = layout
	equalH.if.equals = 55
	equalH.if.negate = 1
 
	1.file.width.stdWrap.wrap = |c
	1.file.width.stdWrap.if.value.field = layout
	1.file.width.stdWrap.if.equals = 55
	1.file.height.field = imageheight
	1.file.height.wrap = |c
	1.file.height.if.value.field = layout
	1.file.height.if.equals = 55
}

Fast am Ziel. Im Inhaltselement ist jetzt schon die Größe für das Teaser-Bild eingestellt (Abb. 2), aber noch werden Thumbnails aller hinterlegten Bilder angezeigt.

Ergänzen wir also das TypoScript damit alle Bilder, bis auf das Erste nur 1×1 Pixel groß werden:

tt_content.image.20 {
	// all images except the first rendered as 1x1 pixels
	imgObjNum = 1 |*| 2 |*| 2
	2 < .1
	2.file.width.override = 1c
	2.file.width.override.if.value.field = layout
	2.file.width.override.if.equals = 55
	2.file.height.override = 1c
	2.file.height.override.if.value.field = layout
	2.file.height.override.if.equals = 55
}

Diese Mini-Bildchen sollen natürlich gar nicht mehr zu sehen sein. Dazu noch ein wenig jQuery Magie ins TypoScript:

// JavaScript to hide all images besides the first one
tt_content.image.20.stdWrap.prepend = COA
tt_content.image.20.stdWrap.prepend {
	10 = TEXT
	10.field = _LOCALIZED_UID // uid
	10.noTrimWrap = |<script type="text/javascript">/* <![CDATA[ */ jQuery(function(){ jQuery('#c| |
	20 = TEXT
	20.field = _LOCALIZED_UID // uid
	20.noTrimWrap =  |img').hide();jQuery('#c| img:first').show();}); /* ]]> */ </script>|
	stdWrap.if.value.field = layout
	stdWrap.if.equals = 55
}

Voilà

Es ist zwar nicht ganz so schön, dass Bilder im HTML sind, die nicht zur Anzeige kommen und ausgeblendet werden müssen,
im Sinne einer pragmatischen Lösung konnte ich das jedoch diese paar zusätzlichen Bytes verschmerzen. Der Link zum Originalbild muss ja in jedem Fall ins HTML, damit die Fancybox korrekt funktioniert.

Eine solche Mini-Galerie kann man auch mit Inhaltselementen vom Typ „Text mit Bild“ verwenden, womit der letzte Punkt der Anforderungsliste schon ohne zusätzliche Arbeit abgedeckt wurde.

Nochmal das gesamte TypoScript C&P fertig (das setzt die renderMethod auch wieder auf „dl“ was die Extension jq_fancybox dummer Weise auf „div“ umstellt):

// fix render method, which is overridden by jq_fancybox
tt_content.image.20.renderMethod = dl
 
// JavaScript to hide all images besides the first one
tt_content.image.20.stdWrap.prepend = COA
tt_content.image.20.stdWrap.prepend {
	10 = TEXT
	10.field = _LOCALIZED_UID // uid
	10.noTrimWrap = |<script type="text/javascript">/* <![CDATA[ */ jQuery(function(){ jQuery('#c| |
	20 = TEXT
	20.field = _LOCALIZED_UID // uid
	20.noTrimWrap =  |img').hide();jQuery('#c| img:first').show();}); /* ]]> */ </script>|
	stdWrap.if.value.field = layout
	stdWrap.if.equals = 55
}
 
tt_content.image.20 {
	// cropscale thumbnail images
	equalH.if.value.field = layout
	equalH.if.equals = 55
	equalH.if.negate = 1
 
	1.file.width.stdWrap.wrap = |c
	1.file.width.stdWrap.if.value.field = layout
	1.file.width.stdWrap.if.equals = 55
	1.file.height.field = imageheight
	1.file.height.wrap = |c
	1.file.height.if.value.field = layout
	1.file.height.if.equals = 55
 
	imgObjNum = 1 |*| 2 |*| 2
 
	2 < .1
 
	2.file.width.override = 1c
	2.file.width.override.if.value.field = layout
	2.file.width.override.if.equals = 55
	2.file.height.override = 1c
	2.file.height.override.if.value.field = layout
	2.file.height.override.if.equals = 55
}

Viel Spaß damit!

Dies ist ein Gastbeitrag von Helmut Hummel für die „Alles muss raus“ Aktion.