Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > IMAGE und FILE

TYPO3



Grafikverarbeitung in TYPO3

Bereits bei der Installation wurde darauf eingegangen, dass TYPO3 Grafikverarbeitung implementiert hat, dabei jedoch auf die externen Module GraphicksMagick oder ImageMagick zurückgreift. Die bevorzugten Grafikformate sind dabei GIF und PNG. Häufigste Anwendung ist sicherlich das Rendern von grafischen Menüs mit Rollover Effekten, die TypoScript sehr gut beherrscht und dem Webmaster einiges an Arbeit erspart mit der Erstellung und Implementierung der Grafiken und Programmierung der Mouseover Effekte.

Daneben ist TYPO3 aber auch in der Lage, in Inhaltselementen verwendete Grafiken zu verkleinern und auch Thumbnails automatisch zu erzeugen. Nachteilig dabei ist die recht langsame Erzeugung der Grafiken, die zwar prinzipiell nur bei der ersten Erstellung anfällt aber im laufenden Projekt auch durch Änderungen neu angestoßen werden kann. Die Erzeugung von grafischen Menüs kann dann schon mal 30 bis 60 Sekunden oder auch länger dauern, je nach Anzahl, Größe und Komplexität. Die Grafiken werden gecachet aber unter bestimmten Umständen neu erzeugt. Das hat dann zur Folge, dass im Zweifel der Endanwender durch Aufruf der Seite die Grafiken (neu) erzeugt und die Seite dann erstmalig eine entsprechend lange Ladedauer hat.

TypoScript IMAGE Objekt

Um eine Grafik zu erzeugen wird ein IMAGE Objekt angelegt.

decoMenuBG=IMAGE
decoMenuBG {
  file=fileadmin/images/menubg.gif
  file {
    height=25
    width=960
  }
  params=class="xyz"
  altText=Nur eine bedeutungslose Hintergrundgrafik
}

page.500 < decoMenuBG #Grafik in der Seite anzeigen

Durch den oben angegebenen Code wird ein Grafikobjekt angelegt mit dem Namen decoMenuBG. Dieses Objekt wird anschließend mehrfach verwendet und es handelt sich dabei um eine Hintergrundgrafik, die für das Navigationsmenü verwendet wird und durch einen Farbverlauf einen leichten 3D Effekt bietet. Sie ist Wirklichkeit nur 1 Pixel breit und wird durch die Breitenangabe beim IMAGE Objekt entsprechend gestretcht. Die Höhenangabe von 25 Pixel stimmt in diesem Fall. Die Grafik wird also in die Breite gezogen.

Über fileadmin wird sie in einen Image Order hochgeladen, der gestalterische Webseiten Bilder / Ressourcen enthält. Bei der Verwendung wird der relative Pfad unter fileadmin angegeben. Mit dem optionalen Parameter params kann man dem erzeugten Image weitere Eigenschaften geben, wie z.B. eine CSS Klasse zuweisen. Der Parameter altText weist optional eine Bezeichnung für die Grafik zu (Bedeutung), wenn der gewählte Dateiname nicht viel Information hergibt. Benutzt wird das für barrierefreien Zugang zu Webseiten, wenn z.B. ein Reader eine Seite für einen sehbehinderten Menschen vorliest.

Weitere Parameter sind hier zu finden:

http://www.typo3.net/tsref/cobject/image/

TypoScript GIFBUILDER Objekt

Das IMAGE Objekt ist an und für sich relativ "dumm" bzw. bietet relativ wenig Gestaltungsmöglichkeiten. Etwas interessanter wird die Benutzung des sog. GIFBUILDER, um eine Grafik zu erzeugen. Die bildet dann auch später die Basis für grafische Menüs und erlaubt das Rendern von Grafiken, die in mehreren Ebenen übereinandergelegt werden können. Bei den grafischen Menüs ist es meistens eine Hintergrundgrafik und dazu ein TEXT Element, GIFBUILDER Objekte können aber auch deutlich komplizierter aufgebaut werden.

