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

Comments

basti, 10-07-06 17:41:

---

Hi,

kann man das auch auf Plugins anwenden? Sprich auf z.B. tx_wagrandomimage_pi1?

dom, 24-08-06 12:50:

---

gibt est die möglichkeit auf einzelne Teile des Template zu
beschrenken. ich benutze Templavoila und weiss nicht wie ich diese
skript oder andere auf teil des Template anwenden kann

edv-k, 19-03-08 08:14:

---

heej zusammen!
habe diesen code eingefügt, die constants angepasst und die bilder heruntergeladen!
jedoch tut sich bei mir nichts, ausser das einzelne bilder ganz verschwinden!
kann mir jemand helfen...
die bilder di sich im linken bereich befinden verändern sich gar nicht!

mfg gabriel

ghoti, 28-07-08 09:55:

---

Es gibt aber ein kleines Problem: die Größe der Ecken hängt von der Größe des Ausgangsbildes und von der Größe des Ausgabebildes ab - die Ecken werden mitskaliert.

honiko, 12-11-08 21:00:

---

Typ3 Vers. 4.2x
Saubere Arbeit. Funktioniert auf Anhieb. Genial. Gruß Horst

Daniel, 20-03-09 12:16:

---

Super. Dankeschön. Genial.

Artur, 20-04-09 10:10:

---

Kann man das auch für tt_news images umbauen? Hat jemand eine Idee?

Artur, 26-04-09 08:35:

---

keiner eine Idee? Gruß Artur J.

Steffen, 18-08-09 16:29:

---

Wunderbar, funktioniert prima!

Gibt es evtl. auch eine Lösung, um die jetzigen weißen Ecken transparent zu gestalten. Ich habe einen nicht einfarbigen Hintergrund!...

Steffen, 18-08-09 16:54:

---

nochmal ich:

Wie kann ich die abgerundeten Ecken nur bei ausgewählten Bildern verwenden?

• <<First
• <Previous
• 1. 1
  2. 2
• Next>
• Last>>

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *