Grafiken mit TypoScript zusammenbauen und in Marker legen

Wer schon mal versucht hat, eine Homepage zu bauen, welche z.B. unterschiedliche Header-Grafiken, aber immer das Logo an derselben Stelle und dazu noch einen beliebigen Text an einer anderen haben sollte, kennt das Problem. Man braucht ein Bildbearbeitungsprogramm, ein Script oder sonst etwas, um diese Grafik immer sauber zusammenzubauen.

Einfacher ginge es natürlich, wenn uns das das Typo3 abnähme. Und das ist leichter als man denkt. In meinem Beispiel arbeite ich mit dem Marker GRAFIK Das Besondere daran, durch ein Extension Template kann ich diesen für Zweige der Homepage wieder überschreiben. Unterschiedliche Hintergrundbilder sind so nämlich auch kein Problem:

marks.GRAFIK = IMG_RESOURCE
marks.GRAFIK.file = GIFBUILDER

Beginnen wir damit, den Marker als Bild anzulegen:

marks.GRAFIK.file {
XY = 930,100

Gleich zum Anfang legen wir seine Größe fest: Breite, Höhe. Jetzt beginnen wir ihn schichtweise zu belegen (10,20,30..)

10 = IMAGE
10.file = fileadmin/templates/theme/images/wolken.tif

Erste Schicht: das Hintergrundbild:

20 = TEXT
20.text.data = DB:pages:79:subtitle
20.align = right
20.fontFile = fileadmin/templates/theme/images/verdanai.ttf
20.fontSize = 23.5
20.fontColor = #F4F4F4
20.niceText = 1
20.offset = 0, 100

Etwas länger ist die Textschicht. Als Text wird das Element subtitle von der Page mit der ID 79 gezogen, es folgt die Ausrichtung, der Pfad zum Fonts File, die Schriftgröße, Farbe, niceText für schönere Darstellung und dann das Wichtige,
der offset, welcher die Position angibt.

Jetzt können wir z.B. auch ein Logo an immer gleicher Stelle einbauen:

30 = IMAGE
30.file = fileadmin/templates/theme/images/web-tec.png
30.offset = 5, 15
}

Hier noch mal das Ganze am Stück:

  marks.GRAFIK = IMG_RESOURCE
  marks.GRAFIK.file = GIFBUILDER
  marks.GRAFIK.file {
  XY = 930,100

  10 = IMAGE
  10.file = fileadmin/templates/theme/images/wolken.tif
  20 = TEXT
  20.text.data = DB:pages:79:subtitle
  20.align = right
  20.fontFile = fileadmin/templates/theme/images/verdanai.ttf
  20.fontSize = 23.5
  20.fontColor = #F4F4F4
  20.niceText = 1
  20.offset = 0, 100
  30 = IMAGE
  30.file = fileadmin/templates/theme/images/web-tec.png
  30.offset = 5, 15
  }

Schreibe einen Kommentar Antworten abbrechen