Hallo zusammen!
Ich habe im "pages.media" Feld die Bilder, die auf der Seite angezeigt werden müssen. Davor müssen die, aber, abgerundete Ecken bekommen. Das kann ich mit dem folgendem Shell-Skript machen:
#!/bin/sh
borderColor="#FFFFFF"
convert -size 15x15 xc:white -fill "$borderColor" -draw 'circle 0,0 0,14' \
\( xc:none -draw 'circle 0,0 0,12' \) \
-compose DstOut \
-composite -write mpr:corner +delete \
Bild.jpg \
-bordercolor "$borderColor" -border 2 -matte \
\( mpr:corner -flip -flop \) -gravity NorthWest -composite \
\( mpr:corner -flip \) -gravity NorthEast -composite \
\( mpr:corner \) -gravity SouthEast -composite \
\( mpr:corner -flop \) -gravity SouthWest -composite \
rounded_corners.png
Gibt es die Möglichkeit das selbe mit der Hilfe von GIFBUILDER zu machen?
Danke!
mr_july schrieb
Ich habe im "pages.media" Feld die Bilder, die auf der Seite angezeigt werden müssen. Davor müssen die, aber, abgerundete Ecken bekommen.
Das geht so:
10 = IMAGE
10 {
file = GIFBUILDER
file {
XY = [10.w],[10.h]
10 = IMAGE
10.file = GIFBUILDER
10.file {
XY = [10.w]+4,[10.h]+4
backColor = #000
offset = 2,2
10 = IMAGE
10.file {
import = uploads/media/
import.field = media
import.listNum = 0
}
}
20 = IMAGE
20 {
file = fileadmin/deco/lt.png
offset = -1,-1
}
30 = IMAGE
30 {
file = fileadmin/deco/rt.png
offset = [10.w]-14,-1
}
40 = IMAGE
40 {
file = fileadmin/deco/rb.png
offset = [10.w]-14,[10.h]-14
}
50 = IMAGE
50 {
file = fileadmin/deco/lb.png
offset = -1,[10.h]-14
}
}
}
Die PNG-Datein in dem Verzeichnis fileadmin/deco/ sind die abgerundete schwarze ecken die mit folgenden Kommandos kreiert worden:
convert -size 15x15 xc:white -fill "#000" -draw 'circle 0,0 0,14' \( xc:none -draw 'circle 0,0 0,12' \) -compose DstOut -composite rb.png
convert rb.png -flip rt.png
convert rt.png -flop lt.png
convert rb.png -flop lb.png
Am einfachsten gehts natürlich mit der "Rounded Corners"-Extension. Geht bei mir ohne Probs!
http://typo3.org/documentation/document-library/extension-manuals/rounded_corners/0.0.4/view/
Get auch mit TS
Gefunden hier -> http://www.typo3wizard.com/de/snippets/gifbuilder/dynamische-masken.html
#Dynamische Kanten einfügen
#tt_content.image.20.1.file >
tt_content.image.20.1.file {
import.current = 1
width.field = imagewidth
m.mask.import.cObject = IMG_RESOURCE
m.mask.import.cObject.file = GIFBUILDER
m.mask.import.cObject.file {
# Hier wird die dynamische Maske mit der gleichen größe wie das aktuele
# Bild erstellt, aber mit runden Ecken.
XY = [10.w],[10.h]
format = gif
# Da der "XY" Parameter keinen stdWrap hat, finden wir die größe durch
# erneutes laden des Bilds herraus
10 = IMAGE
10.file {
import.current = 1
width.field = imagewidth
maxW = {$styles.content.imgtext.maxW}
maxW.override.data = register:maxImageWidth
maxWInText = {$styles.content.imgtext.maxWInText}
maxWInText.override.data = register:maxImageWidthInText
}
# Erstellen einer weißen Box der die ganze größe einnimmt
20 = BOX
20.dimensions = 0,0,[10.w],[10.h]
20.color = #FFFFFF
# Die Maske für die Ecke oben links setzen
30 = IMAGE
30.file = {$imagePath}cornermask_tl.gif
30.align = l,t
# Die Maske für die Ecke oben rechts setzen
40 = IMAGE
40.file = {$imagePath}cornermask_tr.gif
40.align = r,t
# Die Maske für die Ecke oben unten links
50 = IMAGE
50.file = {$imagePath}cornermask_bl.gif
50.align = l,b
# Die Maske für die Ecke oben unten rechts
60 = IMAGE
60.file = {$imagePath}cornermask_br.gif
60.align = r,b
}
# Die schnellste methode (empfohlen) ist ein statisches Bild wie folgt zu verwenden:
# m.bgImg = {$imagePath}clear.gif
# Aber es kann auch dynamisch erstellt werden:
m.bgImg.import.cObject = IMG_RESOURCE
m.bgImg.import.cObject.file = GIFBUILDER
m.bgImg.import.cObject.file {
# Hier wird wird die dynamische bgMask erstellt
# Größe dieses Bildes ist unwichtig
XY = [10.w],[10.h]
format = gif
10 = BOX
10.dimensions = 0,0,10,10
10.color = {$bgColor}
}
}