# decorative line ;-)
decoLineOR=IMAGE
decoLineOR.file=GIFBUILDER
decoLineOR.file {
  XY=960,2
  offset=0,0
  backColor=#ef7942
  format=gif
}

page.510 < decoLineOR #Objekt anzeigen

Hier handelt es sich um ein Dekorationsobjekt, eine Linie in der Farbe orange, 2 Pixel hoch und 960 Pixel breit. Sowas kann man auch unter fileadmin/images laden und mit IMAGE anzeigen oder wie in diesem Beispiel selbst in TypoScript mit dem GIFBUILDER erzeugen. Statt einer Pfadangabe erfolgt der Verweis auf den GIFBUILDER und dieser hat verschiedene Optionen. Zunächst wird eine Zeichenfläche definiert, die mit XY in Breite und Höhe angegeben wird. Diese Größe hat anschließend das daraus erzeugte GIF, PNG oder auch JPG. Mit offset kann man für die zu rendernden Objekte noch einen Abstand von der linken, oberen Ecke in der zu erzeugenden Grafik angeben, so ähnlich wie ein padding in CSS. backColor definiert die Hintergrundfarbe, in diesem Fall orange. Die erzeugte Datei ist übrigens nur 84 Byte groß.

Als nächstes Beispiel einer der häufigeren Anwendungsfälle, das Rendern einer Grafik mit Text wie z.B. eine Navigationsgrafik. Der bereits erstellte Copyright Hinweis wird hier überarbeitet und grafisch etwas aufgepeppt und im gleichen Stil wie die Menüpunkte dargestellt.

copyRightIMG=IMAGE
copyRightIMG.file=GIFBUILDER
copyRightIMG.file {
  XY=960,25
  10 < decoMenuBG
  20=TEXT
  20 {
    fontColor=#d6e3e7
    fontFile=fileadmin/fonts/verdana.ttf
    fontSize=12
    niceText=1
    offset=960-[20.w]/2,16
    text {
      data=date:U
      strftime=%Y
      noTrimWrap=|(C)opyright | by Musterfirma|
    }
  }
}

page.520 < copyRightIMG #Objekt anzeigen

Zunächst wird die Größe der Grafik mit XY festgelegt, 960 Pixel Breite und 25 Pixel Höhe. Das bereits zuvor erzeugte Hintergrundgrafik Objekt decoMenuBG vom Typ IMAGE wird zuerst geladen (10). Danach wird ein TEXT Objekt erzeugt in Verdana, Schriftgröße 12 und Farbe gemäß Stylesheetvorgabe. für jedes Element kann ein eigener offset definiert werden. Hier soll der Copyright Hinweis genau in der Mitte erscheinen und die wird mit der Formel 960-[20.w]/2 berechnet. 20.w stellt die Breite der erzeugten Textgrafik dar. Außerdem wird diese noch um 16 Pixel nach unten verschoben, damit sie auch vertikal mittig vom Balken erscheint. Der Text selbst wird wie schon im Beispiel mit der Jahreszahl erzeugt und in einen Textstring verpackt.

http://www.typo3.net/tsref/gifbuilder/gifbuilder/

TypoScript FILE Objekt

Um Dateiinhalte in TypoScript auszulesen und zu verarbeiten, gibt es das FILE Objekt. Sinnvollerweise wird es auf Textdateien oder zumindest Datein im Textformat wie HTML oder XML Dateien angewendet. Zum Beispiel um statische oder von einem anderen Programm erzeugte Inhalte in die PAGE Ausgabe zu übernehmen.

FileContent=FILE
FileContent.file=fileadmin/template/main.html

page.999 < FileContent

Nach meinen Erfahrungen scheint das FILE Objekt nur auf Verzeichnisse und Dateien innerhalb und unterhalb von fileadmin zugreifen zu können. Die Angabe anderer Directories schlug regelmäßig fehl bzw. das Öffnen der Datei und Einlesen der Daten. Möglicherweise ein Sicherheitsfeature, möglicherweise kann man es auch irgendwo konfigurieren. Wer suchet der findet. :-)

