Tim-Oliver Schulz am 16. April 2009

Nach längerer Zeit und vielen Nachfragen auf meinen SlideShowPro-Artikel habe ich es endlich geschafft mein Tutorial für die TYPO3 Extension (prof_slideshowpro) fertigzustellen.

Beim Testen der Extension wollte der beschriebene Weg aus der Doku nicht so richtig funktionieren. Und wie ich aus den Fragen entnehme, ging es auch vielen anderen so… Deshalb möchte ich Dir jetzt hier den Weg zeigen, wie die Anbindung von SlideshowPro mit prof_slideshowpro an TYPO3 bei mir funktioniert hat. 

Die einzelnen Schritte:

  1. Funktionsweise
  2. Installation
  3. Statische Templates einbinden
  4. Javascript für Flashabfrage einbinden
  5. Sysfolder anlegen
  6. Plugins einfügen
  7. param.xml anpassen
  8. Fazit

Vorab noch ein Hinweis:
Das Tutorial bezieht sich auf die Version 1.0.3. und funktioniert nicht mit der v1.1.1!
Wer keinen Zugriff auf das online Repository hat:

Download TYPO3 Extension prof_slideshowpro v1.0.3 als t3x.

Funktionsweise
Zunächst ein kleiner Überblick über die Funktionsweise von prof_slideshowpro.
Mit Hilfe der Extension ist es möglich mit TYPO3 Bildergalerien und Alben in SlideShowPro anzuzeigen, in dem man einzelne Bilder oder ganze Verzeichnisse in zwei Klicks zu einem TYPO3-Datensatz zusammenfasst. Daraus generiert prof_slideshowpro automatisch die nötige XML-Struktur und auch die notwendigen Thumbnails.

Hört sich doch gut an oder? Bilder hochladen, Datensatz anlegen und dann die neue Galerie bestaunen! Das hört sich nicht nur super an, sondern ist in der Praxis auch super komfortabel!
Einziges Problem: wie kriege ich prof_slideshowpro dazu genau das zu tun?! Und genau das zeige ich Dir jetzt!

Installation
Zunächst benötigst Du eine SlideShowPro-Lizenz. Diese gibt es nicht zur Extension dazu, sondern hier: slideshowpro.net. Nachdem Du SlideShowPro Deinen Wünschen entsprechend angepasst hast, kannst Du die Datei “slideshowpro.swf” in das TYPO3 Webroot-Verzeichnis kopieren. Also auf die gleiche Ebene, auf der auch die index.php liegt. Alle anderen Verzeichnisse haben bei mir nicht funktioniert!

Dann solltest Du die Extension installieren. Entweder über das Extension Repository von TYPO3 mit dem Extensionkey “prof_slideshowpro”, oder aber als Download von typo3.org.

Bis hier her war noch alles recht einfach. Sehen wir uns also die Konfiguration an!

Statische Templates einbinden
Zunächst fügst Du auf Deiner TYPO3 Root-Seite die beiden statischen Templates der Extension hinzu. Klicke dazu auf den Menüpunkt “Template” und wähle anschließend Deine Root-Seite aus. Wähle dann den Link “Click here to edit whole template record” und klicke auf “Enthält“. In dem Kasten “Statische einschließen (aus Erweiterungen)” fügst Du die beiden Templates “SlideShowPro swf object” und “SlideShowPro XML” hinzu. Speichern und fertig.

Statisches Template 1Statisches Template einfügen 2

Flashabfrage einbinden
Als nächstes bindest Du das nötige JavaScript für die Flashabfrage mit swfObject im TypoScript ein (Root-Seite):

