Scaleimage (SP-Tag)

Name

<sp:scaleimage> - Verkleinert Bilder

Syntax

<sp:scaleimage
   name="variable"
   scope="page"
   object="${myImageLink.link}"
   width="40"
   height="40"
   padding="on"
   background="0000FF"
   />

Beschreibung

Bilder die im IES abgelegt wurden, können mit Hilfe dieses Tags verkleinert werden (z.B. für Thumbnails). Dieser Tag kann sowohl im Eingabe- als auch im Ausgabemodus verwendet werden. Mit dem object-Attribut wird das zu verkleinernde Bild angegeben. Mit den Attributen width und height wird die Größe des Bildes definiert. Wird nur die Breite oder nur die Höhe angegeben, ergibt sich der Wert aus dem proportionalen Seitenverhältnis des Bildes. Die Daten des klein gerechneten Bildes werden in einem ScaleImage-Objekt abgelegt, das über den im Attribut name angegebenen Variablennamen erreichbar ist.

Für die Skalierung von Bildern gelten folgende Regeln:

Ein Bild wird immer proportional verkleinert. Das Seitenverhältnis des Bildes bleibt stets erhalten.
Bilder werden nicht vergrößert

Die Verkleinerung des Bildes kann in drei unterschiedlichen Modi erfolgen:

kein Padding (padding="off"): Mit den Attributen width und height wird die Größe für ein Bild definiert. Das Bild wird so verkleinert, dass es komplett in den angegebenen Rahmen passt. Hierbei ist es möglich, dass entweder die Höhe oder die Breite des verkleinerten Bildes kleiner als der definierte Wert ist. Soll z.B. ein 500x500 Pixel großes Bild auf 100x50 Pixel verkleinert werden, wird das verkleinerte Bild 50x50 Pixel groß sein. Sind die definierten Ausmaße größer als das Original, so bleibt das Bild unverändert.

Padding (padding="on"): Mit den Attributen width und height wird die Größe für ein Bild definiert. Das Bild wird so verkleinert, das es komplett in den angegebenen Rahmen passt. Hierbei ist es möglich das entweder die Höhe oder die Breite des verkleinerten Bildes kleiner als des definierten Wertes ist. In diesem Fall wird das Bild rechts und links, bzw. oben und unten mit einem Padding aufgefüllt. Die Farbe für das Padding wird mit dem Attribut background angegeben. Soll z.B. ein 500x500 Pixel großes Bild auf 100x50 Pixel verkleinert werden, wird das verkleinerte Bild 50x50 Pixel groß sein und erhält links und rechts einen 25 Pixel breiten Balken in der angegebene background-Farbe. Sind die definierten Ausmaße größer als das Original, wird das Bild mit der background-Farbe aufgefüllt, so dass in jedem Fall die definierte Größe erreicht wird.

Fit-Padding (padding="fit"): Mit den Attributen width und height wird die Größe für ein Bild definiert. Dabei wird das Bild soweit verkleinert, bis entweder die Höhe oder die Breite in den Rahmen passt. Dabei ist es möglich, dass entweder die linke- und rechte- oder ober- und unter-Seite über den Rahmen herausragen. Die überstehenden Seiten werden abgeschnitten um die angegebene Größe zu erreichen. Soll z.B. ein 500x500 Pixel großes Bild auf 100x50 Pixel verkleinert werden, wird das verkleinerte Bild 100x100 Pixel groß sein. Anschließend werden noch oben und unten 25 Pixel abgeschnitten um die angegebene größe von 100x50 Pixel zu erreichen. Sind die definierten Ausmaße größer als das Original wird das Bild mit der background-Farbe aufgefüllt, so dass in jedem Fall die definierte Größe erreicht wird.; Über die Optionen kann ein Focus-Point angegeben werden, der den Bildmittelpunkt für den Zuschnitt definiert. In diesem Fall werden die Kanten nicht gleichmäßig abgeschnitten sondern so, dass der Focus-Point möglichst die Mitte des zugeschnittenen Bildes definiert.

Im Padding und Fit-Padding Modus ist immer sichergestellt, dass die angegebene Bildgröße erreicht wird.

Dieser Tag verhält sich im In- und im Out-Modus unterschiedlich.

Out-Modus: Wird sp:scaleimage im Out-Modus betrieben, wird das verkleinerte Bild in einem Verzeichnis parallel zu dem Original abgelegt. Der Verzeichnisname besteht aus dem Dateinamen des originalen Bildes mit dem Zusatz .scaled (z.B. logo.jpg.scaled für ein Bild logo.jpg). Die Bilder werden während des Publizier-Vorgangs berechnet sowie jedes mal, wenn sich das Original geändert hat.

In-Modus

Wird sp:scaleimage im In-Modus betrieben, liegen die verkleinerten Bild zusammen mit dem Original in der BinDB des IES. Im In-Modus werden nicht alle angegebenen Bildgrößen berechnet, sondern nur bestimmte Größen, die in der BinDB definiert sind. In der BinDB sind z.B. die Größen 40,h40,w50,100 definiert. Dies bedeutet folgendes:

