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

Hinterlasse einen Kommentar

13 Kommentare auf "Flexible runde Ecken mit TYPO3"

Benachrichtige mich zu:
avatar

Sortiert nach:   neuste | älteste | beste Bewertung
trackback
9 Jahre 3 Monate her

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

Bernd Sonnensegel
Gast
9 Jahre 3 Monate her

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…

Thomas
Gast
9 Jahre 3 Monate her
Typo3-Fanboy
Gast
9 Jahre 3 Monate her

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?!

***Kommentar Spam***
Gast
9 Jahre 1 Monat her

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

Julian
Gast
Julian
8 Jahre 6 Monate her

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?

Stefanie
Gast
Stefanie
7 Jahre 9 Monate her

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!

albis
Gast
albis
7 Jahre 8 Monate her

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

fabian
Gast
fabian
7 Jahre 5 Monate her

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

lizzy
Gast
6 Jahre 8 Monate her

Super! es funktioniert auch bei typo3 4.5.2
Tausend Dank!

Markus
Gast
6 Jahre 7 Monate her

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

Jens
Gast
Jens
6 Jahre 7 Monate her

@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 🙁

wpDiscuz
Weitere Beiträge zum Thema
Formulare optimieren und Conversion-Rate steigern
Magento Stammtisch Karlsruhe: Community vs. Enterprise Edition
Copy 1 beim Kopieren von Inhaltselementen entfernen
TYPO3 4.2 Beta2a veröffentlicht