thumbnail

Generiert ein Vorschaubild

TAG

<wsl:thumbnail src="" />

Attribute

src *
Pfad des Imagefiles, aus dem das Thumbnail generiert werden soll
srcAlt
Alternatives Bild, falls das angegebene Bild nicht existiert
height
Höhe des Thumbnails in Pixel
width
Breite des Thumbnails in Pixel
alt
Alternativtext
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
cut
Auszuschneidender Bereich durch | getrennt. (Linke Position|Obere Position|Breite|Höhe)
cutLeft
Linke Position beim Ausschneiden
cutTop
Obere Position beim Ausschneiden
cutWidth
Breite beim Ausschneiden
cutHeight
Höhe beim Ausschneiden
cryptPath
Gibt an, ob der Bildpfad verkryptet werden soll
useTransparency
Falls keine Transparenz benutzt werden darf, muss der Wert auf no stehen
backgroundColor
Falls die Hintergrundfarbe definiert werden soll (z.B. #fcfcfc)
hd
Falls ein HD-Bild generiert werden soll
quality
Falls die Qualität bei JPG-Bildern reduziert werden soll (0-100)
colorspace
Falls das Bild in Graustufen ausgegeben werden soll
srcHover
Falls neben einem Graustufenbild noch ein Farbbild beim Mouseover angezeigt werden soll
filenameOnly
Dateiname (ohne Endung) des generierten Bildes
copyrightText
Copyright Text
additionalMinWidth
Maximale Bildbreite bei minimaler Bildschirmbreite
allowEnlargement
Falls ein Bild nicht vergrößert werden darf

Ü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.
 

Entwicklerbereich Weblication® CMS - © Scholl Communications AG