---
title: "Bilder mit abgerundeten Ecken"
url: "https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Frage"]
created: "2006-12-15"
last_reply: "2007-01-02"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Bilder mit abgerundeten Ecken

TYPO3 › TypoScript · 3 Antworten · gestartet 2006-12-15

## Eröffnungsbeitrag

**mr_july** · 2006-12-15 · [Beitrag #1](https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken/1)

Hallo zusammen!

Ich habe im "pages.media" Feld die Bilder, die auf der Seite angezeigt werden müssen. Davor müssen die, aber, abgerundete Ecken bekommen. Das kann ich mit dem folgendem Shell-Skript machen:

```typoscript
#!/bin/sh

borderColor="#FFFFFF"

convert -size 15x15 xc:white -fill "$borderColor"  -draw 'circle 0,0 0,14' \
            \( xc:none -draw 'circle 0,0 0,12' \) \
            -compose DstOut \
            -composite  -write mpr:corner +delete \
            Bild.jpg \
            -bordercolor  "$borderColor" -border 2 -matte \
            \( mpr:corner -flip -flop \) -gravity NorthWest -composite \
            \( mpr:corner -flip \) -gravity NorthEast -composite \
            \( mpr:corner \) -gravity SouthEast -composite \
            \( mpr:corner -flop \) -gravity SouthWest -composite \
            rounded_corners.png
```

Gibt es die Möglichkeit das selbe mit der Hilfe von GIFBUILDER zu machen?

Danke!

## Antworten

### [#2](https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken/2) · mr_july · 2006-12-15

> **mr_july schrieb:**
>
> Ich habe im "pages.media" Feld die Bilder, die auf der Seite angezeigt werden müssen. Davor müssen die, aber, abgerundete Ecken bekommen.

Das geht so:

```typoscript
10 = IMAGE
10 {
  file = GIFBUILDER
  file {
    XY = [10.w],[10.h]
    10 = IMAGE
    10.file = GIFBUILDER
    10.file {
      XY = [10.w]+4,[10.h]+4
      backColor = #000
      offset = 2,2
      10 = IMAGE
      10.file {
        import = uploads/media/
        import.field = media
        import.listNum = 0
      }
    }
    20 = IMAGE
    20 {
      file = fileadmin/deco/lt.png
      offset = -1,-1
    }
    30 = IMAGE
    30 {
      file = fileadmin/deco/rt.png
      offset = [10.w]-14,-1
    }
    40 = IMAGE
    40 {
      file = fileadmin/deco/rb.png
      offset = [10.w]-14,[10.h]-14
    }
    50 = IMAGE
    50 {
      file = fileadmin/deco/lb.png
      offset = -1,[10.h]-14
    }
  }
}
```

Die PNG-Datein in dem Verzeichnis fileadmin/deco/ sind die abgerundete schwarze ecken die mit folgenden Kommandos kreiert worden:

```typoscript
convert -size 15x15 xc:white -fill "#000" -draw 'circle 0,0 0,14' \( xc:none -draw 'circle 0,0 0,12' \) -compose DstOut -composite rb.png
convert rb.png -flip rt.png
convert rt.png -flop lt.png
convert rb.png -flop lb.png
```

### [#3](https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken/3) · funkyferdy · 2006-12-18

Am einfachsten gehts natürlich mit der "Rounded Corners"-Extension. Geht bei mir ohne Probs!

<http://typo3.org/documentation/document-library/extension-manuals/rounded_corners/0.0.4/view/>

### [#4](https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken/4) · codeman · 2007-01-02

Get auch mit TS

Gefunden hier -> <http://www.typo3wizard.com/de/snippets/gifbuilder/dynamische-masken.html>

```typoscript
#Dynamische Kanten einfügen
#tt_content.image.20.1.file >
tt_content.image.20.1.file {
  import.current = 1
  width.field = imagewidth
  m.mask.import.cObject = IMG_RESOURCE
  m.mask.import.cObject.file = GIFBUILDER
  m.mask.import.cObject.file {
        # Hier wird die dynamische Maske mit der gleichen größe wie das aktuele
        # Bild erstellt, aber mit runden Ecken.
    XY = [10.w],[10.h]
    format = gif
        # Da der "XY" Parameter keinen stdWrap hat, finden wir die größe durch 
        # erneutes laden des Bilds herraus
    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
    }
        # Erstellen einer weißen Box der die ganze größe einnimmt
    20 = BOX
    20.dimensions = 0,0,[10.w],[10.h]
    20.color = #FFFFFF
        # Die Maske für die Ecke oben links setzen
    30 = IMAGE
    30.file = {$imagePath}cornermask_tl.gif
    30.align = l,t
        # Die Maske für die Ecke oben rechts setzen
    40 = IMAGE
    40.file = {$imagePath}cornermask_tr.gif
    40.align = r,t
        # Die Maske für die Ecke oben unten links
    50 = IMAGE
    50.file = {$imagePath}cornermask_bl.gif
    50.align = l,b
       # Die Maske für die Ecke oben unten rechts
    60 = IMAGE
    60.file = {$imagePath}cornermask_br.gif
    60.align = r,b

    
  } 
    # Die schnellste methode (empfohlen) ist ein statisches Bild wie folgt zu verwenden:
#   m.bgImg = {$imagePath}clear.gif
    # Aber es kann auch dynamisch erstellt werden:
 m.bgImg.import.cObject = IMG_RESOURCE
 m.bgImg.import.cObject.file = GIFBUILDER
 m.bgImg.import.cObject.file {
        # Hier wird wird die dynamische bgMask erstellt
        # Größe dieses Bildes ist unwichtig
   
  XY = [10.w],[10.h]
   format = gif
   10 = BOX
   10.dimensions = 0,0,10,10
   10.color = {$bgColor}

 }
 
}
```

---

Quelle: „Bilder mit abgerundeten Ecken“, typo3.net, https://www.typo3.net/d/55076-bilder-mit-abgerundeten-ecken
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.