Zielsetzung
Ziel dieses Beitrags ist es aufzuzeigen welche Möglichkeiten es gibt um dynamische Bilder zu generieren. Dabei wird sowohl auf den Content-Container zugegriffen als auch URL-Parameter berücksichtigt.
Es wird folgendes demonstriert:
- Zunächst wird geprüft, ob ein Content-Container vorhanden ist. Falls nicht ist das SVG leer.
- In die SVG-Grafik wird das Bild aus dem Content-Container geladen, falls eines existiert. Dafür wird die Bild-ID aus dem Content-Container in eine Ersetzungs-Variable eingefügt.
- Über das Bild wird die Überschrift aus dem Content-Container gelegt, falls eine existiert.
- Über das Bild und unterhalb der Überschrift wird der Kurz-Text des Content-Containers platziert, falls einer existiert. Der Kurz-Text liegt in einem unformatierten, mehrzeiligen Text-Feld vor und wird in einzelne Zeilen zerlegt. Anschließend werden die einzelnen Zeilen SVG-kompatibel eingefügt.
- Wenn ein URL-Parameter "box" existiert und den Wert "true" hat, wird ein halbtransparentes Rechteck über das Bild und hinter dem Text platziert.
<?xml version="1.0" encoding="utf-8"?>
<svg tal:condition="THIS/hasContentContainer" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 400" style="enable-background:new 0 0 800 400;" xml:space="preserve" >
<style type="text/css">
tspan {color:#FFF;font-size:20px;font-family:Arial, Helvetica;}
.headline{font-weight:bold;font-size:30px;}
</style>
<mask id="box">
<rect x="0" y="0" width="800" height="400" fill="white"/>
<rect tal:condition="equals:string:${REQUEST/box|string:false}/true" x="10" y="150" width="780" height="240" fill="#333"/>
</mask>
<image xlink:href="{$IMAGE:${structure THIS/getContentContainer/getAttributeByName/BILD/getValueRaw}}" tal:condition="THIS/getContentContainer/hasAttribute/BILD" style="overflow:visible;" width="800" height="400" x="0" y="0" mask="url(#box)"/>
<text id="t1" y="200">
<tspan x="30" class="headline" tal:condition="THIS/getContentContainer/hasAttribute/UEBERSCHRIFT">${structure THIS/getContentContainer/getAttributeByName/UEBERSCHRIFT/getValue}</tspan>
<tspan x="30" dy="2em"></tspan>
<tspan x="30" dy="1em" tal:condition="THIS/getContentContainer/hasAttribute/KURZTEXT" tal:repeat="line THIS/getContentContainer/getAttributeByName/KURZTEXT/getValue/separateByComma">${line}</tspan>
</text>
</svg>
