Bildergallery ohne Erweiterung in Typo3 einbinden

Mit Typo3 ist es nicht möglich direkt eine Bildergallery einzubinden ohne eine Erweiterung wie wt_gallery zu nutzen, die wieder extra installiert werden muss. Mithilfe ein paar kleinen Typoscript (en) bekommt man allerdings schöne Ergebnisse mit automatischem Verkleinern der Bilder, skalieren und croppen auf ein gleich großes Quadrat. Hierzu kann dann ganz einfach ein Inhalt vom Typ "Bilder-Element" auf der Seite eingebunden werden.

Croppen und Skalieren auf Quadrat

Über das "Bilder-Element" kann zwar die Bilderanzahl pro Zeile definiert werden, allerdings lässt die Möglichkeit des Bilderskalierung etwas zu wünschen übrig. So kann man nicht wie in Typoscript durch Anhängen von c (width=120c) an die Breite oder Länge das Bild Croppen lassen. (Hierfür gibt es zur Not mittlerweile eine Erweiterung: nwt_imagecrop). Somit bekommt man mit Board mitteln zwar Bilder in gleicher Breite, allerdings variiert die Bilderhöhe.
Mithilfe eines kleinen Typoscript gefunden auf (Text mit Bild automatisch beschneiden), dass z.B. in ein EXT+ Template der gewünschten Seiten eingefügt werden kann, werden alle Bilder croppt, so sind die Thumbnails also gleich groß.

tt.content.image.20.1.maxH >
tt.content.image.20.1.maxW >
tt.content.image.20.1.maxH = 65
tt.content.image.20.1.maxW = 65
tt_content.image.20.1.file.width >
tt_content.image.20.1.file.width = 65c-0
tt_content.image.20.1.file.height >
tt_content.image.20.1.file.height = 65c-0
tt_content.image.20.equalH >
tt_content.image.20.equalW >

Vergrößerte Darstellung

Nachdem Klick auf ein Thumbnail soll natürlich bei unserer Gallery auch eine vergrößerte Ansicht mit einer Navigation z.B. "Nächstes Bild" erscheinen. Hierzu gibt es die click on enlarge Checkbox im Backend des Bilder-Element. Normalerweise öffnet sich nach klick auf ein Bild eine Popup-Fenster mit selbigem in einer größeren Ansicht. Will man hier Lightbox bzw. Fancybox nutzen, kann man dieses auch über Typoscript realisieren ohne eine Erweiterung zu nutzen. Das folgende Typoscript überschreibt den click on enlarge Handler durch unseren eigenen bzw. durch eine einfache CSS Klassen, die wir dann weiter verwenden können. Das originale Skript befindet sich hier: Fancybox in TYPO3 integrieren ich habe es lediglich um eine Zeile erweitert, so dass die maximale Bildergröße aus den Konstanten genutzt wird und das Bild verkleinert wird, sonst wird das originale Bild als vergrößerte Fassung dargestellt.

# fancybox handler "click on enlarge"
tt_content.image.20.1 {
  # Standard imageLinkWrap entfernen & eigenes Linkwrapping starten
  imageLinkWrap >
  imageLinkWrap = 1
  imageLinkWrap {
 
    # Linkwrap bei Klickvergrößerung oder gesetzten Link
    enable.field = image_zoom
    enable.ifEmpty.typolink.parameter.field = image_link
    enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
    enable.ifEmpty.typolink.returnLast = url
 
    # Der neue Code für das Wrapping
    typolink {
      target = {$styles.content.links.target}
      extTarget = {$styles.content.links.extTarget}
 
      # Link mit Pfad und Name zum Originalbild oder
      # Pfad und Name des umgerechneten Lightbox Bild
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
      # Maximale Größe des Bildes anpassen; (sonst wird Link zum orignal ausgegeben)
      parameter.cObject.file.maxW = {$styles.content.imgtext.linkWrap.width}
 
      # Ausnahme: wenn das linkfield nicht leer ist
      parameter.override.field = image_link
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      parameter.override.if.isTrue.field = image_link
 
      # rel-Attribut hinzufügen, für Galerie-Funktion
      ATagParams = rel="gallery" title="{field:header}" class="lightbox"
      ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
}

Die Klassen können wir dann z.B. mit Fancybox und jQuery wie folgt ansprechen. Mehr dazu gibt es hier: Fancybox in TYPO3 integrieren

jQuery(document).ready(function(){
 
// Fancybox Image
jQuery("a.lightbox").fancybox({
  'zoomSpeedIn':500,
  'zoomSpeedOut':500,
  'transitionIn':'elastic',
  'titlePosition':'over',
  'overlayShow': true
 });
 
});

bessere Bildernamen

Normalerweise werden alle gerenderten Bilder in Typo3 im Order /typo3temp nur mit Codename abgelegt. Zumindest etwas Suchmaschinen- und Anwenderfreundlicher wird es mit der Variable config.meaningfulTempFilePrefix = 50. So wird vor den Codezeichen der original Bildernamen genutzt siehe Suchmaschinen optimierte Bildnamen für Typo3