Shadow

TemplaVoilà: Hintergrundbild an Attribut übergeben

09.12.2010 Tutorial

In diesem Mini-Tutorial möchten wir Ihnen zeigen, wie Sie ein Hintergrundbild eines Div-Containers so in TemplaVoilà integrieren können, dass es von Redakteuren einfach gepflegt werden kann.

Das vereinfachte HTML-Template

<div class="ce_teaser">
	<div style="background:url(images/background.jpg)">
	</div>
</div>

Wir mappen nun das Hintergrundbild auf das Attribut "style" des inneren Div-Containers und definieren unter "Element Preset:" Image field.

Standardmässig würde TemplaVoilà jetzt an der gemappten Stelle den Quellcode für ein Bild inkl. den a-Tags ausgeben. Wir benötigen aber lediglich den Pfad zum generierten Bild, das  zudem noch umschlossen ist mit dem CSS-Attribut url(). 

Um das zu erreichen ist folgendes TypoScipt (einzupflegen unter "Data processing") nötig:

TypoScript

<TypoScript>
  10 = COA
  10.wrap=background-image: url(|);
  10.10 = IMG_RESOURCE
  10.10.file {
    import = uploads/tx_templavoila/
    import.field = field_content
    import.listNum = 0
    import.current = 1
    maxW = 305
    minW = 305
    maxH = 305
    minH = 305
  } 
</TypoScript>

Das war auch schon alles. Ab sofort kann das Hintergrundbild ganz einfach über ein Formular-Feld im FCE hoch geladen werden.

Weiterhin viel Spass mit TYPO3 wünscht das GreenBanana-Team