bh:picture

Universeller Image-Viewhelper für img-Tags und Backgroundimages mit oder auch ohne Property.

Diesem ViewHelper kann ein Bild-Objekt oder ein Property übergeben werden. Er rendert je nach übergebenen Parametern einen img-Tag oder ein Hintergrundbild.

Immer das richtige Bild

Über das tag-Attribut kann der gewünschte HTML-Tag angegeben werden und es wird entweder ein IMG-Tag oder der gewünschte HTML-Tag mit Hintergrundbild inkl. Hotspotfunktion ausgegeben.

Responsive

Alle Bilder - auch IMG-Tags - werden in den responsive Steps gerechnet und je nach Breite des Bildes und Pixeldichte des Monitors immer in der passenden Auflösung angezeigt. Bei Resize und Wechsel auf einen anderen Monitor wird das Bild - wenn nötig - automatisch ausgetauscht.
Dieses Verhalten kann durch mode="original" ausgeschalten werden. Dann wird immer das Originalbild ausgegeben.

WebP

Der Viewhelper gibt die Bilder - solange nicht durch das Attrbut format anders gewünscht - im Format webp wieder. Für ältere Browser, die webp nicht unterstützen, wird automatisch ein Legacy-Format (jpg oder png) ausgegeben.

Hotspot

Die Hotspotfunktion im Mediacake des Bakehouse greift nun auch bei img-Tags.

Externe Quellen

Dem Attribut picture können auch Pfade zu internen oder externen Quellen übergeben werden. Bei externen Quellen wird das Bild in den Webspace geladen und unter uploads/external/ gespeichert.

Attribute

Name	Beschreibung	Type	default	required
picture	Hier kann das picture Attribut des cObjects, ein Picture-Objeckt oder ein Pfad übergeben werden. Bei Übergabe eines Pfades wird das Bild, wenn es nicht bereits am Webspace liegt, heruntergeladen und unter uploads/external/ gespeichert.	mixed	empty	false
property	Wird hier ein Wert mitgegeben, so arbeitet der Viewhelper mit einem Property.	string	empty	false
mode	Wird hier 'original' mitgegeben, ist die Responsive-Funktion abgeschalten und es wird immer das Originalbild ausgegeben.	string	empty	false
format	Hier wird das Ausgabeformat der Bilder festgelegt.	string	webp	false
tag	Hier kann der gewünschte HTML-Tag angegeben werden. Ist der Tag nicht 'img', wird ein Hintergrundbild gerechnet.	string	img	false
width	Gewünschte Breite des Bildes (mit c wird zugeschnitten). Das Bild wird mit doppelter Breite gerechnet, damit auch auf hochauflösenden Displays ein scharfes Bild angezeigt werden kann.	string	empty	false
height	Gewünschte Höhe des Bildes (mit c wird zugeschnitten). Das Bild wird mit doppelter Höhe gerechnet, damit auch auf hochauflösenden Displays ein scharfes Bild angezeigt werden kann.	string	empty	false
responsiveSteps	Hier können eigene Breakpoints kommagetrennt angegeben werden.	string	100,600,1100,1920	false
averageColor	Hier kann durch Mitgabe einer Farbe in HEX, rgb oder rgba die Hintergrundfarbe bei den Hintergrundbildern überschrieben werden, oder durch false ausgeschalten werden.	string	empty	false
preventCrop	Mit true wird die Crop-Funktion im Bearbeitenmode des Properties eingeschalten.	boolean	true	false
hotspot	Hier kann mit false der Hotspot ausgeschalten werden	boolean	true	false
alt	Hier kann der alt-Tag befüllt bzw. überschrieben werden.	string	empty	false

Beispiel

html

<bh:picture picture="{cObj.picture}" property="picture" />  <bh:picture picture="{cObj.picture}" property="picture" tag="div">  </bh:picture>  <bh:picture picture="{item.firstpicture}" width="300c" height="300c" />