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
13 Kommentare
  • Avatar

    @Markus
    Sag das mal einem Kunden, der das gerne auch auf Browsern anschauen möchte, die keinen border-radius per css kennen… (Ich schau mal in richtung IE…)
    Klar wäre das die bessere Variante, aber so lange sich manche Browserhersteller nicht an standards halten und sehr viele Firmen ihre Browser nicht updaten, ist das leider für manche Homepages nicht möglich 🙁

  • Avatar

    heute sollte man das per CSS3 und einem Backgroundbild lösen 😉

  • Avatar

    Super! es funktioniert auch bei typo3 4.5.2
    Tausend Dank!

  • Avatar

    Ich habe die 4 gifs im Photoshop invertiert und dann die Zeile 23 (TypoScript Setup) auf #000000 geändert, seitem funktioniert es im Typo3 4.3.3

  • Avatar

    Wie könnte man dieses schöne script am einfachsten für die Bilder bei tt_news anwenden?

  • Avatar

    Ich habe das Script übernommen und im BE wird die neue Rahmen-Funktion angezeigt aber im FE wird ein Bild mit der angegebenen HG-Farbe erstellt auch super mit runden Ecken – aber eben nur einfarbig und das Bild ist verloren gegangen. Wo kann der Fehler liegen?
    Danke!

  • Avatar

    Wunderbares TS. Wenn ich das aber richtig sehe (und probiert habe), dann klappt es aber _nicht_ wenn man via BE die Höhe eines Bildes ändert.
    Hat jemand eine Lösung gefunden, wie man Ecken per Maske abrunden kann, ohne, dass die Ecken mitskalieren, man aber weiterhin die BE-Einstellungen imagewidth/-height verwenden kann?

  • Avatar

    Hallo Leute – danke für diesen Artikel – ich hätte jetzt dazu doch noch eine Frage – Wenn man verschiedene Größen bei den Bilder hat – kann man ja das mit der Maske vergessen!

    Also der Ansatz von oben ist SUPER – jedoch würde ich jetzt auch noch einen Rahmen um die Bilder brauchen – mit den Runden ECKEN

    Vielleicht kann mir da einer die INFOS geben!
    LG

  • Avatar

    Läuft leider bei mir nicht. Das Maskenbild wird noch richtig erzeugt, auch in Bezug auf die Größe des zu maskierenden Bildes.

    Das erzeugte Bild (via Quixexplorer im Backend im Typo3-Temp-Verzeichnis im Unterordner GB zu finden) hat die richtigen Dimensionen, ist aber leer/weiße Fläche.

    Das gerenderte Image-Tag dann leider auch?!

    Die Typo3-Installation läuft in einem Unterverzeichnis – das hat schon öfter Seiteneffekte gehabt?!

  • Avatar
  • Avatar

    @Bernd:

    Sinn und Zweck dieses Scripts ist es, solche Bilder von TYPO3 dynamisch erzeugen zu lassen. Klar kannst du bei allen deinen Bildern mit Photoshop runde Ecken einfügen, wenn’s dir Spaß macht. Aber sowas kann man auch von TYPO3 erledigen lassen, wenn man sich Arbeit ersparen will.

    PS Eigentlich sollte man deinen Kommentar ja als Spam zurückweisen, aber vielleicht hilft diese Erklärung ja auch anderen Lesern weiter.

  • Avatar

    Naja, solche runden Ecken macht man doch normalöerweise immer mit Bildern, nicht nur bei Typo3. Wüsste jetzt nicht, was daran so neu ist…

  • Avatar

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

Hinterlassen Sie einen Kommentar

Ihr Kommentar*

Name*
Website

Weitere Beiträge zum Thema
Erneut Sicherheitslücken in TYPO3-Extensions
FLOW3 Beta released
Flexible Inhaltselemente kategorisieren
Track Memory Usage and Runtime of Symfony Commands