Imp (SPT-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
<spt:imp> - Erzeugt ein <img src="...">-Tag für klein gerechnete und aus Texten generierte Bilder
Syntax
<spt:imp image="variable" width="50" height="50"/>
Beschreibung
Mit dem imp-Tag können kleinere Versionen eines Bildes in eine HTML-Seite eingebunden werden. Weiter ist es mit diesem Tag möglich aus einem Text ein Bild zu erzeugen, das dann angezeigt wird. Der Tag erzeugt ein <img src=".." ..> HTML-Tag.
Funktionen des Tags:
- skalieren aller Bilder on demand (Vorschaubild/Detailbild/Download werden von einer Bilddatei generiert), um Bildverwaltung und vor allem händische Bildbearbeitung zu vermeiden
- Active Caching für alle Auflösungen und Formate
- automatisches Erzeugen von Textgrafiken aus im CMS eingegebenen Texte für Headlines in der Unternehmensschrift
- dynamische Berechnung der HTML-Attribute width und height
- Spam-Schutz durch codierte E-Mail-Adressen mit Bildausgabe der Klartextadresse
spt:imp
verwendet sp:scaleimage
und sp:textimage
, vereinigt dessen Funktionen und erzeugt im Unterschied zu den beiden Tags einen img-HTML-Tag.
Dieser Tag verhält sich im In- und im Out-Modus unterschiedlich.
- Out-Modus
- Im Out-Modus wird das Bild erzeugt und über den <img src="..."> eingebunden
- In-Modus
- Im In-Modus werden nicht alle verlangten Bildgrößen berechnet. Aus Optimierungsgründen wird nur ein Satz von Bildgrößen verwendet (in der BinDB konfigurierbar). Die pixelgenaue Verkleinerung übernimmt dann der Browser. Das Padding wird über CSS-Styles realisiert (siehe auch
sp:scaleimage
).
Attribute
Name | Type | Required | Default | ab IES Version |
---|---|---|---|---|
image
|
Attribute | Ja | None | 1 |
width
|
Number | Nein | 100 | 1 |
height
|
Number | Nein | 100 | 1 |
resolution
|
Text | Nein | None | 1 |
format
|
Text | Nein | png | 1 |
zusätzliche Attribute für Thumbnails
Name | Type | Required | Default | ab IES Version |
---|---|---|---|---|
padding
|
Text | Nein | off | 1 |
paddingcolor
|
Number | Nein | FFFFFF | 1 |
excerpt
|
Number | Nein | None | 1 |
manipulate
|
Text | Nein | None | 1 |
zusätzliche Attribute für Texte
Name | Type | Required | Default | ab IES Version |
---|---|---|---|---|
color
|
Text | Nein | 000000 | 1 |
background
|
Text | Nein | FFFFFF | 1 |
text
|
Text | Nein | None | 1 |
font
|
Text | Nein | None | 1 |
font-size
|
Number | Nein | None | 1 |
font-weight
|
Text | Nein | None | 1 |
gravity
|
Text | Nein | None | 1 |
offset
|
Text | Nein | None | 1 |
text-transform
|
Text | Nein | None | 1 |
name
- Name des Bildes, das mit dem spt:imp-Tag aufgerufen werde soll.
width
- Die gewünschte Bildbreite z.b. 100. Die Höhe wird unter Beibehaltung der Seiten-Verhältnisse des Originalbildes oder des gewählten Ausschnittes berechnet. Bei gesetzter Breite ist daher die Option padding zwingend auf no gesetzt
height
- Die gewünschte Bildhöhe z.b. 100. Die Breite wird unter Beibehaltung der Seiten-Verhältnisse des Originalbildes oder des gewählten Ausschnittes berechnet. Bei gesetzter Höhe ist daher die Option padding zwingend auf no gesetzt.
resolution
- Die gewünschte Bildgröße z.b. 100x100. Es gelten die Regeln wie für width und height.
format
- Die Formate png und jpeg können für Thumbnails verwendet werden.
Optionale Parameter für Thumbnails
padding
- Der Wert "yes" 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. padding=yes ist das Default (solange nicht durch andere Optionen ausgeschlossen).
- Der Wert "no" 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ößt mö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.
paddingcolor
Mit paddingcolor kann durch Hexadezimalwerte oder X-Window-Namen die Farbe des Rahmen bzw. des Hintergrundes, die bei padding=yes verwendet wird angegeben werden. Transparent ist das Default.
excerpt
- Diese Option schneidet einen Ausschnitt eines größeren Bildes aus. Die ersten beiden Zahlen geben die linke obere Ecke des Ausschnittes an, die letzteren beiden die untere rechte Ecke. Mögliche Werte sind x0,y0,x1,y1 z.B. 100,100,300,200. Dieser Ausschnitt wird entsprechend der Option resolution noch verkleinert oder vergrößert. Hierbei wird gegebenenfalls ein Rand erzeugt, sprich die Option padding=yes ist automatisch gesetzt, falls nicht padding=fit gesetzt ist.
- Alle 4 Zahlen können auch negativ sein. In diesem Fall wird der Wert als Differenz zum hinteren oder unteren Rand des Bildes berechnet. Also bedeutet -10% dasselbe wie 90% und -100 bei einem 300 Pixel breiten (oder hohen) Bild dasselbe wie 200. Ist x0 > x1 so wird das Bild an der x-Achse gespiegelt.
- Ist y0 > y1 so wird das Bild an der y-Achse gespiegelt. Mit Angabe der Werte x0,y0 z.B. 100,50 wird der Ausschnitt in der exakten Größe der mittels resolution geforderten Auflösung gewählt. Es ist dann keine Verkleinerung oder Vergrößerung mehr notwendig und man erhält einen 1:1 Ausschnitt des Orignals. Hierbei is immer padding=no gesetzt.
- Mit den Variablen north, west, east oder south wird ein in der jeweiligen Himmelsrichtung gelegener Ausschnitt in der mittels resolution geforderten Auflösung gewählt. Also wird mit excerpt=south ein Ausschnitt auf der Mitte der Bildbreite ganz unten gewählt, mit excerpt=east dagegen ein Ausschnitt aus der Mitte der Bildhöhe ganz rechts. Es ist dann keine Verkleinerung oder Vergrößerung mehr notwendig und man erhält einen 1:1 Ausschnitt des Orignals. Hierbei is immer padding=no gesetzt.
- Mit northwest, northeast, southwest oder southeast wird ein in der jeweiligen Himmelsrichtung gelegener Ausschnitt in der mittels resolution geforderten Auflösung gewählt. Also wird mit excerpt=southeast die äusserste untere, rechte Ecke des Originalbildes gewählt, mit excerpt=northwest dagegen die obere, linke Ecke. Es ist dann keine Verkleinerung oder Vergrößerung mehr notwendig und man erhält einen 1:1 Ausschnitt des Orignals. Hierbei is immer padding=no gesetzt.
manipulate
- Erzeugt verschiedene Effekte wie weichzeichnen oder schärfen über sharp1, sharp2, sharp3, sharp4, laplace1, laplace2, box, lowpass, neon, emboss und bw
Optionale Parameter für Texte
text
- Der auszugebende Text in URL-encodeter Form.
color
- Die Farbe der Schrift. Beispielsweise AA00DD oder ff77ff
background
- Die Farbe des Hintergrundes für Texte. Beispielsweise aaccaa oder 77ff22
font
- Der Font (z.B. Arial, wie mit /showfonts angezeigt)
font-size
- Punkt-Größe des zu verwendenden Fonts (z.b.: 12)
font-weight
- Die Dicke (Wichtung) des angegeben Fonts (z.b.: bold, 200 oder 900).
gravity
- Mit den Werten n, w, e, s, nw, ne, sw, se oder Center, North, South, NorthEast etc. kann die gewünschte Position des Textes im umgebenen Rahmen ausgerichtet werden. West ist der Standardwert. Das heisst alle Texte werden links auf mittlerer Höhe angefangen.
offset
- Der Anfangspunkt des auszugebenden Textes von der Seite, die über die Option gravity angegeben ist, aus gesehen. Ohne Angabe von gravity ist dies normalerweise die linke Seite mittig (z.b.: 3,10 )
text-transform
- Die Variablen uppercase oder lowercase konvertieren alle Zeichen des auszugebenden Textes in Groß- bzw. in Kleinbuchstaben.
Beispiele
einfache Bildausgabe, 100x100
Template Quelltext
<spt:imp image="variable"
width="100"
height="100"/>
Bild mit padding, paddingcolor und thumbnailtype
Template Quelltext
<spt:imp image="variable"
width="50"
height="50"
paddding="fit"
paddingcolor="transparent"
thumbnailtype="gif"/>
einfaches Text-Bild
Template Quelltext
<spt:imp image="variable"
width="50"
height="50"
action="textonimage"
paddding="fit"
paddingcolor="transparent"
thumbnailtype="jpg"/>
Spamschutz
Template Quelltext
Email:
<img src="/imp/textonimg?color=333333;
background=77ff22;
fontsize=13;
font=Arial;
gravity=sw;
font-weight=italic;
offset=1,0;
text=spc:<sp:print name="email" encrypt="3des"/>;
text-transform=lowercase" align="absBottom" border="0">