[Plugin] PNG-Alpha Transparency for MSIE

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[xwisdom]

Hello Everyone,

Many thanks goes to Ryan for sharing this bit of code which I've managed to wrap inside a plugin so that it can be easily applied to your modx enabled website.

Trigger Event:
--------------------
OnWebPagePrerender

Plugin configuration:
----------------------
&spacer=PNG Spacer Path;string;assets/images &sm=Size Method;list;Scale,Crop,Image;Image

Create a new plugin with the above settings. Unzip the attached zip file and copy content of pngalpha4msie.txt into the plugin. Also copy the spacer.png image file into assets/images folder.

Here's an example of a png-24 alpha image tested in IE 6.0:

Note: You must be logged in before you can view images and download file attachments

Before (plugin disabled or not installed):


After (plugin enabled):

[zi]

Thanks for great Plugin 

it is really good since IE does not support PNG transparency images.

Best wishes and regards,

zi

[element]

I think this is a much needed plugin, thanks!  I'm courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can't remember exactly how it's done any more. 

Thanks for the great plugin!  Regardless there is a couple of sites that will make good use this 

[Lammikko]

Thank you very, very much!

[rthrash]

I think this is a much needed plugin, thanks!  I'm courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance, I saw that hack a long time ago but can't remember exactly how it's done any more. 

I don't think it negatively affects validation, FWIW. Also, any other ideas for a "compatibility kit" for Win IE less than the upcoming version 7.0. Hover:anything comes to mind for me...

[xwisdom]

? I'm courious though on what effect do the ie hack for the png alpha transparency have on the validation of the page as far xhtml and css compliance

Hi,

Thanks to all for the feedback. I don't see where this plugin should have any effect on xhtml and css. How it works is that it will only replace the "src" values for the necessary tags only when the IE browser is detected. So it should not change anything for FF, opera or any other browser.

Best regards,

[Dimmy]

OK found a little bug with this cool plugin

the plugin needs image dimentions to work or els the spacer.png wil be 0 pixels and that way wil it not show the image.

I used the img TV to set a png but that resulted in the png file not showing and the source looked like this:

Code:

<img src='assets/images/spacer.png' style="width: 0; height: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.elisabethschaap.nl/assets/images/header/header_img_nl.png', sizingMethod=);" /

then I changed the TV to a richeditor one and placed an png with that and it works fine. The source of the page rederd this way is:

Code:

<img src="assets/images/spacer.png" style="width: 610px; height: 124px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.elisabethschaap.nl/assets/images/header/header_img_nl.png', sizingMethod=);" alt=""/>

see the difference?

This: style="width: 0; height: 0; (image not showing)
or this: style="width: 610px; height: 124px (image showing)

Greets Dimmy

[xwisdom]

Hi Dimmy,

 I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

TP3 will include an Image Widget which will allow you to set the Width and height of the image.

[SpeedStreet]

Hi Dimmy,

 I think the reason is because the Image TV does not set the width and height of the image. You can continue to use the RichText editor for the time being.

TP3 will include an Image Widget which will allow you to set the Width and height of the image.

X,

I don't know if this will help, but I tried using a bunch of different hacks to make PNGs work for me, and the one that works the best is the one at: http://homepage.ntlworld.com/bobosola/

FWIW, please everyone keep in mind that IE7 will support PNG transparency. 

[Bravado]

Well...I'll put my two cents in....

I think one thing everyone should realize is that the support for PNG alpha transparency is still not quite where it needs to be yet.  Granted, the support is there for many browsers and with some hacks it can be implemented.  But relying on it and designing a site around it might not be such a good thing yet.  I always do everything in terms of the "lowest common denominator". 

For example, when it comes to screen resolutions, 800x600 is about the lowest common denominator with 1024x768 quickly becoming the norms.  Now, this assumes that you're targetting the widest audience.  If you know that the majority is using higher screen resolutions then 1024x768 might be your target resolution.

Another example would be which revision of CSS to use.  Obviously, CSS 3 isn't really an option right now.  But you might want some CSS 2 stuff.  So developing your style sheets to degrade properly would definitely need to be addressed.

The point is that if you use PNG alpha transparencies, you'll need to think about how it'll degrade on browser that don't support transparencies or PNG's for that matter.  I certainly wouldn't like to visit a site and see a nasty grey box around an image.  I guess it just really depends on how you plan to use them and what your target audience will be. 

Just some food for thought. 

Jeff

[rthrash]

Agreed Jeff. I pretty much target IE 5.5+, Safari and Firefox now, with a smattering of Opera thrown in here and there. The other browsers just don't merit attention at this point for the amount of work required to support them (and the installed base compared tothe benefits it would bring to clients).

Regardless when they're deployed, they will all degrade acceptably so all the content will be accessible.

[SpeedStreet]

Agreed Jeff. I pretty much target IE 5.5+, Safari and Firefox now, with a smattering of Opera thrown in here and there. The other browsers just don't merit attention at this point for the amount of work required to support them (and the installed base compared tothe benefits it would bring to clients).

Regardless when they're deployed, they will all degrade acceptably so all the content will be accessible.

In my designs, I would concur with this philosophy.  5.5+

[gilbertn]

Have you guys seen Dean Edwards' "IE7 Compatibility Script"?  It does a fantastic job of making IE6 behave like a vaguely standards-compliant browser  - I gather that even Microsoft themselves were using it in the early stages of building IE7 - squashing a lot of the worst layout bugs and adding support for transparent pngs too (as long as one names the files according to his convention: "foo.png" should be called "foo-trans.png" as I recall).

I include it by default in anything I do.

Check it out at http://dean.edwards.name/IE7/

Edit:
You can amend Dean's code so that it'll give alpha transparency to any png, however named.  I assume that he made it non-default behaviour to reduce the rendering overhead, but since I don't usually include that much heavy graphical content, I tend to do this just so as not to have to rename files.

[Dimmy]

Have you guys seen Dean Edwards' "IE7 Compatibility Script"?  It does a fantastic job of making IE6 behave like a vaguely standards-compliant browser  - I gather that even Microsoft themselves were using it in the early stages of building IE7 - squashing a lot of the worst layout bugs and adding support for transparent pngs too (as long as one names the files according to his convention: "foo.png" should be called "foo-trans.png" as I recall).

I include it by default in anything I do.

Check it out at http://dean.edwards.name/IE7/

Nice

Would be great to have this as a plug-in

[gilbertn]

Would be great to have this as a plug-in

Maybe as a default include?

I'd suggest so simply because
1) it obviates the need for the usual mountain of hacks for IE6
2) It can be included on demand with conditional commments, so no redundant load / rendering

The point is really about marketing the backwards / forwards compatibility of MODx: you guys have done such an amazing job of separating code from mark-up and style that porting css-driven layouts is a snap.  If an out-of-the-box implementation  takes care of the legacy nightmare, it's easier still, and therefore that much more appealing to new adopters.

This is a more pressing issue than ever before in the face of IE7.  MS are frantically trying to stop people from using css hacks, since switching the stylesheet to a specialised one that will resolve IE6 bugs will make the page render peculiarly in IE7, as they seem to have gone to some trouble to do a better job of complying to standards (not that it comes anywhere close to passing Acid Test 2!).