Kategorien-Archiv: Grafik

Das Problem: Ich möchte in einem Templavoila-FCE Bilder automatisch auf eine von mir festgelegte Größe skalieren und sowohl mit runden Ecken als auch mit Schlagschatten versehen.

Ich erstelle ein FCE mit dem Bild als “Image Field, Fixed W+H”, damit bereitet mir Templavoila die Bildskalierung auf eine fixe Größe vor.

Ich habe auch gleich noch ein nicht gemapptes Textfeld angelegt, mit dem ich die “title” und “alt” Attribute fülle (field_alttext).

Standardmäßig skaliert Templavoila das Bild auf 200×150 Pixel, das ergebnis im Frontend sieht also so aus:

Im XML von Templavoila befindet sich der Typoscript-Code um dieses Bild zu erzeugen (auf den Bleistift neben der oberen Überschrift klicken:

10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = 200,150
10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 200
10.file.minW = 200
10.file.maxH = 150
10.file.minH = 150
}

diesen erweitern wir jetzt, da wir ja ein Bild erstellen möchten, welches aus folgenden “Ebenen” besteht (von hinten nach vorne):

• Die Schatten-Ebene
• Die Effekt-Ebene (um den Schatten weichzuzeichnen)
• Die Bild-Ebene

als Maske benutzen wir beim Schatten und beim Bild dasselbe:

Das ist das Finale Typoscript (XML des FCE):

10 = IMAGE
10.file = GIFBUILDER
#title/alttext mit Inhalt verknüpfen, title bekommt automatisch den alttext 
10.altText.field = field_alttext
10.file {
#Das endgültige Bild ist 10 Pixel breiter und höher, um Platz für den Schatten zu schaffen
XY = [30.w] + 10,[30.h] + 10
#Hintergrundfarbe
backColor = #FFFFFF
10 = IMAGE
10.file = GIFBUILDER
10.file {
#die gleichen Abmessungen wie das Bild das eingefügt wird
XY = [30.w],[30.h]

#Schattenfarbe
backColor = #888888
}
#die Maske
10.mask = fileadmin/templates/tutorial/mask.gif
#offset, um den Schatten rechts unter dem Bild hervorkucken zu lasen
10.offset = 5,5

#weichzeichnen
20 = EFFECT
20.value = blur=25

#das Bild, skalieren auf feste Größe von 190×140

30 = IMAGE
30.file = GIFBUILDER
30.file {
#Abmessungen vom importierten Bild übernehmen
XY = [10.w],[10.h]
10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 190
10.file.minW = 190
10.file.maxH = 140
10.file.minH = 140
}
#maske
30.mask = fileadmin/templates/tutorial/mask.gif
#offset
30.offset = 3,3
}

Die Ebenen im einzelnen:

Schatten:
Für den Schatten erzeugen wir ein Gifbuilder-Objekt mit der Schattenfarbe und wenden unsere Maske darauf an:

10 = IMAGE
10.file = GIFBUILDER
10.file {
#die gleichen Abmessungen wie das Bild das eingefügt wird
XY = [30.w],[30.h]
#Schattenfarbe
backColor = #888888
}
#die Maske
10.mask = fileadmin/templates/tutorial/mask.gif
#offset, um den Schatten rechts unter dem Bild hervorkucken zu lasen
10.offset = 5,5

das Ergebnis sieht folgendermaßen aus:

Effekt (Weichzeichner)
Ein Gifbuilder Effekt-Layer, nichts spezielles:

20 = EFFECT
20.value = blur=25

Ergebnis:

Bild:

Als letzes setzen wir unser Bild mit Skalierung und Maske drauf und verpassen ihm ebenfalls einen Offset (weniger als beim Schatten). Der Offset ist deshalb sinnvoll, da der Schatten je nach Offset an allen vier Bildseiten sichtbar sein kann:

30 = IMAGE
30.file = GIFBUILDER
30.file {
#Abmessungen vom importierten Bild übernehmen
XY = [10.w],[10.h]
10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 190
10.file.minW = 190
10.file.maxH = 140
10.file.minH = 140
}
#maske
30.mask = fileadmin/templates/tutorial/mask.gif
#offset
30.offset = 3,3

Ergebnis:

Hierbei ist man jetzt allerdings festgelegt auf eine Bildgröße. Wenn man die Maske dynamisch erstellt, wie hier vorgestellt, lässt sich dieses FCE auch einfach dynamisieren.

Das komplette XML des FCE könnt ihr hier herunterladen

Der Marienkäfer ist von interfacelift