https://wiki.stephanschlegel.de/index.php?action=history&feed=atom&title=Runde_ecken 2026-05-09T05:15:37Z Versionsgeschichte dieser Seite in Wikizone MediaWiki 1.35.14 https://wiki.stephanschlegel.de/index.php?title=Runde_ecken&diff=18729&oldid=prev 2011-03-22T10:57:51Z

<p></p> <p><b>Neue Seite</b></p><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 &lt; styles.content.imgFrames.10<br /> }<br /> tt_content.textpic.20 {<br /> image_frames.key.field = image_frames<br /> image_frames.10 &lt; 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 &quot;runde Ecken&quot; auswählen.</div>

79.210.29.128