thumbnail

Navigation

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

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]

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)

[|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

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

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