Dynamische CSS erzeugen aus Mediafeld-Daten

Folgender TypoScript-Code kommt zum Einsatz, wenn Sie eine dynamische CSS erzeugen wollen aus einer Datei im Media-Feld einer Seite. Konkret würde dies in diesem Beispiel folgenden Effekt haben:

Ein DIV mit einem Hintergrundbild soll auf jeder Seite angezeigt werden. Jedoch nur, wenn eine Datei als Hintergrundbild hinterlegt wurde. Sonst wird das DIV nicht angezeigt.

css = PAGE
css {
  typeNum = 22
  config {
    additionalHeaders = Content-type: text/css
    disableAllHeaderCode = 1
  }
  stdWrap.required = 1
  stdWrap.wrap = |
  10 = TEXT
  10.value (
    .content_header_pic {
  )
  20 = TEXT
  20.data = levelmedia: -1
  20.listNum = 0
  20.wrap = background: url('uploads/media/|');
  30 = TEXT
  30.value (
    border-top: 8px solid #0D337A;
    height: 105px;
    width: 100%;
    }
  )
  30.if {
    isTrue.data = levelmedia: -1
  }
}

Und die dynamisch generierte CSS-Datei im Header-Bereich natürlich noch aufrufen:

page = PAGE
 
page {
  headerData {
    16 = TEXT
    16.dataWrap = <link rel="stylesheet" type="text/css" href="index.php?id={field:uid}&type=22" />|
  }
}

Get Shareaholic

Über den Autor

Dieser Beitrag wurde von Oliver Schlöbe verfasst. Er arbeitet als Web- und (TYPO3-)-Entwickler, schreibt redaktionell über Windows Vista/ Windows 7, ist aktives Mitglied bzw. Administrator oder Moderator in diversen Webforen, darunter die TYPO3- und WordPress-Communities, und sammelt seine bisherigen Erweiterungen für diverse Systeme unter http://extend.schloebe.de/
Bei Fragen nutzen Sie die Kommentare oder wenden Sie sich an info@typo3.schloebe.de.