Runde ecken

Runde Ecken mit Typoscript

Quelle: (http://www.typo3-scout.de/2008/07/28/flexible-runde-ecken-mit-typo3/) getestet mit typo3 4.5.2

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:

1. Pfad zu den Bildmasken mit den runden Ecken

imagePath = fileadmin/templates/media/

1. 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

Nun kann man bei den Bildoptionen die Eigenschaft "runde Ecken" auswählen.