---
title: "GIFBUILDER Blur Transparenz"
url: "https://www.typo3.net/d/113947-gifbuilder-blur-transparenz"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Bilder","Frage"]
created: "2013-02-19"
last_reply: "2013-02-20"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# GIFBUILDER Blur Transparenz

TYPO3 › TypoScript · 2 Antworten · gestartet 2013-02-19

## Eröffnungsbeitrag

**mr.​mc.​mauser** · 2013-02-19 · [Beitrag #1](https://www.typo3.net/d/113947-gifbuilder-blur-transparenz/1)

Hallo,

habe folgendes Eingebaut
<http://wiki.typo3.org/GIFBUILDER#Variant_2>

Funzt auch nur wenn man eine Hintergrundgrafik benutzt dann geht es nicht, es erscheint einweißer rahmen um die Grafik. (siehe Anhang)

Wie bekommt man beim Blur auch eine Transparenz hin ?

[Bild: \[upl-image-preview uuid=62548128-9565-5c46-804a-afb3f1d90e76 url=https://www.typo3.net/assets/files/typo3net/1081-blur.png alt=blur.png thumbnail_url=https://www.typo3.net/assets/files/typo3net/1081-blur.png\]](https://www.typo3.net/assets/files/typo3net/1081-blur.png)

## Antworten

### [#2](https://www.typo3.net/d/113947-gifbuilder-blur-transparenz/2) · toifel · 2013-02-19

Bitte mal Dein komplettes Typoscript posten.
Im Beispiel ist backColor = #ffffff gesetzt, dann ist ein weissen Hintergrund wohl normal.

### [#3](https://www.typo3.net/d/113947-gifbuilder-blur-transparenz/3) · mr.​mc.​mauser · 2013-02-20

Wenn man bei Backgroundcolor nichts setzt nimmt TYPO3 automatisch #ffffff
diesen teil hab ich schon in allen möglichen Kombinationen versucht

```typoscript
    backColor = #ffffff
      transparentBackground = true     
      transparentColor = #ffffff
      transparentColor.closest=1
```

Hier das Komplette Typoscript.

```typoscript
# Orginal Bildkonfiguration retten
shadowedImageTemp < tt_content.image.20.1
 
# Dann die normalen Einstellung kopieren
tt_content.image.30 < tt_content.image.20
 
# Als nächstes die "normalen" Einstellung mit der Bedingung knüpfen,
# dass sie nur angezeigt wird, ein KEIN Rahmen angeklickt
# wurde.
tt_content.image.20.stdWrap.if.isFalse.field = imageborder
 
# Jetzt in der Kopie die alte Bordereinstellung löschen und
# auf 15px vergrößern. Aufgrund eines Typo3-BUG hat,
# das keine Auswirkung, außer dass die Zelle um das Bild um
# 2x15px vergrößert wird. Das kommt uns sehr entgegen.
# Der eigentliche Rahmen wird später, via CSS abgeschaltet.
tt_content.image.30.border >
tt_content.image.30.border = 1
tt_content.image.30.borderThick = 15
 
# An die Kopie die Bedingung dran hängen, dass die DropShadow-
# Variante nur angezeigt wird, wenn der Border angeklickt
# wurde.
tt_content.image.30.stdWrap.if.isTrue.field = imageborder
 
# Jetzt kommt noch die Änderungen für den DropShadow:
# Ursprungsquelle: http://wiki.typo3.org/index.php/GIFBUILDER#Variant_2
# Aber ich hab das IMAGE im IMG_TEXT etwas
# umgebaut.
tt_content.image.30.1.stdWrap.cObject = COA
tt_content.image.30.1.stdWrap.cObject{
    10 = TEXT
    10.value = <div style="background-repeat: no-repeat;
    20 = IMG_RESOURCE
    20.stdWrap.wrap = background-image:url(|);
 
    # jetzt der CodeSchnipsel aus dem Typo3-Wiki:
    20.file = GIFBUILDER
    20.file{
        XY = [10.w]+40,[10.h]+40
 
        # The background color of the image/content

    backColor = #ffffff
      transparentBackground = true     
      transparentColor = #ffffff
      transparentColor.closest=1

          
      format = png
        # Create a "dummy" image from the real image which is 20 pixel
        # smaller than the set width.
        10 = IMAGE
        10 {
            file.import.current = 1
            file.width.stdWrap = 1
            file.width.stdWrap.field = imagewidth
            file.width.prioriCalc = intval
            offset = 10,10
        }
 
        # Draw a black/gray box over the dummy image
        20 = BOX
        20.dimensions = 10,10,[10.w],[10.h]
        # You have to set lib.shadowIntensity in your constants.
        20.color = {$lib.shadowIntensity}
 
        # Blur the black box
        30 = EFFECT
        30.value = blur=99|


      # Hier würde normalerweise Das Bild wieder
        # drüber gelegt werden, dass lasse ich wech
        # so hab ich nur den Schatten
    }
 
    #Background-Tag wieder schließen...
    30 = TEXT
    30.value = " >
    # in die 40 kommt das Orginalbild rein s.u.
    #Background-Tag wieder schließen...
  

  
    50 = TEXT
    50.value = </div>
}
 
# Jetzt noch die geretteten Bildeinstellungen übertragen...
tt_content.image.30.1.stdWrap.cObject.40 < shadowedImageTemp
tt_content.image.30.1.stdWrap.cObject.40 = IMAGE
tt_content.image.30.1.stdWrap.cObject.40.file{
    import.current = 1
    field = imagewidth
    maxW = {$styles.content.imgtext.maxW}
}
 
# Damit das ganze auch in der Text-Bild-Kombinationfunktioniert...
tt_content.textpic.40 = < tt_content.image.30
tt_content.textpic.40.text.10 = COA
tt_content.textpic.40.text.10 {
    if.value = 24
    if.isGreaterThan.field = imageorient
    10 = < lib.stdheader
    10.stdWrap.dataWrap = <div class="csc-textpicHeader csc-textpicHeader-{field:imageorient}">|</div>
}
tt_content.textpic.40.text.20 = < tt_content.text.20
```

Gruß
Robert

---

Quelle: „GIFBUILDER Blur Transparenz“, typo3.net, https://www.typo3.net/d/113947-gifbuilder-blur-transparenz
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.