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 :
- Upload ‘wp-pngfix’ directory to the ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- 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 
36 Responses to pngfix WordPress Plugin
giga
May 12th, 2008 at 15:18
Thanks for the post and plugin
Taha Paksu
May 12th, 2008 at 15:43
@giga: Thank you for using it
krembo99
May 13th, 2008 at 10:34
Shouldn’t we use a conditional comment here with the CSS ?? otherwise it will only overload browsers who don’t really need it
Taha Paksu
May 13th, 2008 at 10:38
@krembo99: don’t worry, its using it. I didn’t mentioned over there. Bu in the code there is. I only wrote the CSS and the jQuery part of the script.
krembo99
May 13th, 2008 at 12:05
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
Taha Paksu
May 13th, 2008 at 12:24
@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?
baron
May 13th, 2008 at 19:53
hi. Thanks for plugin
perfect.
regards
jocuri
June 3rd, 2008 at 21:42
Keep up the good work! 10q
eylultoprak
June 13th, 2008 at 20:02
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 js çözümlerinde malesef yorumlar kısmına eklemiş olduğum js kodları çalışmadı. Sizin ki çalıştı. Teşekkür ederim.
Birden böyle bir eklenti gördüğümü hatırlamıştım iyi ki de hatırlamışım..
eylultoprak
June 13th, 2008 at 20:02
http://wordpress.org/extend/plugins/search.php?q=png+fix
Taha Paksu
June 13th, 2008 at 20:13
@eylultoprak: WordPress’in arama motoru bi garip çalışıyor zaten. Neyse bulabildiğine sevindim. Ayrıca siten güzel olmuş. Kolay gelsin.
Lo
June 16th, 2008 at 21:27
It don’t work for me
eylultoprak
June 17th, 2008 at 01:17
@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ınca tabi bu kodlamay ile ilgili değil ie6′nın resmen aptallığı.. =)
Neyse teşekkürler görüşürüz..
Taha Paksu
June 17th, 2008 at 04:03
@eylultoprak: bbpress’i bildirmekle neyi kastettiğini anlamadım ya neyse. bende teşekkür ederim.
ponche
June 19th, 2008 at 17:29
Don’t works with lightbox 2,0… any ideas?
Taha Paksu
June 19th, 2008 at 18:58
@ponche: well that’s a interference problem with other javascript libraries. I’ll update the package with noconflict version.
Taha Paksu
June 19th, 2008 at 19:01
Try the new version.
ponche
June 19th, 2008 at 19:21
on wordpress downloads?
ponche
June 19th, 2008 at 19:47
@Taha Paksu:
same problem with new release (2008-6-19).. the fix works perfect but lightbox only appears when I desactivate PNG fix.
ponche
June 19th, 2008 at 19:52
… i need to fix a couple of images on only one page. it’s posible to select wich pages get the code?
Taha Paksu
June 19th, 2008 at 20:01
@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 html, add ” class=’png’ ” inside the img tag.
b. if you are using the editor in your admin page, then open the image properties dialog about the image you want to fix, and then add the png word into the class field.
then it should work i think.
José Luís
June 19th, 2008 at 23:39
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? Can you send me it or, at least, its URL?
Thanks in advance.
Taha Paksu
June 20th, 2008 at 00:10
@José Luís: I found them here http://www.adiumxtras.com/index.php?a=search&cat_id=2 its named Simple Smilies as you can see on the list. And thanks.
ponche
June 20th, 2008 at 00:39
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!
MuSnake
November 7th, 2008 at 01:04
Plugin conflicts with my other jQuery.
edit pngfix.php, line 31:
`’;`
to
`’;`
MuSnake
November 7th, 2008 at 01:06
Let’s try that again…
change line 31 of pngfix.php to:
[code]';[/code]
MuSnake
November 7th, 2008 at 01:07
getting closer…
change source attribute of line 31 of pngfix.php to:
[code] '. ABSPATH . WPINC . '/js/jquery.js[/code]
Voya
January 13th, 2009 at 23:21
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 you.
try this instead ( since google can’t read JS, or use an image! )
document.write ( “If you wish to donate, you can click one of the google ads “);
cheers
Taha Paksu
January 25th, 2009 at 14:29
Voya : Thank you
I’ll try that
N
February 10th, 2009 at 20:31
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($){“).
Brendan
March 27th, 2009 at 01:03
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. Any help would be appreciated
Brendan
March 27th, 2009 at 01:05
heres the link
shane plasebo
April 12th, 2009 at 09:28
Is it compatible with wordpress 2.7.1 ? Please help…
Gary Crossey
September 20th, 2009 at 20:43
I use the PNGFIX to fix PNG transparency images that I have posted on my gallery page: http://irishguy.info/graphic-design/ – the plug-in works great.
However, when trying to validate my website I got two warnings.
if(($.browser.msie)&(parseInt($.browser.version)<7)){
The first error is for the "&" and the second is for using the "<"
To solve the first error I changed the & to "&"
Still trying to figure out how to validate without a warning for the "<" (less than sign) being included.
Any suggestions. Thanks for the plug-n
Gary Crossey
September 20th, 2009 at 21:27
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.
Taha Paksu
September 21st, 2009 at 16:59
Is the plugin still working after you did that?