40: Bild wird mit einer Höhe und Breite von 40 Pixeln mit padding="off" berechnet
h40: Bild wird mit einer Höhe von 40 Pixel und einer Breite proportional zum Original mit padding="off" berechnet
w50: Bild wird mit einer Breite von 50 Pixel und einer Höhe proportional zum Original mit padding="off" berechnet
100: Bild wird mit einer Höhe und Breite von 100 Pixeln mit padding="off" berechnet

Wird nun ein Bild von 30x30 Pixel verlangt wird das 40-Bild verwendet. Wird ein 300x300 Pixel Bild verlangt, wird das 100-Bild verwendet. Der Sinn dabei ist, dass nicht eine sehr große Anzahl von Bilder berechnet und in der BinDB abgelegt werden soll. Die zurückgegebenen Bilder können auf das verlangte Maß vom Browser skaliert werden. Das Padding kann über CSS-Styles erfolgen.

Dieses Verhalten der 'Skalierungs-Schritte' kann über das Attribut scaleSteps="false" ausgeschaltet werden. Das ist aber nur in Ausnahmefällen empfehlenswert und kann sich negativ auf die Performanz des Systems auswirken.

Attribute

Name	Type	Required	Default	ab IES Version
`name`	Variable	Ja	None	2
`object`	Attribute	Nein	None	2
`width`	Expression	Ja und / oder `height`	None	2
`height`	Expression	Ja und / oder `width`	None	2
`padding`	Text	Nein	off (Achtung: anderer Default-Wert als bei spt:imp)	2
`background`	Text	Nein	FFFFFF	2
`scalesteps`	Condition	Nein	true, wirkt sich nur im In-Modus aus	2
`options`	String (Im JSON-Format)	Nein	None	2.11
`locale`	Locale	Nein	None	2
`scope`	Scope	Nein	request	2

name: Name der Variable für den Zugriff auf das ScaleImage-Objekt.

object: Original-Bild.

width: Breite des zu berechnenden Bildes.

height: Höhe des zu berechnenden Bildes.

padding: Der Wert "on" erzeugt Rahmen zur Auffüllung der Flächen um das Bild. Damit ist das resultierende Bild immer so groß. wie durch die Auflösung gefordert.

Der Wert "off" erzeugt keinen Rahmen zur Auffüllung der Flächen um das Bild. Damit ist das resultierende Bild unter Umständen kleiner als die geforderte Auflösung.

Mit "fit" wird der größtmögliche Ausschnitt aus dem Originalbild bzw. aus dem durch excerpt gewählten Ausschnitt gesucht, bei dem das Seitenverhältnis der geforderten Auflösung entspricht. Es wird kein Rahmen erzeugt, sondern das Bild in einer Dimension gegebenenfalls gekürzt.

Aufgrund von Abwärtskompatibilität wird auch der Wert "yes" (entspricht "on") und "no" (entspricht "off") unterstützt.

background

Hintergrundfabe für das Padding Numerisch oder als als HEX-Wert im RGB oder RGBA-Format.

Transparente Farben funktionieren nur bei PNG-Bildern.

::ffffff = weiß
::ffffff00 = transparent bei PNG, ansonsten weiß
::00000000 = transparent bei PNG, ansonsten schwarz
::rgb(255,255,255,0) = transparent bei PNG, ansonsten weiß
::rgb(255,255,255,128)= 50% transparent bei PNG, ansonsten weiß
::

scalesteps: Schalter um das Optimierungsverhalten im In-Modus auszuschalten.

options

Mit diesem Attribut können Bild-Optionen für die Berechnung des Bildes übergeben werden. Z.Z. ist nur die Übergabe eines Focus-Point möglich

Focus-Point

{ "focuspoint": { "x":0.062, "y":0.527 } }

Der Focus-Point definiert den Bereich eines Bildes, der als Mittelpunkt des Bildes angenommen werden soll, wenn über den padding-Modus 'fit' das Bild beim Verkleinern beschnitten wird.

locale: Dieses Attribut dient zur Auswahl der zu verwendende Sprache bei mehrsprachigen Variablen.

scope: Gültigkeitsbereich, in dem die Variable definiert ist. Möglich sind page und request.

Beispiele

Bild verkleinern

Template Quelltext

<sp:scaleimage
   name="scaledImage"
   object="myImage.systemlink"
   width="40"
   height="40"
   padding="on"
   background="AAAAAA"/>
widht: <sp:print name="scaledImage.widthToScale"/>
height: <sp:print name="scaledImage.heightToScale"/>
url: <sp:print name="scaledImage.url"/>

Ausgabe

width: 40
height: 40
url: /test/test.html.media/myimage.jpg.scaled/40x40.pm1.bgAAAAAA.jpg