Objective
The goal of this article is to show which possibilities there are to generate dynamic images. The content container is accessed and URL parameters are considered.
The following is demonstrated:
- First, the system checks whether a content container exists. If not, the SVG is empty.
- The image from the content container is loaded into the SVG graphic, if one exists. To do this, the image ID from the content container is inserted in a replacement variable.
- The heading from the content container is placed over the screen, if one exists.
- The short text of the content container, if one exists, is placed above the image and below the heading. The short text is in an unformatted, multiline text field and is broken down into individual lines. The individual lines are then inserted in an SVG-compatible manner.
- If a URL parameter "box" exists and has the value "true", a semi-transparent rectangle is placed over the image and behind the text.
<?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>
