Shadow

Dynamisches CSS mit TYPO3-Marker

22.11.2010 TYPO3-Tutorial

Hier möchten wir in einem kurzen Tutorial zeigen, wie sich ein CSS-File in TYPO3 dynamisch generieren lässt.

Wir möchten dies am Beispiel einer dynamischen Hintergrundgrafik zeigen. Die Ausgangslage war folgende: Auf jeder Seite soll (unter Recourcen) eine Grafik hoch geladen werde können, welche dann mittels GIFBUILDER und einer definierten Maske neu gerecht werden soll. Dieses Bild wiederum soll dann mittels CSS auf der Seite eingebunden werden.

Um diese Aufgabe lösen zu können, haben wir uns entschieden ein dynamisches CSS zu erstellen, in welchem ein Marker ###BACKGROUNDIMAGE### mit dem generierten Bild ersetzt wird.

Folgendes TypoScript war das Ergebnis:

TypoScript

# Variablen definieren
temp.backgroundImage = COA
temp.backgroundImage {
	#Bild
   	10 = IMG_RESOURCE
   	10 {
   		file = GIFBUILDER
   		file {
     		XY = 423,825
     
     		# Bild
     		10 = IMAGE
     		10.file.import = uploads/media/
     		10.file.import.data = levelmedia: -1, slide
	         10.file.import.listNum = 0
		    10.file.width = 423
		    10.offset = 0,0
		    
		    # Maske
     		20 = IMAGE
     		20.file.import = uploads/media/
     		20.file.import.data = levelmedia: 0
		20.file.import.listNum = 1
		20.file.width = 423   
		20.offset = 0,0
   		}
   	}
}

PageUid = TEXT
PageUid {
  value = {page:uid}
  insertData = 1
}

# Page-Object "css"
css = PAGE
css{
	typeNum = 1286539072

	config {
		disableAllHeaderCode = 1
		additionalHeaders = Content-type: text/css
		xhtml_cleaning = 0
		admPanel = 0
	}
		
  	10 = TEMPLATE
  	10 {
   		template = FILE
    	template.file = fileadmin/templates/css/dyncss.css
  	}
  
	10.marks{
		BACKGROUNDIMAGE < temp.backgroundImage
	}
}    

Erläuterung zum obigen Script:

# Variablen definieren

Als erstes wird das Bild generiert mittels GIFBUILDER und den Bilder die über Page > Resource hoch geladen werden. Dann wird mit "PageUid" die aktuelle ID das Seite ermittelt, von welcher das PAGE-Objekt aufgerufen wird. Diese Variable brauchen wir dann weiter unten für die Verlinkung des generierten "Files".

# Page-Object "css"

Als nächstes kommt das PAGE-Objekt an die Reihe. Wir nannten es "css" und haben alle unnötigen Header-Daten entfernt (disableAllHeaderCode = 1) und den Content-Type "text/css" definiert. Als TEMPLATE wird ein (reales) CSS-File verlinkt.

Als letztes muss nur noch der Marker definiert werden. Bei unserer Verwendung hiess der BACKGROUNDIMAGE und wurde folgendermasse auch im oben verlinkten CSS-File (dyncss.css) eingefügt:

CSS (dyncss.css)

body{
	background: url('###BACKGROUNDIMAGE###') no-repeat;
}

Jetzt haben wir das generierte CSS-File und die generierte Hintergrundgrafik. Zum Abschluss binden wir das Objekt mit folgendem TypoScript noch in den HTML-Header der Seite ein:

page.headerData.1286539072 = COA
page.headerData.1286539072.10 = HTML
page.headerData.1286539072.10.value = <link rel="stylesheet" type="text/css" href="index.php?id=

page.headerData.1286539072.20 < PageUid

page.headerData.1286539072.30 = HTML
page.headerData.1286539072.30.value = &type=1286539072" />