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
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….
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…
@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.
Ergänzendes zu Masken:
http://www.fi-ausbilden.de/blog/2007/12/06/typo3-mit-masken-arbeiten/
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?!
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
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?
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!
Wie könnte man dieses schöne script am einfachsten für die Bilder bei tt_news anwenden?
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
Super! es funktioniert auch bei typo3 4.5.2
Tausend Dank!
heute sollte man das per CSS3 und einem Backgroundbild lösen
@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