Flexible runde Ecken mit TYPO3

Bilder mit runden Ecken lassen sich in TYPO3 recht einfach mit einer Bildmaske realisieren. Sollen aber Bilder mit unterschiedlichen Abmessungen ersetzt werden, ist es von Vorteil, die Bildmaske dynamisch generieren zu lassen. Benötigt werden dann nur die vier Eckmasken:

Für ein einfaches An- bzw. Abschalten der runden Ecken bedienen wir uns des kaum genutzen (und in TYPO3 4.2 standardmässig deaktivierten) Rahmen-Feldes des ‚Text mit Bild‘-Inhaltselements. Hierfür überschreiben wir nicht das tt_content.image Objekt direkt, sondern die Objekte tt_content.image.20.image_frames und tt_content.textpic.20.image_frames. Mit wenigen Zeilen TSConfig aktivieren wir schließlich das Feld und fügen einen neuen Eintrag hinzu.

TypoScript Setup:

styles.content.imgFrames.10 {
 import.current = 1
 width.field = imagewidth
 mask.import.cObject = IMG_RESOURCE
 mask.import.cObject.file = GIFBUILDER
 mask.import.cObject.file {

 XY = [10.w],[10.h]
 format = gif

 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
 }

 20 = BOX
 20.dimensions = 0,0,[10.w],[10.h]
 20.color = #FFFFFF

 30 = IMAGE
 30.file = {$imagePath}cornermask_tl.gif
 30.align = l,t

 40 = IMAGE
 40.file = {$imagePath}cornermask_tr.gif
 40.align = r,t

 50 = IMAGE
 50.file = {$imagePath}cornermask_bl.gif
 50.align = l,b

 60 = IMAGE
 60.file = {$imagePath}cornermask_br.gif
 60.align = r,b
 }

 bgImg.import.cObject = IMG_RESOURCE
 bgImg.import.cObject.file = GIFBUILDER
 bgImg.import.cObject.file {

 XY = [10.w],[10.h]
 format = gif
 10 = BOX
 10.dimensions = 0,0,10,10
 10.color = {$bgColor}
 }

}

tt_content.image.20 {
 image_frames.key.field = image_frames
image_frames.10 < styles.content.imgFrames.10
}
tt_content.textpic.20 {
 image_frames.key.field = image_frames
image_frames.10 < styles.content.imgFrames.10
}

TypoScript Constants:

# Pfad zu den Bildmasken
imagePath = fileadmin/templates/img/

# Hintergrundfarbe der Seite
bgColor = #FFFFFF

TSConfig:

TCEFORM.tt_content.image_frames.disabled=0
TCEFORM.tt_content.image_frames.removeItems = 1,2,3,4,5,6,7,8
TCEFORM.tt_content.image_frames.addItems.10 = runde Ecken