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

Related Posts