Manchmal besteht die Notwenigkeit, dass eine Site mit transparenten PNG's auch mit alten Internet Explorern (IE5 bzw IE6) funktioniert.

Die meisten Lösungen greifen hier auf JavaScript zurück. Man kann jedoch in TYPO3, direkt über TypoScript einen solchen PNG Fix für transparente PNG's erstellen.

Dieses Snippet zeigt wie es funktioniert.

# Das ist ein normales Bild, welches in guten Browsern angezeigt wird
lib.pngImage = COA
lib.pngImage {
  10 = IMAGE
  10.file = fileadmin/img/car.png
  10.file.import = uploads/tx_templavoila/
  10.file.import.field = field_image
  10.file.import.listNum = 0
  10.file.maxW = 600
}

# Falls es sich um einen Internet Explorer, mit einer Version kleiner als 7 handelt,
# ändern wir das lib.pngImage Objekt
[browser = msie] && [version= <7]
lib.pngImage = COA
lib.pngImage {
      # Als erstes füllen wir ein Dummy Register um das 
      #  TSFE:lastImgResourceInfo Array zu füllen
  20 = LOAD_REGISTER
      # Das Dummy Objekt ist nur eine Kopie des orginalen IMAGE
  20.dummy.cObject < .10
      # Wir ändern den Typ von IMAGE in IMG_RESOURCE
  20.dummy.cObject = IMG_RESOURCE
      # und löschen das orginale 10 Objekt
  10 >
      # Nun nutzen wir einen SPAN statt dem IMG Tag.
      # Der span verwendet den AlphaImageLoader Filter
      # um das transparente PNG im Internet Explorer richtig anzuzeigen.
  30 = TEXT
  30.value = <span style="width:{TSFE:lastImgResourceInfo|0}px;height:{TSFE:lastImgResourceInfo|1}px;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{TSFE:lastImgResourceInfo|3}', sizingMethod='scale');"></span>
  30.insertData = 1
}
[GLOBAL]
#Alles erledigt

Dieses Snippet wurde von Peter Klein eingesendet

Comments

Felix, 30-10-08 19:32:

---

Danke, super Sache das.

Kann man das irgendwie automatisch für alle Bilder die per ContentElement eingefügt werden aktivieren?

Grüße Felix

BastianBalthasarBux, 28-04-09 10:49:

---

@Felix: ja, man müsste nur die entsprechenden objekte in der css_styled_content überschreiben:

Generell:

Ich würde allerdings von übermässigem Gebrauch dieser Methode abraten. Die TYPO3-Conditions bzgl. useragent sind ja Serverseitig was die Performance der Webseite deutlich beeinträchtigen kann.
Außerdem spricht ja nichts gegen die Verwendung des entsprechenden JavaScripts. Hier gibt es einige sehr solide Lösungen, die man einfach onload aufrufen kann. (das javascript selbst lässt sich so ungefähr mit 10 schön formatierten Zeilen abhandeln, eine *ordentliche* Browser-Weiche in JavaScript vielleicht mit etwa 20 Zeilen).

Felix, 16-10-09 18:09:

---

Danke für die Antwort. Sehr informativ. Allerdings meine ich das der UA per JS ermittelt wird. Zumindest lässt das ein Blick in die generierte js Datei von T3 vermuten.

Denke ich teste beides. Die T3 Lösung und auch ein jQuery Plugin. Nochmal Danke für die Info.

Add comment

* - required field

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

*

Content: *