page = PAGE
page {

includeJS {
 file100 = EXT:prof_slideshowpro/pi1/swfobject.js
 file100.type = text/javascript
}

Sysfolder anlegen
Als nächstes benötigst Du einen Sysfolder, der die Datensätze der Alben enthalten soll. Dazu legst Du einfach eine neue Seite vom Typ “Sysfolder” unterhalb Deiner Root-Seite an und nennst ihn z.B. Bildergalerien.

Um einen Datensatz anzulegen, klicke auf das Sysfolder-Symbol und wähle “neu“. Als Datensatz wählst Du “Albums” aus der Liste aus. Hier kannst Du nun alle Einstellungen für Dein Album vornehmen. Die einzelnen Punkte sollten eigentlich selbsterklärend sein.

Der Unterschied von “Image Select” und “Path Select” besteht darin, dass entweder einzelne Bilder ausgesucht und in ein Album aufgenommen werden (Image Select), oder ein Verzeichnis unterhalb des Fileadmins angegeben wird, in dem sich die Bilder befinden (Path Select). Nach dem Speichern sollte sich ein Album-Datensatz in Deinem Sysfolder befinden.

Album im Sysfolder anlegenAlbum anlegenSysfolder mit Datensatz

Plugins einfügen
Jetzt wird es Zeit die Seite für die spätere Bildergalerie und die XML-Struktur anzulegen. Fangen wir mit der Bildergalerie an. Erstelle an der gewünschten Stelle im Seitenbaum eine neue Seite, auf der die Galerie erscheinen soll. Als Seiteninhalt wählst Du “Plugin einfügen” und als Plugin “SlideShowPro“. Den Ausgangspunkt setzt Du auf den gerade angelegten Sysfolder. Ich bin mir an dieser Stelle nicht sicher, ob der Ausgangspunkt hier wichtig ist. Geschadet hats jedenfalls nicht!

Dann gehts mit der XML-Struktur weiter. Erstelle hierfür an beliebiger Stelle im Seitenbaum (ich rate dazu sie als Unterseite der Galerie anzulegen - ist übersichtlicher!) eine neue Seite und setze sie auf “Im Menü verbergen“. Als Seiteninhalt wählst Du wieder “Plugin einfügen” und als Plugin “SlideshowPro XML“. Den Ausgangspunkt setzt Du auf den angelegten Sysfolder.

Plugin SlideShowProPlugin SlideShowPro XML

param.xml anpassen
Jetzt hast Du es fast geschafft! Der letzte Punkt ist die Anpassung der Datei param.xml. Dort versteckt sich ebenfalls ein Pfad zur XML-Struktur für die Bilder! Du findest die Datei im Verzeichnis ”typo3conf/ext/prof_slideshowpro/pi1/“. Suche in der Datei den Eintrag “xmlFilePath” und ändere den Wert auf den Pfad zu Deiner gerade angelegten XML-Seite. Das sollte dann etwa so aussehen:

xmlFilePath=http://www.deine-domain.de/index.php?id=43&type=107

Wobei Du die ID mit der Seiten-ID Deiner Galerieseite ersetzen musst. Das “&type=107” sorgt dafür, dass Deine XML-Struktur sauber ausgegeben wird, ohne das normale Template drumherum, wie es bei einem Inhaltselement sonst der Fall wäre.

Wenn Du die geänderte param.xml gespeichert und ersetzt hast, solltest Du noch den FE-Cache löschen. Wenn Du jetzt die Seite mit der Galerie aufrufst, sollte sie auch mit den Bildern angezeigt werden.

Hats geklappt? Glückwunsch!
Wenn nicht, nochmal alles überprüfen, Kommentar schreiben oder hier nachfragen!

Fazit
Leider klappt die Installation nicht so einfach, wie in der Doku versprochen. Doch meiner Meinung nach lohnt sich der Konfigurationsaufwand auf jeden Fall, weil prof_slideshowpro einem später viel Arbeit abnimmt und die Galerieverwaltung ziemlich komfortabel macht.

Was meinst Du dazu? Hat Dir die Anleitung geholfen? Hast Du noch Fragen oder funktioniert irgendwas nicht? Schreib doch einfach einen Kommentar ;-)

Weitersagen: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Webnews
  • MisterWong
  • Y!GG
  • TwitThis

Tags: , , , , , ,

