Sometimes you need to make a site compatible with the old crappy Internet Explorer (IE5/6) when using transparent PNGs.

People often resort to various JavaScripts to convert the IMG tags into filters for Internet Explorer.

But the same can be done in TYPO3 directly by TypoScript!

Below is an example for this PNG Fix.

# This is the normal IMG tag shown in good browsers
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
}

# If the browser is Internet Explorer, and the version lower than 7,
# then we modify the lib.pngImage object
[browser = msie] && [version= <7]
lib.pngImage = COA
lib.pngImage {
   
      # first we create a dummy register value, in order to fill
      # the TSFE:lastImgResourceInfo array.
  20 = LOAD_REGISTER
      # The dummy object is just a copy of the original IMAGE object
  20.dummy.cObject < .10
      # But we change the type from IMAGE to IMG_RESOURCE
  20.dummy.cObject = IMG_RESOURCE
   
      # And unset the original 10 object
  10 >
   
      # Then we create a SPAN tag instead of the IMG tag.
      # The span tag uses the AlphaImageLoader filter
      # to display the transparent PNG correctly in Internet Explorer.
  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]
# Done! - Back to normal..

This snippet was submitted by Peter Klein

Comments

Houston, 20-12-08 00:27:

---

Really great fix!

BUT ... I installed RealURL and now the fix only works for the index page, all other pages, now show ... nothing - disable realUrl and it works again ... but I just can't see the connection ... HELP?!

Houston, 20-12-08 01:18:

---

ok ... excuse my n00bness - I should have thought a little harder and checked the code a little closer ... the relative link changed to an absolute link fixed my problem.

GREAT WORK, again Peter !

Add comment

* - required field

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

*

Content: *