tt_news Datum graphisch im Web 2.0 Stil rendern

61 Kommentare | Rubrik: Module

Viele Blogs stellen das Datum eines Eintrags graphisch aufbereitet im Web 2.0 Stil dar. Mit folgendem Modul kann man tt_news auch ohne die Typo3 Blog Extensions dazu bringen das Datum graphisch im Web 2.0 Stil zu rendern.

Datum der News im Web 2.0 Stil

Wer kennt das nicht, den neidischen Blick auf viele Blogs, die das Datum wunderbar graphisch aufbereitet im Web 2.0 Stil darstellen. Schnell kommen auch die Anfragen von Kunden, ob man so etwas nicht auch für die News auf der eigenen Website einsetzen kann. Die Umsetzung ist mit der Typo3 Extension tt_news relativ einfach. Man benötigt lediglich eine funktionsfähige Installation von tt_news und den im Template gesetzten Marker für die Anzeige des Datums. Den Rest kann man einfach mit dem folgenden TS erledigen.

Das folgende TS zum graphischen Rendern des tt_news Datums ist reichlich kommentiert. Zusätzlich zum Skript wird noch eine Schriftdatei im ttf-Format benötigt und ein Web 2.0 Icon als Kalenderblatt für den Hintergrund. Beide Dateien werden im Dateisystem z.B. im fileadmin-Verzeichnis von Typo3 abgelegt und im TS referenziert.

Zum Testen steht am Ende des Artikels ein Kalenderblatt als Beispiel zum Download zur Verfügung. Im Internet sind aber auch noch viele weitere frei Web 2.0 Graphiken verfügbar, die verwendet werden können. Hierzu müssen im TS lediglich die Größen der Graphik sowie die Ausrichtung der Schrift angepasst werden. Gleiches gilt auch für die Verwendung einer anderen Schriftart, als die im Beispiel verwendete Arial.

Das TS verwendet den GIFBUILDER, um das Datum der tt_news zu rendern. Hierzu muss auf dem Server ImageMagick installiert sein. Ist es nicht möglich etwas auf dem Server zu installieren, kann auch die statisch komplierte Version von ImageMagick verwendet werden.

Die weitere Darstellung und Positionierung der Datumsgraphik erfolgt über das Template der tt_news und per CSS. Ein Beispiel bietet das Bild rechts.

plugin.tt_news {
 displayList {
  date_stdWrap.strftime >
  date_stdWrap.cObject = IMAGE
  date_stdWrap.cObject.titleText.field = tile
  date_stdWrap.cObject.altText.field = title
  date_stdWrap.cObject.file = GIFBUILDER
  date_stdWrap.cObject.file {
   # Groesse des Icons
   XY = 100, 100
   # Format, wird nichts angegeben wird eine 
   png Graphik erstellt
   format = jpg
   # JPG Bildqualitaet
   quality = 95

   #Daten fuer das Hintergrundbild
   10 = IMAGE
   # Pfad zum Hintergrundbild
   10.file = fileadmin/kalender-icon.jpg

   #Daten fuer den Tag
   20 = TEXT
   #Das Datumsfeld der tt_news verwenden
   20.text.field = datetime
   #Aus dem Datumsfeld wird nur der Tag verwendent
   20.text.date = d
   #Pfad zur Schrift (ttf)
   20.fontFile = fileadmin/arial.ttf
   #Schriftgroesse
   20.fontSize = 40
   #Schriftfarbe
   20.fontColor = #ffffff
   #Abstand von: links, oben
   20.offset = 0,65
   #Schrift formatieren
   20.antiAlias = 1
   20.niceText = 0
   #Ausrichtung des Datums
   20.align = center

   #Daten fuer Monat und Jahr
   #die Einstellungen vom Tag wiederverwenden
   30 < .20
   #Monat als Abkürzung und vierstelliges Jahr
   30.text.date = M.  Y
   #Schriftgroesse
   30.fontSize = 12
   #Abstand von: links, oben
   30.offset = 0,80
  }
 }
}