Eine Javascript-Slideshow in TYPO3 ohne Erweiterung

Um eine Javascript-Galerie sauber einzubinden, müssen folgende Dinge erfüllt sein:

  1. Die Bilder müssen von TYPO3 im entsprechenden HTML ausgegeben werden.
  2. Es muss ein guter Ersatz angeboten werden, falls Javascript nicht läuft.
  3. Die Bilder müssen entsprechend groß ausgegeben werden.
  4. Es muss für Redakteure einfach (möglichst nur mit Klicken) zu bedienen sein.

Nun gibt es ja schon eine tolle Möglichkeit, Bilder auszugeben: Bildelemente. Aber blöderweise entspricht das HTML, das CssStyledContent FluidStyledContent um die Bilder baut, nie dem HTML, das die Galerien verlangen.

Um das umzubauen, gibt es mehrere TYPO3-Erweiterungen, die die Bilder im entsprechenden Format auswerfen und dann das Javascript drauf abfeuern.

Wir können aber auch einfach mit JavaScript das HTML ändern und dann anschließend die JS-Galerie oder Slideshow ihre Arbeit tun lassen. Auf diese Weise könnten wir tatsächlich jede beliebige Javascript Slideshow einbinden. Schließlich haben wir ja Javascript für die Galerie eh am Laufen, und so ein bischen DOM-Manipulation kann ja nicht sooo schwer sein.

Ist es auch nicht. Hier ist schon mal die Demo-Seite.

Zunächst brauchen wir ein Häkchen, um nicht jedes Bildelement zur Galerie zu machen

Es böten sich mehrere Lösungen an, von FCE über Gridelements bis oxylab_stdwrap. Ich nutze die einfache Lösung "Layout" (einfach zu implementieren, einfach zu bedienen). Die Redakteure müssen sich nur das Feld »Layout« merken.

(Seit TYPO3 8 kann man nicht mehr das Feld "Rahmen" benutzen. Das hier ist noch einfacher.)

Im Typoscript können wir erst einmal unsere Wunschgalerie einbinden. Ich gehe hier mal davon aus, das jQuery verwendet wird, mit anderen Bibliotheken geht das natürlich ebenso gut.

page {
    javascriptLibs {
        jQuery = 1
        jQuery.version = 1.11.0
        jQuery.source = google
    }        
    includeJSFooter {
        js-galerie = fileadmin/layouts/responsiveslides.min.js
       }
}

Im TS Config der Root-Seite passen wir das Feld »Layout« an

Die TypoScript-Konfiguration findet man in den Seiteneigenschaften im Reiter »Ressourcen«.

# define layouts
TCEFORM.tt_content.layout {
    ## ggf. alte Eintraege entfernen:
    removeItems = 1,2,3
    addItems {
        100 = Galerie
    }
}

Und schon kann man im Backend steuern, ob das Element eine Galerie sein soll. Wird das Layout Galerie ausgewählt, bekommt das HTML-Element eine zusätzliche Klasse frame-layout-100, und mehr brauchen wir ja nicht.

Mit jQuery können wir jetzt das DOM an die Galerie anpassen.

Das ist erschreckend einfach: Wir

  • sammeln alle Bilder und
  • basteln das entsprechende HTML drum herum,
  • und anschließend ersetzen wir das Bildelement-HTML mit dem Galerie-HTML.
  • Danach feuern wir das Galerie-JS drauf ab.

jQuery( document ).ready(function( $ ) {

    // Galerie / Slideshow
    // Sammeln und HTML bauen
    var imageCollect = jQuery('<ul class="rs-slides">');
    jQuery('#main').find('.frame-layout-100').find('img').each(function () {
        jQuery(this).clone().appendTo(imageCollect).wrap('<li>');
    });
    // Austauschen
    jQuery('#main').find('.frame-layout-100').find('.csc-textpic-imagewrap').replaceWith(imageCollect);
    // Starten
    jQuery(function() { jQuery('.rs-slides').responsiveSlides(); });
});

Das war's auch schon.

Ich habe einfach mal ResponsiveSlides.js gewählt, aber es sollte allerdings auch mit jeder anderen Galerie oder Slideshow klappen. Es kann nur sein, dass die anderes HTML verlangen. Dann müsste man das Javascript natürlich anpassen.

Statt nach den Bildern ('img') kann man in der 2. Zeile auch nach den sie umschließenden A-Tags ('.lightbox-enabled') suchen. Dann funktioniert sogar noch die Klickvergrößerung.

Und natürlich das CSS ins eigene einfügen

Das ist nicht schwer. Allerdings muss man eventuell etwas anpassen. In meinem Fall hab ich einen Rahmen um img-Tags, den ich einfach mal behalten wollte. Hier das angepasste:

#main .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
#main .rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
#main .rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
#main .rslides img {
  display: block;
  height: auto;
  float: left;
  width: auto;
  border: 0;
}

#main .csc-textpic-intext-right .rslides {
    float:right;
    width:auto;
}

Der letzte Block ermöglicht Slideshows für Text-mit Bild-Elemente.

Und fertig ist das Gartenhäuschen

Wenn »Galerie« ausgewählt ist, passiert der Rest von selbst. Man sollte nur die Bilder möglichst groß wählen. Eventuell muss noch die maximale Bildbreite in den Konstanten angepasst werden.

Im Gegensatz zu einer TYPO3-Erweiterung entfällt der Installations- und Wartungsaufwand. Natürlich dauert es ein paar Millisekündchen länger, bis der Browser das Javascript ausgeführt hat, aber das fällt meines Erachtens nicht ins Gewicht.

Hier nochmal die Demo-Seite.