

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} } }
Dieses Snippet wurde von Peter Klein eingesendet




kann man das auch auf Plugins anwenden? Sprich auf z.B. tx_wagrandomimage_pi1?
beschrenken. ich benutze Templavoila und weiss nicht wie ich diese
skript oder andere auf teil des Template anwenden kann
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
Saubere Arbeit. Funktioniert auf Anhieb. Genial. Gruß Horst
Gibt es evtl. auch eine Lösung, um die jetzigen weißen Ecken transparent zu gestalten. Ich habe einen nicht einfarbigen Hintergrund!...
Wie kann ich die abgerundeten Ecken nur bei ausgewählten Bildern verwenden?
Add comment