Erstellt ein HTML-Tag auf dem man im Front-End per Drag & Drop ein Hintergrund Bild aus dem Mediacake legen kann.
Dieser ViewHelper berücksichtigt gesetzte Fokuspunkte aus dem Mediacake. Im Responsive-Mode wird das Bild je nach Viewport in verschiedenen Größen ausgeliefert. Die Größenschritte hierfür können durch das Attribut 'responsiveSteps' auch genau festgelegt werden.
Attribute
| Name | Beschreibung | Type | default | required |
|---|---|---|---|---|
| picture | Hier wird das picture Attribut des cObjects übergeben. Der Wert muss immer {cObj.picture} sein | object | - | true |
| mode | Ist dieser Wert auf 'responsive' gestellt, wird bei großen Bildern eine kleinere Version des Bildes geladen. Bei 'original' wird das Original Bild angezeigt | string | - | false |
| responsiveSteps | Größenschritte manuell - durch Komma getrennt - festlegen (z. B. '500,1000,1500') | string | 600,1000 | false |
| class | Sollen zu den automatisch generierten CSS-Klassen zusätzliche Klassen angegeben werden, können diese hier mitgegeben werden | string | - | false |
| averageColor | Wenn hier 'false' angegeben wird, wird die Durchschnittsfarbe nicht auf das Bild gelegt | string | false | false |
Beispiel
html
<bh:tmpl.element object="{cObj}">
<div class="bhGroupcontainer {cObj.settings.style}">
<bh:property.backgroundImage picture="{cObj.picture}" property="picture">
<bh:tmpl.content section="groupcontainer" parent="{cObj.uid}" />
</bh:property.backgroundImage>
</div>
</bh:tmpl.element>