Mehr Infos zum FILE Objekt:
http://www.typo3.net/tsref/cobject/file/

TypoScript TEMPLATE Objekt

Das Objekt TEMPLATE erlaubt die Verwendung von HTML Templates und dem Ersetzen von einzelnen Markierungen und Bereichen. Die einfachste Variante ist das Ersetzen von vordefinierten Feldern mit Content. Das folgende Beispiel ersetzt den Marker SEITENTITEL mit dem tatsächlichen Seitentitel (title). 

Dabei muss ein Marker immer mit drei Kommentarzeichen ### beginnen und auch enden. Das Feld muss also im Template geschrieben werden. Es ist Standard diese Feldbezeichner in TYPO3 in Grossbuchstaben zu schreiben, technisch wird jedoch zwischen Gross- und Kleinschreibung unterschieden und marks funktioniert auch mit Kleinbuchstaben oder gemischter Schreibweise. Sofern der Feldbezeichner mehrmals in einem Template auftaucht, wird er an allen Stellen gleichzeitig (mit einem Durchlauf) ersetzt.

FileContent=FILE
FileContent.file=fileadmin/template/main.html

FileTemplate=TEMPLATE
FileTemplate {
  template=FileContent
  marks.SEITENTITEL=TEXT
  marks.SEITENTITEL.field=title
}

page.999 < FileTemplate #Objekt anzeigen

Es können auch ganze Bereiche durch Platzhalter ersetzt werden. Sinnvoll ist dies um in einem Template einen "Muster" Inhalt gegen den gewünschten Content zu ersetzen. Dabei wird der Bereich zwischen zwei gleiche Feldbezeichner gesetzt, unten mit dem Namen MAINCONTENT. Es wird also der Bereich zwischen und ersetzt. Dabei kann der Feldbezeichner auch in Kommentaren stehen <!--    --> um diese im Muster Template optisch zu verstecken. In diesem Fall werden die Feldbezeichner inklusive Kommentare entfernt und mit dem gewünschten Inhalt (hier das gesamte CONTENT Element) styles.content.get ersetzt. subparts können mehrfach im Template verwendet werden und werden dann durch den gewünschten Inhalt ersetzt. Sie müssen aber immer paarweise vorhanden sein.

FileTemplate=TEMPLATE
FileTemplate {
  template=FileContent
  marks.SEITENTITEL=TEXT
  marks.SEITENTITEL.field=title
  subparts.MAINCONTENT < styles.content.get
}

page.999 < FileTemplate #Objekt anzeigen

Häufig werden auch nur Teilbereiche aus einem Template bearbeitet mit der Funktion workOnSubpart. Diese werden wie subparts definiert, können aber nur einmal sinnvoll auftauchen. Der subpart wird in diesem Fall aus dem Template herausgelöst und nur noch der Teil des Templates bearbeitet. Zum Beispiel kann bei einer vollständigen HTML Datei nur der BODY mit einem solchen DOCUMENT subpart bearbeitet werden.

FileTemplate=TEMPLATE
FileTemplate {
  template=FileContent
  marks.SEITENTITEL=TEXT
  marks.SEITENTITEL.field=title
  subparts.MAINCONTENT < styles.content.get
  workOnSubpart=DOCUMENT
}

page.999 < FileTemplate

Es gibt auch noch die Möglichkeit Pfade zu Ressourcen auf TYPO3 anzupassen, in dem relative Pfade automatisch auf das fileadmin Verzeichnis angepasst werden, ggf. auch separat für Bilder (img).

FileTemplate=TEMPLATE
FileTemplate {
  template=FileContent
  marks.SEITENTITEL=TEXT
  marks.SEITENTITEL.field=title
  subparts.MAINCONTENT < styles.content.get
  workOnSubpart=DOCUMENT
  relPathPrefix = fileadmin/
  relPathPrefix.img = fileadmin/img/
}

page.999 < FileTemplate


Weitere Details zu TEMPLATE hier:
http://www.typo3.net/tsref/cobject/template/


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...