thumbnail

Generiert ein Vorschaubild

TAG

<wsl:thumbnail src="" />

Attribute

[PATH]
src *
Pfad des Imagefiles, aus dem das Thumbnail generiert werden soll
[PATH]
srcAlt
Alternatives Bild, falls das angegebene Bild nicht existiert
Integer
height
Höhe des Thumbnails in Pixel
Integer
width
Breite des Thumbnails in Pixel
String
alt
Alternativtext
String
mode
Darstellungsmodus [default|crop|cropTop|cropRight|cropBottom|cropLeft|embed|embedTop|embedRight|embedBottom|embedLeft|embedTopLeft|embedTopRight|embedBottomRight|embedBottomLeft|force]
default
Das Bild wird so weit verkleinert, dass beide Seiten in die Vorgabe passen und der ggf. entstehende Leerraum abgeschnitten wird. So kann es sein, dass eine Seite kleiner als angegeben dargestellt wird.
crop
Das Bild wird so weit verkleinert, dass eine Seite in die Vorgabe passt und die ggf. überstehenden Seiten abgeschnitten werden.
cropTop
Wie crop mit Ausrichtung oben
cropRight
Wie crop mit Ausrichtung right
cropBottom
Wie crop mit Ausrichtung unten
cropLeft
Wie crop mit Ausrichtung links
embed
Das Bild wird so weit verkleinert, dass beide Seiten in die Vorgabe passen und der ggf. entstehende Leerraum aufgefüllt wird.
embedTop
Wie embed mit Ausrichtung oben
embedRight
Wie embed mit Ausrichtung rechts
embedBottom
Wie embed mit Ausrichtung unten
embedLeft
Wie embed mit Ausrichtung links
embedTopLeft
Wie embed mit Ausrichtung oben links
embedTopRight
Wie embed mit Ausrichtung oben rechts
embedBottomRight
Wie embed mit Ausrichtung unten rechts
embedBottomLeft
Wie embed mit Ausrichtung unten links
force
Die Größe wird angepasst und das Bild ggf. verzerrt
String
cut
Auszuschneidender Bereich durch | getrennt. (Linke Position|Obere Position|Breite|Höhe)
Integer
cutLeft
Linke Position beim Ausschneiden
Integer
cutTop
Obere Position beim Ausschneiden
Integer
cutWidth
Breite beim Ausschneiden
Integer
cutHeight
Höhe beim Ausschneiden
[|1]
cryptPath
Gibt an, ob der Bildpfad verkryptet werden soll
[|no]
useTransparency
Falls keine Transparenz benutzt werden darf, muss der Wert auf no stehen
String
backgroundColor
Falls die Hintergrundfarbe definiert werden soll (z.B. #fcfcfc)
[|1]
hd
Falls ein HD-Bild generiert werden soll
String
quality
Falls die Qualität bei JPG-Bildern reduziert werden soll (0-100)
String
qualityHD
Falls die Qualität bei der HD-Darstellung von JPG-Bildern abweichend von der Standardqualität reduziert werden soll (0-100)
String
attributeHD
Z.B. srcset, falls kein JS unterstützt wird.
[|gray]
colorspace
Falls das Bild in Graustufen ausgegeben werden soll
[|color]
srcHover
Falls neben einem Graustufenbild noch ein Farbbild beim Mouseover angezeigt werden soll
String
filenameOnly
Dateiname (ohne Endung) des generierten Bildes
String
copyrightText
Copyright Text
Integer
additionalMinWidth
Maximale Bildbreite bei minimaler Bildschirmbreite
[|no]
allowEnlargement
Falls ein Bild nicht vergrößert werden darf
[|true]
useOrig
Falls das Originalbild ausgegeben werden soll
[|true]
useSizeAttributes
Falls die Größenattribute auch bei mode default genutzt werden sollen, statt die Größe zu ermitteln
String
extension
Abweichende Dateiendung des generierten Bildes
[|true]
savePictureData
Falls Bilder auch nach der Bereinigung in statischen Seiten verfügbar sein sollen (z.B. beim Newsletter)

Über dieses WSL-Tag wird ein Bild auf die gewünschte Große angepasst. Es wird nicht nur zur Erstellung von Vorschaubildern (Thumbnails) verwendet, sondern generell überall dort, wo Bilder skaliert werden sollen.

Die Skalierung der Bilder geschieht über verschiedene Modi, so dass diese je nach Einsatzzweck optimal dargestellt werden können.  Auch Bildausschnitte können über diese Funktion dargestellt werden, falls man nicht das gesamte Bild darstellen will. Das Standard-Bildelement in Weblication nutzt z.B. die gleiche Framework-Funktion wThumbnail::createThumbnail, wie das WSL-Tag.

Weitere Optionen, wie z.B. Hintergrundbild oder der Zielpfad können auch angegeben werden. Die Pfade werden so generiert, dass ein Bild nicht unnötig oft neu generiert werden muss und so der Server entlastet wird. Weblication generiert also immer einen von den Optionen abhängigen Bildpfad. Falls es in Ihrem Projekt notwendig ist, können Sie auch einen eigenen Pfad für das generierte Bild definieren. 

Bei JPEG Bildern können Sie zudem noch die Qualität der generierten Bilder einstellen, um so möglichst wenig Traffic bei gleichzeitig möglichst optimaler Bildqualität zu verursachen.

Beispiel: Bild über ein WSL-Tag im XSL-Template (z.B. standard.wDocument.php oder xxx.wFilelist.php) generieren

...
<wsl:thumbnail class="listEntryThumbnail" cut="" src="/baseAssets/img/bild-gruen.jpg" width="120" height="80" additionalMinWidth="" hd="1" lazyLoad="1" quality="90" mode="embed" alt="Bild" colorspace="" srcHover=""/>
...
Animierte Bilder (z.B. GIFs) verlieren die Funktionalität beim Generieren eines Vorschaubildes!
Im Bild-Element kann dies umgangen werden, indem dort die Auswahl auf "Originalgröße" gesetzt wird.