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

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)

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

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.