Bildergalerie mit Dateilinks

Zugegeben, es gibt wirklich viele gute Extensions, die euch eine Bildergalerie erstellen. Für technikferne Redakteure hingegen stellen einige Plugin-Einstellungen eine nicht zu überschätzende Grenze des redaktionell "machbaren" dar.

Bildergalerie mit TypoScript: Die Vrobereitung

Was wird benötigt:

• TYPO3 6.x
• jQuery
• jQuery Plugin: Lightbox (ihr könnt natürlich auch eine Lightbox-Extension verwenden wie z.B. perfectlightbox oder colorbox verwenden - diese bringen oftmals jQuery gleich mit, also achtet auf die Version die ihr vielleicht shcon laufen habt, damit es zu keinen Konflikten kommt!)

Die Bildergalerie erstellt ihr mit dem Inhaltselement "File links" (oder Dateilinks). TYPO3 bietet hier in der Grundeinstellung die Möglichkeit kleine Layout-Anpassungen über das DropDown-Feld "Layout" im Reiter "Appearance" vorzunehmen. Unter anderem würde es hier die Möglichkeit geben, jeder Datei (sofern es sich um eine Bilddatei oder ein PDF handelt) ein Vorschaubild zu erzeugen. Für unsere Zwecke ist das hingegen zu wenig.

Damit wir über das Inhalts-Element "File links" eine Galerie erzeugen können, müssen wir ein wenig mit TypoScript arbeiten. 

Wenn ihr weitere Dateilinks auf eurer Seite habt, die auch als solche dargestellt werden sollen, solltet ihr zuvor im sog. PageTS der Hauptseite (das findet ihr unter den Seiteneigenschaften im Reiter Resources als TSConfig) eine weitere Layoutmöglichkeit einstellen:


// ---------------------



TCEFORM.tt_content.layout.addItems.100 = Bildergalerie


// ---------------------

Nun habt ihr unter Appearance -> Layout eine zusätzliche Auswahlmöglichkeit mit Namen "Bilergalerie" mit der wir nun weiterarbeiten können.

Wechselt nun zu eurem Setup des Haupt-TypoScript-Templates (auch Root-Template genannt).

Folgender Code erzeugt euch dann eine entsprechende Galerie, die ihr mit CSS eurem Design anpassen könnt:

// ---------------------
// Überschreibe den eigentlichen Wrap um das gesamte Element (normalerweise ein <ul>|</ul>
tt_content.uploads.20.stdWrap.dataWrap.override = <div class="gallery">|<br class="clearfix"></div>
tt_content.uploads.20.stdWrap.dataWrap.override.if.value = 100
tt_content.uploads.20.stdWrap.dataWrap.override.if.equals.field = layout
tt_content.uploads.20.renderObj.stdWrap.override.cObject = COA
tt_content.uploads.20.renderObj.stdWrap.override.cObject {
  // erzeuge ein neues Objekt vom Typ IMAGE
  10 = IMAGE
  10 {
 
    file {
      // importiere die Bilddaten aus dem Inhaltselement
      // file:current:publicUrl gibt mir den relativen Pfad jeder einzelnen Bilddatei zurück
      import.data = file:current:publicUrl
      // Das Bild soll ein Thumbnail mit einer Höhe von 150 Pixeln sein
      height = 150
    }
    // erzeuge zusätzliche wraps um jedes einzelne Bildelement
    stdWrap {
      // wrappe jedes Bildelement mit DIV
      wrap = <div class="image-item"><div class="inner-image-item">|</div></div>
     // erzeuge einen Link für die Lightbox
     typolink {
        // damit die meisten Lightboxen wissen, was sie öffnen sollen, schreibe in den Link noch zusätzliche Paramter (jede lightbox ist anders, hier also entsprechend den jeweiligen Code einfügen
        ATagParams = class="t3colorbox cboxElement" data-rel="gallery"
        // der Paramter ist mein Linkziel.
        // Dieses soll den Dateipfad zum Ofiginalbild enthalten und ist ein Objekt vom Typ IMG_RESOURCE (also Image resource)
        parameter.cObject = IMG_RESOURCE
        parameter.cObject {
          // ähnlich wie oben nur mit maximaler Höhe ODER Breite.
          // Sollte nun ein Bild zu Hoch oder zu breit sein, wird es auf diese Werte heruntergerechnet
          file {
            maxH = 600
            maxW = 800
            import.data = file:current:publicUrl
          }
        }
      }
    }
  }
}
// Nochmals eine IF-Anweisung, diesmal zu unserer Dateiliste an sich mit den gleichen Angaben wie oben
tt_content.uploads.20.renderObj.stdWrap.override.if.value = 100
tt_content.uploads.20.renderObj.stdWrap.override.if.equals.field = layout

// ---------------------

In den Kommentaren habe ich versucht aufzuzeigen was genau passiert.

Fazit:

Mit onboard-Mitteln eine einfache Galerie zu erstellen, mit der man auch nicht technikaffine Redakteure zufriedenstellen kann, geht recht einfach und schnell.

Für Fragen, Anregungen und Kritik zum Beitrag bin ich immer dankbar (da dies mein erster Post überhaupt ist, bitte ich um Nachsicht ;) ).