Scaleimage (SP-Tag)

Dieser Artikel bedarf einer Überarbeitung. Näheres ist auf der Diskussionsseite angegeben. Hilf bitte mit ihn zu verbessern und entferne anschließend diese Markierung.

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- wie 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. Die Seitenverhältnisse des Bildes bleiben stets erhalten.
• Bilder werden nicht vergöß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, 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 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. Ist die definierte Größ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 der definierte Wert 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 link und rechts einen 25 Pixel breiten Balken in der angegebene background-Farbe.Ist die definierte Größe größer als das Original wird das Bild mit der background-Farbe aufgefüllt, so das 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, das 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. Ist die definierte Größe größer als das Original wird das Bild mit der background-Farbe aufgefüllt, so das in jedem Fall die definierte Größe erreicht wird.

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

Dieser Tag verhält sich in In- und 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, das 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 Attribute scaleSteps="false" ausgeschaltet werden. Dieses ist aber nur in Ausnahmefällen empfohlen und kann sich negativ auf die Performanz des Systems auswirken.

Attribute

Name	Type	Required	Default	ab IES Version
name	Variable	Ja	None	2
object	Attribut	Nein	None	2
width	Expression	Ja und / oder height	None	2
height	Expression	Ja und / oder width	None	2
padding	Text	Nein	off	2
background	Text	Nein	FFFFFF	2
scaleSteps	Condition	Nein	None	2
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

Verhalten beim Anlegen von Rändern und Beschnitt.

background

Hintergrundfabe für das Padding.

scaleSteps

Schalter um das Optimierungsverhalten im In-Modus auszuschalten.

locale

Dieses Attribut dient zur Auswahl der zu verwendende Sprache bei mehrsprachiger Variablen.

scope

Gültigketisbereich, 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.imageWidht"/>
height: <sp:print name="scaledImage.imageHeight"/>
url: <sp:print name="scaledImage.url"/>

Ausgabe

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