WP-UnitPNGfix includes the ‘unitpngfix.js’ javascript file if the browser is IE6 or lower. In plain words, it implements the solution for the PNG trasparency provided by Unit Interactive Labs. It works on both img objects and background-image attributes.
Version, compatibility, licensing
- Version: 0.2.1
- WordPress ready: Yes
- WordPress Mu ready: Yes, as plugin
- Minimum version required: WordPress 2.0 (but it is likely to work on the previous versions too), WordPress Mu 1.0
- Compatible up to: WordPress 2.6, WordPress Mu 2.6
- License: GPL v3
Changelog
- 2008 09 01:
- changed
bloginfo('url')tobloginfo('wpurl') - updated
unitpngfix.jsto the latest release from Unit Interactive (2008 08 31) - release 0.2.1
- changed
- 2008 08 13:
- path to clear.gif fixed
- release 0.2
- 2008 08 09:
- readme.txt update
- release 0.1.4
- 2008 08 08:
- cleaner HTML
- release 0.1.2.
- 2008 08 04:
- readme.txt becomes compatible with WordPress Extend standard
- committed to WordPress Extend
- release 0.1.1
- 2008 08 02:
- release 0.1
TODO
The plugin is so simple that I cannot see any improvement. But I accept advices!
Download
[download id="5"]
Installation
- Unzip the downloaded file;
- Upload the “wp-unitpngfix” directory to the “/wp-content/plugins/” directory of your WordPress/WordPress Mu installation;
- Go to the “Plugins” section of your administration interface and activate the plugin.
IMPORTANT: do not change the name of the directory which contains the plugin, it will break the plugin.
Notes
WP-UnitPNGfix is hosted by WordPress Plugin Directory and the file you download here is exactly the same you can download from that directory.
Great plugin!
I’ve been strugling with several transparency fixes, but none sofar provided a decent fix for backgrounds. With this plugin no coding is required, just install and it works.
Thanks!
Thank you Erwin! I am glad you found it useful!
hi. Thanks for plugin
perfect.
Regards
u’re welcome
This fix doesn’t work for PNG’s, that are repeated at backgrounds. Some solutions at web using stretch filter of IE and therefor chessboard PNG’s (10×10 with 4 squares a 5×5 diagonal 80% and 40% alpha black) would be extra ordinary stretched to giant squares instead of repeated chessbord optic.
Any solution in progress to make it repeateable too ?
“in plain words”…(?)
What does this actually do? Does it make your webpage readable for people with an old browser? Could you make your description readable for old people like me?
(sorry for the double post, remove the first
) Great plugin! Simple but greatly important. I’ll be adding this to my must-have list!
@codestyling: I know that issue. Anyway, it depends on the javascript I include in the Plugin, so any improvement in that sense only depends on the Unit Interactive Labs (unless you known the way to do that and want contribute to the Javascript code).
@Jamie Souef: thank you! I appreciate that!
@Peter: are you kidding, aren’t you?
@Peter: ok I just figured out that maybe you were not kidding :-/ This plugins just allows to correctly see transparent PNG images on the IE6 browser, both for PNG inserted as ‘img’ HTML tag and for PNG used as background in CSS classes.
Hi there, thanks much for the great plugin – it’s so easy to use. I’ve noticed a strange issue and haven’t been able to find a solution. My png’s are successfully transformed, but the images appear with the typical IE no image box (the transparent box with the little red x in the corner). Has anyone else experienced this. I am running IE 6/7 in Parallels on a Macbook Pro, so maybe this has something to do with it.
Any ideas?
Thanks,
Jonah
@Jonah West: Hi! To the best of my knowledge, no one has experienced the same so far. I’ll investigate on it, and if I find out something, I’ll post it here.
this isnt working for background images for me. could i be doing something wrong?
Hi there!
Haven’t tested this one yet, but that’s just a matter of time (already downloaded it!)
Anyway, in “unitpngfix.js” the path to “clear.gif” seems to be wrong. Could this be the cause of Jonah West’s issue?
@Camilo: you are right, the path to clear.gif is wrong! And now I am asking myself how this is worked for other people (including me).
@Jonah West: try to create an “images” directory and move clear.gif inside it!
I’ll try this mod asap and then I’ll update the plugin. Anyway, it is unbelievable that the unitpngfix is distributed just so.
Remark: creating the images dir do not work. I think I found a solution. I’ll update the plugin as soon as I tested it.
Ok, the path now is fixed! And the problem of Jonah should be solved too.
Download the new release 0.2.
i just installed the new version and its still not working for background images for me. the background image is part of a section in a different plugin, would that matter?
I can’t get this plugin working correctly. I’m using 0.2 as well.
I don’t have a “real” version of IE6 to test this on, I’m using IETester which used to work great for me at my old job and at home doing non-Wordpress powered sites. It showed things exactly the same way IE6 does.
When I activate this plugin and go to the page that has 3 PNG background images they load then disappear.
Any ideas?
@Brooke: I have no idea about your problem. Have you tried using only the Unit PNG Fix without my plugin? Just for understanding what the real problem is about. Moreover, could I see the site we are talking about?
@John Deszell: the same happened to me using a fake-IE6, but with a normal IE6 is ok. Could you try with a real-IE6 and let me know?
In any case, these problems seems to be related to the Javascript fix (written by Unit Interactive Labs) rather than my plugin. Anyway, let me known.
Nemo, I will try that when my Dad get’s home tonight, his work laptop has a real version of IE6.
I’ll let you know how it goes.
@John Deszell: Thank you.
Hey Nemo,
Unit PNG Fix didn’t quite work on my website, it actually destroyed the layout. Nothing to do with your plugin, just a problem with the actual Unit Interactive solution.
Anyway, in wp-unitpngfix.php, change “get_bloginfo( ‘url’ )” to “get_bloginfo( ‘wpurl’ )”, for the later is the actual wordpress url, not the site url. get_bloginfo( ‘url’ ) tries to load the javascript, in my case, from http://www.podbr.com/wp-content/…, whereas get_bloginfo( ‘wpurl’ ) tries to load http://www.podbr.com/wp/wp-content/…, which is the right way for me. Don’t get worried about it. It exists, at least, since WP 2.0 and works correctly in all cases.
And another tip for you: since you need the complete path to clear.gif from the root, try turning unitpngfix.js into a php file (by renaming it, using .htaccess) and change the code to:
var clear=”/clear.gif” /*path to clear.gif*/
Don’t forget to change the comments from // to /* */ , since PHP kind of “trims” the file in some installs!!
var clear="/clear.gif" /*path to clear.gif*/var clear=”/clear.gif” /*path to clear.gif*/
(had to add spaces in php code for the comment to work)
Sorry for the “spam comments”, but it’s just getting on my nerves! If nothing displays beyond this point, try contacting me by e-Mail and I’ll mail you the code. The following should be wrapped in PHP tags before /clear.gif:
dirname( $_SERVER[ 'REQUEST_URI' ] );
@Camilo: thank you for the tips. I’ll surely make the change on “bloginfo”. About the second tip, I’ll think about that: in the past some browsers refused to load a css provided by a php script.
Bye,
Nemo.
My congratulation with gold’s second place on Olympic Games. Basketball team was the best!
Hey again!
About the second tip: don’t really know what problem this is, but you could try setting the content type using the header function!
@Camilo: yes, I thought the same! I’ll try
Hi… was wondering if you fixed the plugin so that it works for repeat background images. It’s not working for me.
@Peggi: that problem does not depend on my plugin. It is due to the ‘unitpngifx.js’ file, which is the core of my plugin but is developed by Unit Interactive Labs (http://labs.unitinteractive.com/unitpngfix.php).
Is this plugin updated to use the latest unit png fix from two or three days ago? Or can you tell me how to mod the plugin to use this newer version? Thanks
@Leland: no, it’s not. But thank you: I did not know about the new version. I’ll update the plugin soon.
@Leland: updated to version 0.2.1 and included the latest version of unitpngfix.js (which is even newer than the one you notified me!)
@Camilo: I changed ‘url’ with ‘wpurl’. Anyway, the .js is still a simple .js. I did so because is simpler to update (with updates by Unit Interactive) and, above all, because it works, so, why change it?
Hi
I have upgraded to 2.2.1 and am still having odd issues in IE 6: I also see the red x and box around a png embedded as an image, not a background. On the background png’s, I have on some pages partial transparency with a slight bluish grey background visible around the images, and then on other pages the exact same images load with an odd grey and white gradient…very odd. Anyone else having this odd behaviour?
Rob
Sup, Whats the chance of getting indexed in Google? They never approve!!!BTW, Nice blog, but I do not like how free blogs work. They deleted mine….~BOB
@Bob: Uh?
Nemo,
Thanks for making this plugin. I had had it installed for about 2 months plus until today. I was having complaints about my site in IE 6, that people couldn’t click the links in my posts.
I was able to replicate the problem using ‘Multiple IEs’. Only after I deactivated this plugin was I able to get the links to be clickable again.
Now, I realize your plugin just incorporates the javascript file into WordPress, so you may not know the answer to my problem. Any my details are kind of scarce, I don’t know how else to describe my problem.
Plus, I suppose that other plugins could conflict in general. I guess I more wanted to list this issue here in case someone else has a similar problem, see if they find a fix that I might be able to implement….or maybe to see if my basic description is enough to illicit a solution.
First off, thank you so much for creating this plugin. Sincerely appreciate it.
I too am still having the ‘red x’ issue when we use it.
I verified that we are using version 0.2.1 of the script and that the pathway to ‘clear.gif’ is correct. We using WP 2.6.3 with this being the only plug-in running. The blue/white background of the PNG goes away, but it is surrounded by a thin white border and the red x appears at the top.
Any suggestions? Anyone else having this trouble?
Hi Nemo,
I dont see the plugin works on my blog. I don’t know why.
There are blue boxes appear to be the background for the png images. Would you help?
Little bit busy in the last time. I’ll check this out asap.
I can’t believe how great this plugin is, I wish I had a tech blog so I could rave about it. I worked all weekend on my theme and then when I checked in Ie 6 it was totally trashed. Its still a little off but at least everything is there and readable, I’m assuming everybody will be upgrading anyway.
Thank You for your work
Thank you for working and releasing this plugin. It is very helpful for many people including me.
But I have a problem. If I embed a video, from youtube for example, the plugin does not work anymore. Please have a look at my website in progress and let me know what I should change, even in the plugin.
Thank you very much!
Hello…I am having the same problem with the box around the png images in IE6 along with the red x in the upper left corner. Has anyone succesfully resolved this problem? I am using WordPress 2.7 and the latest * Version 0.2.1
* Updated 2008-9-1 of UnitPNGfix
Help!!
Thanks
I’ve just thought of a cross browser work around for the clear.gif issue.
Just declare it with PHP code before you load the file like:
function wp_pngfix_echo() {
$workdir = get_bloginfo('wpurl') . "/" . basename(WP_CONTENT_DIR) . "/plugins/wp-unitpngfix
echo <<<UNITPNGFIX
var clear = "$workdir/unitpngfix/clear.gif"
UNITPNGFIX;
}
add_action('wp_head', 'wp_pngfix_echo');
and remove the clear.gif declaration from the js file…
Mispelled it, sorry:
function wp_pngfix_echo() {
$workdir = get_bloginfo('wpurl') . "/" . basename(WP_CONTENT_DIR) . "/plugins/wp-unitpngfix";
echo <<<UNITPNGFIX
var clear = "$workdir/unitpngfix/clear.gif";
UNITPNGFIX;
}
add_action('wp_head', 'wp_pngfix_echo');
Ciao Vincenzo:
Grazie mille for this cool plugin! I just activated it but it doesn’t seem to work with my blog. Does anyone know why I’m still getting gray in the background on my blog’s logo (in IE6)? It’s set as a background image like this…
#header{
background: url(images/logo_em.png) no-repeat top center;
width: 100%;
height:150px;
margin: 12px 0 0 0px;
padding: 10px 10px 10px 0px;
text-align: left;
text-transform: invisible;
Do I need to add something to the header?
@Camilo: thank you very much for the fix. I’ll merge it asap to the official code. I am a kind of busy lately
@Peppino: you don’t need to do anything else, just activate the plugin. The only reason I get in mind in this moment is that your wordpress theme is not following the guidelines and hasn’t got the wp_head() call in the header.php file. Visit your blog, view the source code of the HTML page and check if the pngfix.js file has been included. If not, it’s probably what I thought.
@Peppino: sorry, the right name of the file you have to check is unitpngfix.js. Just try to look for it in the source code of the loaded homepage.
I was just having the problem with the red x, but I managed to fix it. I went into the .js file and put the full url to the clear.gif. Works a treat now.
This seems to be causing PNGs to just disappear for me in IE6! Can’t share website right now, got an email address I can post the URL to?
@Jake: you can find my contacts in the homepage (http://neminis.org/). Anyway, the fix suggested by “D.” (the guy which commented before you) should be ok for you as well.
Let me, know.
I love the plugin but seem to have a problem when I use negative margins. It somehow cuts off the background image. If I want to display a DIV (div1) that overlaps it’s container DIV (div2) and then have a background image on div1 as well as an image in the html code it workds perfectly for the image but cuts the background image to the constraints of the container div (div2). I’m hoping that all makes sense?!
Great plugin, keep up good work…
very goooooooooodddddd.
Hi, I’m dealing with a strange problem with the png hack. for some reason, the path was incorrect to the clear.gif and I was getting a red x. I adjusted the path and the red x went away. Now it seems like the pngs within the page are shrinking up due to the plugin. Any ideas what is going on?
I will surely donate if I can get this thing working.
Thanks a lot