[TYPO3-german] Dynamische Bilder abhängig von der Seite

Fri Nov 24 13:52:02 CET 2006

Jonas Loepthien schrieb:
> Hallo Sebastian
> 
> Hatte gerade so eine Aufgabe.
> 
> http://customer.sylon.net/~erg/
> 
> (bei 'Über uns' habe ich ein Test-JPG eingebaut)
> 
> 
> Am besten geht das mit [PIDinRootline = xx]
> 
> Also ich hab im normalen CSS
> 
> #seitenkopf_bild {
> position: relative;
> height: 66px;
> background: #fff url(../bilder/seitenkopf_bild.jpg) no-repeat top left;
> }
> 
> Und im TypoScript:
> 
> [PIDinRootline = 35]
> page.headerData.100 = HTML
> page.headerData.100.value (
> 
> <!-- CSS für Seitenkopf-Grafik 'Über uns' -->
> <style type="text/css">
> 
> #seitenkopf_bild {
> background: #fff url(fileadmin/templates/bilder/seitenkopf_ueberuns.jpg)
> no-repeat top left;
> }
> 
> </style>
> )
> [end]
> 
> 
> Wenn du die Grafik nicht mit CSS als Hintergrundbild einbindest kannst
> du einen Marker setzen.
> 
> ###GRAFIK### (in der Designvorlage)
> 
> Im TypoScript:
> 
> temp.seitenkopf = IMAGE
> temp.seitenkopf.file = pfad zur Grafik
> 
> # Grafik für zweite Ebene
> 	
> [PIDinRootline = 35]
> temp.seitenkopf.file = pfad zur Grafik der zweiten Ebene
> [end]
> 
> page.10.marks.SEITENKOPF < temp.seitenkopf
> 
> 
> Gruss Jonas
Hi, ich würde mit body-ids arbeiten. Das hat den Vorteil, dass .css
Dateien vom Browsern gecached werden und der HTML-Code sauber bleibt.

temp.body = COA
temp.body {
  10 = TEXT
  10.field = title
  10.wrap = <body id="|">
}
page.bodyTagCObject < temp.body

So muss man in seiner CSS nur noch die verschiedenen Hintergründe
definieren:
body#Seite1 #seitenkopf {background: #fff url(pfad/zu/bild.jpg)}
body#Seite2 #seitenkopf {background: #fff url(pfad/zu/bild2.jpg)}
usw.

Natürlich kann man anstatt des titles auch andere Felder od. Konstanten
benutzen. So wie man mag. Ich hab es mit Konstanten gelöst, und den
css-code in einzelne stylesheets ausgelagert.

temp.body = COA
temp.body {
  10 = TEXT
  10.value = {$co.PageName}
  10.ifEmpty.cObject = TEXT
  10.ifEmpty.cObject.value = page
  10.wrap = <body id="|">
}

page.bodyTagCObject < temp.body

page.includeCSS {
  file99 = fileadmin/templates/css/{$co.PageName}.css
  file99.title = {$co.PageName}
  file99.media = screen
}

und in den Konstanten der Seiten dann:
co.PageName = seite1

Schöne Grüße
Patric