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
hype.yeebase.com 28. Juli 2008
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 28. Juli 2008
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…
andreasb 28. Juli 2008
@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.
Thomas 28. Juli 2008
Ergänzendes zu Masken:
http://www.fi-ausbilden.de/blog/2007/12/06/typo3-mit-masken-arbeiten/
Typo3-Fanboy 21. August 2008
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*** 2. Oktober 2008
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 12. Mai 2009
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 18. Februar 2010
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 13. März 2010
Wie könnte man dieses schöne script am einfachsten für die Bilder bei tt_news anwenden?