Scaleimage (SP-Tag)

Aus SiteparkWiki
Zur Navigation springen Zur Suche springen
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 des IES

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