31 Kommentare zu “prof_slideshowpro Tutorial - SlideShowPro Extension für TYPO3”

  1. Moin Tim!
    Cool, die passende Extension zu dem Teil kannte ich noch gar nicht.
    TYPO3 4.2.1, ich hoffe das ist gepatcht. :D

  2. Yup, immer diese leidigen Updates… Never change a running System :-D

    Aber hast Recht, sollte ich mal tun!

  3. Lässt sich das auch irgendwie dynamisch lösen? Für ein Kundenprojekt werden verschiedene Galerien auf verschiedenen Seiten benötigt und so wie ich das rausgelesen habe mit der Anpassung der param.xml, geht das nur einmalig (also nur für eine Seite) oder?

    Habe es noch nicht installiert, daher die evtl. doofe Frage.

    Vielen Dank im Voraus.

  4. Die Frage hab ich mir auch schon gestellt…
    Ich bin mir allerdings nicht sicher, von wo aus die param.xml referenziert wird. Aus der Flash-Datei oder doch über TYPO3?

    Konnte bisher auch im Quelltext der Extension noch nichts dazu finden…

  5. Also das, was man im Manual liest, ist echt für den Allerwertesten.

    All SlideshowPro settings are available to edit in pi1/param.xml

    Dann kann ich mir eine Extension effektiv auch schenken. :-/
    Ich werde noch wahnsinnig, keine Galerie-Extension ist wirklich ausgereift und wenn doch, dann kann es keine Slideshow oder hat andere Konzepte. *grmpf*

  6. Ich habe gerade in einer österreichischen UG gelesen, dass es durch eine Änderung im DB-Query in der Class möglich wäre, die PID mit zu übergeben.

    Mal testen, vielleicht lässt es sich ja doch noch einigermaßen nutzen.

    Das soetwas fehlt ist allerdings echt fatal. Max. 1 Seite … man man man.

  7. Hm,

    also entweder liegt es daran, dass ich die Trial nutze oder irgendwas habe ich noch nicht kapiert aber ich krieg keine Bilder angezeigt, noch generiert er mir irgendwelche Thumbnails.

    Kann das mal jemand testen, bei dem das mit der Vollversion funktioniert, ob das beim Austausch mit der Trial fehlschlägt?

    Bevor ich die $39 in die Luft puste …

  8. Mit der Trailversion von René wurde bei mir ebenfalls keine Galerie angezeigt!
    Ob es an der Trail liegt oder am Export weiß ich nicht… Gibt es noch weitere Trail-Beschränkungen außer der Bildbegrenzung?

  9. Also selbst mit der Vollversion, die ich mir jetzt zähneknirschend gekauft habe, ging es zuerst nicht.

    Ich konnte das Problem allerdings auf die loader.swf eingrenzen, die bei der Extension mit bei ist.

    Wenn ich den Aufruf von swfObject entsprechend auf die slideshowpro.swf ändere, dann lädt er die Bilder.

    Insgesamt ist das doch alles sehr wackelig.

  10. Hallo,
    ich hab mir mal diese Extension installiert.
    Soweit ich das sehe kann man im Originalzustand damit nur auf jeder Seite die gleichen Bildergallerie anzeigen.
    Ich denke allerdings, daß sich das mit erträglichem Aufwand so ändern lässt, daß für jede Seite eine eigene Gallerie möglich wird.

    Was ich noch nicht gefunden habe ist wo ich einen möglichen Key eintrage um nach Kauf die Beschränkungen (nur 3 Bilder) der Demoversion aufzuheben.

    Oder gibts dann eine neue .swf Datei ?

  11. Mit der Vollversion erhält man bei SlideShowPro keinen Key. Der Unterschied gegenüber der Trailversion ist, dass beim Galerie-Export eine “frei” SWF-Datei erzeugt wird. Du müsstest dann Deine bestehende slideshow.swf mit der neuen ersetzen.

  12. Hy,
    habe die extension aus dem Repository geladen, installiert und sehe im Backend keine statischen Templates die ich einbinden kann. Das scheint wohl an der Version (1.1.1) zu liegen…
    Weiß jemand Rat?

    Gruß Artur

  13. Hey Artur,

    meine Beschreibung aus diesem Artikel bezieht sich leider auf die Vorversion der Extension…
    Ich hatte bisher noch keine Zeit mir die neue Version genauer anzusehen… Ich kann nur so viel sagen: laut Anleitung klappt die Installation auch diesmal nicht!

    Im Repository kannst Du Dir aber normalerweise auch die Vorversion runterladen, die mit meiner Anleitung hier funktioniert…

    Bis später
    Tim

  14. Hi, Tim-Oliver,

    Besten Dank für Ihre Mühe, alles zu testen und das Tutorial dazu zu schreiben. Sie sind auch der einzige,der dies - bezüglich SlideShowPro for Flash - gemacht hat!!! Grossartige und mega nützliche Arbeit haben Sie gemacht!!! Ultra Dank, aber… wie Sie selbst erwähnen, haben Sie die ältere Version der “prof_slideshowpro” - Extension benutzt… und diese - nehme ich an - ist die “prof_slideshowpro v1.0.3″, nicht wahr? Diese Version ist aber nirgendswo im Web zu finden!!! Komisch, nicht?! Wäre’s Ihnen möglich mir dieser älteren version zu senden? Die neu “prof_slideshowpro v1.1.1″ funktioniert realy nicht!!! Das Problem beginnt schon mit dem Hindernis, das Artur Jendrysik oben erwähnte! Nämlich, dass Keine statischen Templates (“SlideShowPro swf object” und “SlideShowPro XML”) unter “Include” in Typo3 zu sehen/finden sind!!! Ich werde gleich noch dem Autor des “prof_slideshowpro v1.1.1″ schreiben, und ihn bitten ein deutliches, benutzerfreunfliches Manuals dazu zu schreiben… Oder haben Sie News darüber?? Meine Meinung nach, fehlen Scripts in “prof_slideshowpro v1.1.1″.
    Auf Ihre rasche Antwort freue ich mich schon.
    Schöne Grüsse, Gloor

  15. @Gloor - vielen Dank für’s Lob! Und dann noch so förmlich ;-) Mein Tutorial basiert wirklich auf der v1.0.3! Du kommst eigentlich ganz einfach an diese Version ran:
    Wenn Du im Extensionmanager unter Import nach “slideshowpro” suchst, klickst Du in der Ergebnisliste NICHT auf das Installieren-Icon, sondern auf den Extension-Namen. Dann kannst Du oben links unter “SELECT COMMAND” die Version auswählen, die Du installieren möchtest…
    Merkwürdig ist, dass ich die v1.1.1 bei mir gar nicht mehr auswählen kann - da is bei 1.0.3 Schluss!?
    Viel Erfolg!

  16. Lieber Tim-Oliver,

    Besten Dank für d’rasche Anwort mit dem Versuch mir zu helfen und - klar, nachdem wir “uns jetzt kennen” - lassen wir d’ Förmlichkeiten auf d’Seite …
    Ich glaube leider, dass du mich nicht richtig verstanden hast…
    Ich besitze überhaupt nicht die “prof_slideshowpro v1.0.3″ - Extension!!! Weil - Wie oben gesagt - sie zurzeit NIRGENDS IM WEB zu finden ist!!!
    Also habe ich diese nicht auf meiner Harddisk und kann sie auch NICHT im Typo3 via Extensionmanager importieren!!!
    Deshalb habe ich bei dir nachgefragt, ob du so freudlich wärest mir d’“prof_slideshowpro v1.0.3″ - Typo3 Extension via Email zu senden oder sie evtl. irgendwo freistellen könntest ?!?
    Der Autor d’“prof_slideshowpro v1.1.1″ hat mir geschrieben, dass er erst zum nächsten Release ein klares, benutzerfreundliches Manual schreiben werde, da er jetzt keine Zeit habe… und wann wird das wohl sein… ???? Weist vermutlich nur er… I’werde aber diplomatisch weiter bei ihm nachfragen… Auf Defizite d’“prof_slideshowpro v1.1.1″, die ich ihm geschildert habe, hat er gar nicht reagiert… was bedeuten würde, dass tatsächlich Scripts fehlen … whatever… Ich wäre sehr, sehr dankbar falls du die d’“prof_slideshowpro v1.0.3″ - Typo3 Extension verfügbar machen würdest, so dass dein Tutorial Realität finden könnte.
    Herzlichen Dank im Voraus.
    Schöne Grüsse
    Gloor

  17. @Gloor - Doch doch, ich hab Dich schon richtig verstanden! Hast Du aus Deiner T3-Installation keinen Zugriff vom Extensionmanager auf das online Repository? Da kann man die Version wie beschrieben auswählen und installieren!

    Falls Du keinen Zugriff hast, gibt’s die v1.0.3 oben als Download!
    Viel Erfolg!

  18. Hallo Tim-Oliver,

    Besten Dank für den Download und für d’Hinweise!! Super!
    Es ist einfach schön zu sehen, dass sich Leute in den Open Source Communities unterstützen und gemeinsam nach Lösungen streben.
    Mega Dank für deine Mühe und Hilfe!
    Alles Gute und Dir auch viel Erfolg
    Mit besten Grüsse
    Gloor

  19. Hi,

    habe soweit alles auf meinen blog gepostet!
    besten dank!
    blog.ingeniumdesign.de

  20. Hi,

    auf der Suche für eine Lösung für die aktuelle Version (1.1.1) bin ich hier gelandet. Leider passte die Anleitung natürlich nicht. Aber jetzt habe ich es raus.
    Man kann komplett nach der Doku vorgehen, aber die XML-Dateien die man erzeugt MÜSSEN zwingend auf “.xml” lauten (das haben mehrere Galerien als Voraussetzung).
    Wenn man RealURL benutzt, dann muss man das dort definieren:
    ‘fileName’ => array(
    ‘defaultToHTMLsuffixOnPrev’ => true,
    ‘index’ => array(
    ‘params.xml’ => array(
    ‘keyValues’ => array(
    ‘type’ => 108,
    ),
    ),
    ‘images.xml’ => array(
    ‘keyValues’ => array(
    ‘type’ => 107,
    ),
    ),
    ),

    Bei mir läuft es jetzt einwandfrei. Auch mit der Trial-Version.

    Gruß,

    Michael

  21. @Michael
    Vielen Dank für die Info! Das heißt also, dass die Doku auf typo3.org doch funktioniert bei der 1.1.1?!
    Werd ich mal testen!

  22. @Tim-Oliver - danke für die vielen Tipps hier und das Tutorial
    @Michael - Danke für deinen Hinweis bezüglich Realurl ohne diesem Tipp hätte ich meine slideshow nicht zum Laufen gebracht. Ich kann damit bestätigen, dass slideshowpro in der Version 1.1.1 genau so einfach wie in der Extensionbeschreibung angegeben, zu installieren ist - realurl_conf noch lt. Michael bearbeiten.

    Was ich noch nicht geschafft habe: Meine Bilder werden einer variablen Reihenfolge geladen (die Bildbezeichnung ist aber img001, img002…). Woran kann das liegen? (Ich habe contentOrder = Sequential)

    Beste Grüße Roland

  23. @Roland:
    hast Du Dir schonmal die generierte “images.xml” angesehen? In welcher Reihenfolge tauchen die Bilder dort auf?

  24. Hallo Tim-Oliver,

    wo finde ich die images.xml? Ich hätte schon Ausschau gehalten, aber kann diese nicht entdecken …

  25. @Roland:
    Die “images.xml” wird durch TYPO3 erzeugt! Für die Seite mit Deinem SSP-Plugin wir ein weiterer Pagetype definiert. Standard is da wohl Type 107.
    Wenn Du also die Galerieseite aufrufst und an die URL “&type=107″ anhängst, erhälst Du die erzeugte XML Struktur…

  26. Hallo nochmals ;-)

    danke, so konnte ich in die images.xml Einblick nehmen. Die Bilder werden echt in einer durcheinander gewürftelten Reihenfolge (beliebig???) gelistet. Die Frage ist nun: wie kann ich das ändern?
    Hast du eine Idee? Danke in jedem Fall für die bisherige Unterstützung.

  27. Hi Tim-Oliver,

    du hast doch die Sliedshowpro im Einsatz? Version 1.0.3. ?
    Wie ist es hier mit der Reihung der Bilder, werden die nach Namen gereiht und passt hier die XML

  28. @Roland:
    aus dem Kopf weiß ich das eben nicht genau. SSP nimmt die Bilder eigentlich immer in XML-Reihenfolge. Außer es gibt einen Random-Parameter oder sowas…

    Da die XML dynamisch von TYPO3 bzw. PHP erzeugt wird, könnte auch ein Blick in die jew. Funktion helfen…

  29. Hallo Tim,
    wollte Deine Anleitung auch testen und habe mir die Testversion heruntergeladen. Ich denke ich habe auch alles soweit so gemacht wie beschrieben. Bei mir bleibt aber im frontend das Feld mit der Flasggalerie schwarz, Wenn ich mir die angelegte Seite ssp_xml anschaue sehe ich Die richtige Anzahl von Bildsymbolen (keine bilder).
    Hast Du eine Ahnung was ich noch falsch mache?

  30. Hey Marc,
    ich gehe mal davon aus, dass irgendein Pfad nicht passt. Entwerder zur params.xml, zur SWF-Datei oder zu den Bildern… das würd eich nochmal genau checken

  31. Danke für den klasse Ansatz. Ich denke damit kann man jetzt endlich weiterkommen. Grüße aus Kassel.

Schreibe ein Kommentar