pngfix WordPress Plugin

This plugin uses CSS technique to fix the png image transparency issue and jQuery to apply this script to all of png images shown in the page. The CSS code added by the script is :

.png {
background-image: expression(
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + (this.tagName==\'IMG\' ? this[\'src\'] : this.currentStyle[\'backgroundImage\'].split(\'\"\')[1]) + ")",
this.runtimeStyle.backgroundImage = "none",
this.src = "{plugindir}/pixel.gif",
this.width = this.style.width | this.clientWidth,
this.height = this.style.height | this.clientHeight
);
}';

And the jQuery code which applies this css to all of the png images :

$(document).ready(function(){
if(($.browser.msie)&(parseInt($.browser.version)<7)){
$("img[src$='.png']").each(function(){$(this).addClass("png");});
}
});

That’s all. The jQuery library is included in the plugin so you don’t need to modify anything.

Installation is simple. Just follow these steps :

  1. Upload ‘wp-pngfix’ directory to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Thats all. Go to any page which contains some png images with IE and check if there’s any errors.

This should fix them all except backgrounds now.

Download: Official WordPress plugin page : http://wordpress.org/extend/plugins/wp-pngfix/

Note: This type of fixes cause slight color changes to your png images with background color, so you may have to change some css.If you use images without inner backgrounds and only need to show the background transparent, forget that note 🙂

53 comments

  1. Well than, It looks like a great code (and lighter than others I have seen…)
    Soon to be on my website I hope .
    (Although I think the best solution would be to CONVINCE as much people as possiable to bandon IE 🙂 )

  2. @krembo99: I think the best solution is to convince the web designers not to design IE only web sites. yesterday I was applying to a job over the net and their site just said me : “this only works with IE6+” 🙂 How can we leave using IE then?

  3. WordPress Plugins sitesinde malesef arama yapmama rağmen çıkmadınız. Onun yerine google ile ara seçeneğini seçtim ve ancak o zaman çıktı bilginize. Bunun yanında gerçekten başarılı. Beni bir ufak dertten kurtardınız . Artı olarak diğer

  4. @Taha Paksu BBpress ‘in sorunları bitmek bilmiyor malesef. Bunu istersen bildirmen uygun bir davranış olur.

    Teşekkür ederim sizinki de bir o kadar güzel 🙂
    Fakat eklentiden vazgeçtim. ie6 ‘da site arasıra takılmaya başladı pngfix yapınc

  5. @ponche: yes but you need to edit the code.

    Well do it like this :

    1) find the line starts with “echo” and delete below it. And then write “}?>” to the end. without the quotes.
    2)then find the images you wish to fix and then;
    a. if you know htm

  6. Nice plugin! What a shame I only found it now… I had so many troubles with PNG transparency due to IE6…

    But I think there is something I can ask you (allthough it’s a little off-topic…) 😉

    What is your set of smilies? Where did you get it? Ca

  7. thanks for the help taha paksu, but i can’t improve your plugin with the lightbox.. i give up and finally i put gif instead the pngs.

    good luck with the plugin! works perfects except with lightbox!

  8. Hey kardasi! This might be useful, i will test it out later! 😀

    Just a note – use javascript without noscript to handle this : If you wish to donate, you can click one of the google ads – it’s against google policy, if they find out that, they will ban

  9. Another solution that I found to work, is to add “jQuery.noConflict();” at the beginning of the pngfix.php’s javascript code (right before “jQuery(function($){“).

  10. I installed your code for a png hack and at the top of the page on IE 6 I there is excessivel code ” ‘; ?>” (without the quotes)

    On the most recent safari I see ‘; ?>

    I have been trying to get these hacks out for a while and have had no luck.

  11. GOT MY SITE TO VALIDATE WITHOUT ANY VALIDATION WARNING – with PNGFIX

    In the pngfix.php

    Revise the & and < (less-than) sign with the code below.

    if(($.browser.msie)"&"(parseInt($.browser.version)<7)){

    Hope that helps.

  12. No PNG fix is perfect (IE6 just has too many problems to fix easily). You cannot use a .png as a repeating background, it will only stretch to fill the element’s dimensions. Still, at least you’ll get that lovely alpha transparency look in your ten ye

Leave a Reply

Your email address will not be published. Required fields are marked *