Wenn man Masken für Bilder benutzt muss diese Maske gleich groß sein wie das Bild. Um nichts zu verzerren ist das ziemlich sinnlos bei Bildern mit unterschiedlichen Größen.

In diesem Snippet wird die Maske dynamisch generiert sodass sie genau gleich groß wie das Bild selbst ist.

In diesem Beispiel wird auf jedes Text mit Bild oder Bild content Element eine Maske gelegt die die Ecken abrundet.

Die 4 verwendeten Bilder für die Ecken:

Constants Feld:

# Der Pfad zu den Masken Bildern
imagePath = fileadmin/samples/imgmasks/

# Die Hintergrundfarbe der Seite
bgColor = #FFFFFF

Setup Feld:

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}
  }
}

Anzeigebeispiel

Dieses Snippet wurde von Peter Klein eingesendet