[TYPO3-german] dynamisches Hintergrundbild in CSS

[Christian Stern]

Am 8. Februar 2014 12:08 schrieb Bernhard Prange <mail at bernhard-prange.de>:

> lib.backgroundImage =IMG_RECORDS
>
> lib.backgroundImage{
>
> file {
> import = uploads/media/
> import.data = levelmedia:-1, slide
> import.listNum = 0
> }
> }
> Das Lib Object kann ich auch via Fluid ausgeben. Der Pfad stimmt. Jetzt
> möchte ich das Ganze in die CSS einbinden mit:
>
>
> dynamicCssFile = PAGE
> dynamicCssFile {
> //the same typeNum is used to include the file, see below
> typeNum = 108
> config {
> disableAllHeaderCode = 1
> additionalHeaders = Content-Type:text/css
> }
> 10 = TEMPLATE
> 10 {
> template = FILE
> template.file = fileadmin/yourDynamicCSSFile.css
> marks.backgroundImage < lib.backgroundImage
>
> }
> }
> //now the parsed object is added to your page
> page.headerData = COA
> //use any "free" number
> page.headerData.809 = TEXT
> page.headerData.809.value = <link rel="stylesheet" type="text/css"
> href="./index.php?type=108" />
>
> von http://typo3.org/documentation/snippets/sd/76/
>
> Wenn ich marks.backgroundImage so anspreche, erhalte ich eine leere
> Ausgabe. Definiere ich es als TEXT Object, nicht als IMG_RECORDS erhalte
> ich den gewünschten Text. Woran liegt das? Hat jemand eine Begründung für
> mich, bzw. einen Workaround?


Ich hätte ja cssInline benutzt.

lib.backgroundImage = IMG_RESOURCE
lib.backgroundImage {
  file = fileadmin/dev/ein-ziemlich-lanager-dateiname-hattricklogo.png
}

page >
page = PAGE
page.cssInline {
  10 = TEXT
  10 {
    cObject < lib.backgroundImage
    wrap = html {background-image:url('/|');}
  }
}

So wird ab der Seite in der du das Setup einfügst ein zusätzliche CSS Datei
mit dem dynamischen Bild als Hintergrund eingefügt.

Alternative könntest du natürlich das CSS auch direkt in den Wrap des
Inhalts schreiben:

page.10 = COA
page.10 {
  1 = LOAD_REGISTER
  1.backgroundImage.cObject < lib.backgroundImage

  10 = TEXT
  10 {
    value = Irgendein Inhalt
    dataWrap = <div style="background-image:url('/{register:backgroundImage}
')">|</div>
  }
}