Scaleimage (SP-Tag): Unterschied zwischen den Versionen
Frankl (Diskussion | Beiträge) |
Frankl (Diskussion | Beiträge) |
||
Zeile 35: | Zeile 35: | ||
;Fit-No-Padding (padding="fit/no") ''ab Version 2.22'' | ;Fit-No-Padding (padding="fit/no") ''ab Version 2.22'' | ||
− | :wie padding="fit"; falls das gewünschte Zielformat größer als das Originalbild ist, wird | + | :wie padding="fit"; falls das gewünschte Zielformat größer als das Originalbild ist, wird kein Padding hinzugefügt. |
;Fokus-Punkt | ;Fokus-Punkt |
Version vom 14. August 2017, 16:41 Uhr
Name
<sp:scaleimage> - Verkleinert Bilder
Syntax
<sp:scaleimage
name="variable"
scope="page"
object="${myImageLink.link}"
width="40"
height="40"
padding="on"
background="0000FF"
quality="62"
/>
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
undheight
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
undheight
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
undheight
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 Hintergrundfarbe (background) aufgefüllt, so dass in jedem Fall die definierte Größe erreicht wird.
- Fit-No-Padding (padding="fit/no") ab Version 2.22
- wie padding="fit"; falls das gewünschte Zielformat größer als das Originalbild ist, wird kein Padding hinzugefügt.
- Fokus-Punkt
- Ü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, werden keine neuen Bilder berechnet, sondern nur bereist vor berechnete Bilder in der BinDB verwendet. In der BinDB hinterlegten Formate sind:
- 40
- Bild wurde mit einer Höhe und Breite von 40 Pixeln mit
padding="off"
berechnet - h40
- Bild wurde mit einer Höhe von 40 Pixel und einer Breite proportional zum Original mit
padding="off"
berechnet - 100
- Bild wurde mit einer Höhe und Breite von 100 Pixeln mit
padding="off"
berechnet - 500
- Bild wurde mit einer Höhe und Breite von 500 Pixeln mit
padding="off"
berechnet - 1000
- Bild wurde mit einer Höhe und Breite von 1000 Pixeln mit
padding="off"
berechnet - 2000
- Bild wurde mit einer Höhe und Breite von 2000 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 500-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.
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 |
quality
|
Text | Nein | 82 | 2 |
scalesteps
(deprecated ab Version 2.22) |
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 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
quality
- Rate mit der das Bild komprimiert wird. Die Werte liegen zwischen 1 und 100. Wobei 1 einer niedrige Qualität bzw. hohen Kompression und 100 einer hohen Qualität bzw. niedrige Kompression entspricht. Der angegeben Wert hat je nach Bildformat (gif, png, jpg) unterschiedlich interpretiert (Siehe [[1]]). Um für die unterschiedlichen Bildformate differenzierte Qualitätsstufen angeben zu können werden diese Kommasepariert Wertepaare mit Doppelpunkt-Trenner angegeben.
- Einfache Angabe
60
- Spezifische Angabe
gif:70,png:50,jpg:62
scalesteps
(deprecated ab Version 2.22)- 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
- 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.
{ "focuspoint": { "x":0.062, "y":0.527 } }
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
undrequest
.
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