Hier nun wie versprochen ein kleines Tutorial, wie man den TiltViewer mit Bildern aus tt_news-Datensätzen füttern kann.

1. TiltViewer herunterladen:
Zuerst den TiltViewer auf der Webseite von Airtight Interactive herunterladen und das Zip-Archiv entpacken.
**

  1. Jetzt müssen wir die swf-Datei auf der Seite platzieren** auf der der TiltViewer später erscheinen soll. Am einfachsten geht das mit SWFObject das es in hier auch als TYPO3-Extension gibt: rb_flashobject. Man kann das zwar auch von Hand machen, wichtig ist allerdings, dass man sowohl zusätzliche Parameter als auch zusätzliche Variablen an die SWF-Datei übergeben kann (letzteres geht zum Beispiel mit der Extension rlmp_flashdetection nicht, wenn ich das richtig gesehen habe). Also einfach die rb_flashobject installieren.

3. Als nächstes müssen wir einen "Flash Movie"-Datensatz erstellen.


Meine Einstellungen sind im Bild zu sehen. Weitere Einstellungen findet man hier: www.airtightinteractive.com/projects/tiltviewer/config_options.html
Wichtig ist der Pfad zur xmlUrl. Hier akzeptiert der TiltViewer leider keine Angaben vom Typ "index.php?id=21&type=3", sondern erwartet eine .xml Datei. Daher geben wir hier "gallery.xml" an und mappen das später auf unsere Skriptausgabe.

Jetzt platzieren wir das Plugin auf der Seite auf der der TiltViewer zu sehen sein soll und geben dort den eben erzeugten Datensatz an.

4. Jetzt kommen wir zu tt_news. Leider gibt tt_news die Bilder nur komplett aus mit dem "img"-Tag aus. Der TiltViewer erwartet allerdings nur den Pfad. Wir benutzen einen kleinen Hook um uns einen passenden Marker zu basteln. Das sauberste ist es nun eine kleine Extension zu basteln, die diesen Hook enthält. Auf die schnelle kann man das aber auch direkt in seine Installation reinbasteln.

Wir erstellen eine php-Datei "class.tx_fbtiltviewer.php".

`
<?php

class tx_fbtiltviewer {

/**

  • tx_fbtiltviewer::extraItemMarkerProcessor()
  • this function is called by the Hook in the function getItemMarkerArray() from class.tx_ttnews.php
  • @param array $markerArray the markerArray from the tt_news class
  • @param array $row the database row for the current news-record
  • @param array $lConf the TS setup array from tt_news (holds the TS vars from the current tt_news view)
  • @param tslib_pibase $pObj reference to the parent object
  • @return array $markerArray the processed markerArray
  • @see EXT:tt_news/pi/class.tx_ttnews.php->getItemMarkerArray()
    */
    function extraItemMarkerProcessor($markerArray, $row, $lConf, &$pObj) {

$xml = simplexml_load_string('' . $markerArray['###NEWS_IMAGE###'] . '');

$attr = $xml->img->attributes();

$markerArray['###NEWS_IMAGE_PATH###'] = (string) $attr['src'];

return $markerArray;
}
}

?>
`

und geben ins unserer ext_localconf.php an, dass diese Klasse als Hook für tt_news verwendet werden soll:

`
<?php
require_once(t3lib_extMgm::extPath('fb_tiltviewer').'class.tx_fbtiltviewer.php');

$TYPO3_CONF_VARS['EXTCONF']['tt_news']['extraItemMarkerHook'][] = 'tx_fbtiltviewer';
?>
`

**

  1. Jetzt müssen wir tt_news so konfigurieren,** dass XML rauskommt als Listenansicht rauskommt. Dazu brauchen wir ein neues Template, das die Daten so strukturiert wie der TiltViewer sie gerne hätte. An dieser Stelle wird auch unser im Hook befüllter Marker "###NEWS_IMAGE_PATH###" verwendet.

`

###NEWS_TITLE### ###NEWS_CONTENT###

`

Mit folgenden Zeilen habe ich tt_news konfiguriert. Den Code kann man auf der Seite in einem Extension-Template platzieren oder in die neue Extension als static Template und dann auf der Seite nur noch anziehen.

`
plugin.tt_news {
templateFile = EXT:fb_tiltviewer/res/tt_news.tmpl
limit = 1000
singlePid = 4

general_stdWrap >
general_stdWrap.stripHtml = 1

displayList {
subheader_stdWrap.crop = 0
subheader_stdWrap.stripHtml = 1
date_stdWrap.strftime = %d. %B %Y
image {
file.width = 400m
file.height = 400m
file.format = jpg
file.backColor = #FBE59C
file.quality = 95
imageLinkWrap = 0
imageLinkWrap.enable = 0
wrap >
stdWrap >
}
}
}
`
**

  1. Jetzt wollen wir noch einen neuen type definieren**, der uns nur unser xml ausspuckt:

`
page3 = PAGE
page3 {
typeNum = 3
config {
disableAllHeaderCode = 1
admPanel = 0
xhtml_cleaning = 0
additionalHeaders = Content-type:application/xml
}

10 < plugin.tt_news
10 {
code >
code = LIST
}
}
`

7. Nun muss nur noch gallery.xml auf die XML-Ausgabe gemappt werden. Ich habe das mit cooluri gemacht. Über .htaccess-Datei kann man die RewriteRule aber auch direkt angeben.

Und jetzt sollte das alles funktionieren. Wenn ihr das gemacht habt, dann hinterlasst doch bitte in den Kommentaren einen Link auf euer Werk :) Mein Ergebnis ist hier zu sehen.
Ein Hinweis noch: Wenn ihr gleichzeitig im Backend ein geloggt seid funktioniert es nicht, weil TYPO3 noch den Preview-Hinweis darunter rendert. Ist vielleicht nur eine Kleinigkeit, allerdings hab ich das auf die Schnelle nicht wegbekommen (jemand eine Idee?). Also am besten zum Testen ausloggen oder einfach mit einem anderen Browser testen.

Viele Spaß damit,

Fabrizio

Comments

This website uses disqus for the commenting functionality. In order to protect your privacy comments are disabled by default.

Enable Comments