https://wiki.stephanschlegel.de/api.php?action=feedcontributions&feedformat=atom&user=79.210.29.128
Wikizone - Benutzerbeiträge [de]
2026-05-09T06:09:30Z
Benutzerbeiträge
MediaWiki 1.35.14
https://wiki.stephanschlegel.de/index.php?title=Runde_ecken&diff=18729
Runde ecken
2011-03-22T10:57:51Z
<p>79.210.29.128: </p>
<hr />
<div>== Runde Ecken mit Typoscript ==<br />
<br />
Quelle: (http://www.typo3-scout.de/2008/07/28/flexible-runde-ecken-mit-typo3/)<br />
getestet mit typo3 4.5.2<br />
<br />
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. <br />
<br />
<br />
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.<br />
<br />
TypoScript Setup:<br />
<br />
styles.content.imgFrames.10 {<br />
import.current = 1<br />
width.field = imagewidth<br />
mask.import.cObject = IMG_RESOURCE<br />
mask.import.cObject.file = GIFBUILDER<br />
mask.import.cObject.file {<br />
<br />
XY = [10.w],[10.h]<br />
format = gif<br />
10 = IMAGE<br />
10.file {<br />
import.current = 1<br />
width.field = imagewidth<br />
maxW = {$styles.content.imgtext.maxW}<br />
maxW.override.data = register:maxImageWidth<br />
maxWInText = {$styles.content.imgtext.maxWInText}<br />
maxWInText.override.data = register:maxImageWidthInText<br />
}<br />
<br />
20 = BOX<br />
20.dimensions = 0,0,[10.w],[10.h]<br />
20.color = #FFFFFF<br />
<br />
30 = IMAGE<br />
30.file = {$imagePath}cornermask_tl.gif<br />
30.align = l,t<br />
<br />
40 = IMAGE<br />
40.file = {$imagePath}cornermask_tr.gif<br />
40.align = r,t<br />
<br />
50 = IMAGE<br />
50.file = {$imagePath}cornermask_bl.gif<br />
50.align = l,b<br />
<br />
60 = IMAGE<br />
60.file = {$imagePath}cornermask_br.gif<br />
60.align = r,b<br />
}<br />
<br />
bgImg.import.cObject = IMG_RESOURCE<br />
bgImg.import.cObject.file = GIFBUILDER<br />
bgImg.import.cObject.file {<br />
<br />
XY = [10.w],[10.h]<br />
format = gif<br />
10 = BOX<br />
10.dimensions = 0,0,10,10<br />
10.color = {$bgColor}<br />
}<br />
<br />
}<br />
<br />
tt_content.image.20 {<br />
image_frames.key.field = image_frames<br />
image_frames.10 < styles.content.imgFrames.10<br />
}<br />
tt_content.textpic.20 {<br />
image_frames.key.field = image_frames<br />
image_frames.10 < styles.content.imgFrames.10<br />
}<br />
<br />
<br />
TypoScript Constants:<br />
# Pfad zu den Bildmasken mit den runden Ecken<br />
imagePath = fileadmin/templates/media/<br />
<br />
# Hintergrundfarbe der Seite<br />
bgColor = #FFFFFF<br />
<br />
TSConfig:<br />
<br />
TCEFORM.tt_content.image_frames.disabled=0<br />
<br />
TCEFORM.tt_content.image_frames.removeItems = 1,2,3,4,5,6,7,8<br />
<br />
TCEFORM.tt_content.image_frames.addItems.10 = runde Ecken<br />
<br />
<br />
<br />
Nun kann man bei den Bildoptionen die Eigenschaft "runde Ecken" auswählen.</div>
79.210.29.128