When building sites for clients, one of the many requirements is for the site to work in IE6. This is mainly because the clients my company serves are based in South Africa. Most of the time this means simply adding an IE6 specific stylesheet and doing minor tweaks. Sometimes it means a bunch of seperate code than allows IE6 to regress gracefully. However every time requires some kind of transparent PNG work-around.
A favorite IE PNG Fix my lead front end developer, Alex, liked to use was Supersleight. I wasn’t going to question his motives, so I let him get on with it (good bosses don’t micro manage apparently). Most of the sites built were static xhtml sites, and occassionally some needed to be integrated into WordPress.
About Supersleight
Supersleight works by using a transparent gif to replace the PNG image with an alpha channel (transparency) in question. It makes the origional image behave like a background image, leaving you with a transparent alpha channel effect – all very clever stuff really.
However WordPress poses a slight problem with Supersleight, because the link to the transparent gif is absolute in a javascript file. This means you need to put the transparent GIF in the root of your WordPress install? (I mentioned before I don’t like messing with files outside of the wp-content folder. It’s just not right I tell you!
This posed lingering questions – what happens if your WordPress install is in a sub domain? What happens if you move your WordPress install (from a local install to a proof to the clients site)? What happens if you want to put the transparent gif in your theme folder?
Solution: Each time you would have to change the path to the gif, you would need to update the Supersleight file. Umm, no thanks.
Step up WP-Supersleight
This WordPress Plugin is ridiculously simple. It does two things.
- Adds the relevant code in the of your website, where the Supersleight Javascript file is called. This requires wp_head(); function to be called in your theme.
- Dynamically updates the path to the transparent gif (stored in the plugin folder) so no matter what URL your blog is on, Supersleight will not break.
The plugin version is currently on version 1.0.1, and doesn’t need anything other than uploading and activation.
A bit more detail
For Supersleight to work, you need to call the javascript file in the <head> section of your blog. The plugin hooks into the wp_head(); function, so make sure this is called in your theme. If your theme does not call the wp_head(); function, the plugin will not work (why would you not call the wp_head(); function in the first place. Anyway the plugin outputs code that looks a bit like this:
<!–[if IE 6]> <script type=”text/javascript” src=”[path goes here…]/wp-content/plugins/wp-supersleight/supersleight.js.php”></script> <![endif]–>
So the script is safely nested in an if statement so it only initiates in IE6. This all happens in the <head> of your document.
You might notice the javscript file is named a php file. This is so that the file can update itself with the correct path to the transparent gif.
Then inside the supersleight.js file it updates the path to the x.gif file. This looks a bit like this:
var shim = ‘[path goes here…]/wp-content/plugins/wp-supersleight/images/x.gif’;
Installation
Pretty straight forward. Download the plugin (below), upload to your plugins folder and activate. Then Supersleight will be activated in your WordPress website.
Ready to give it a try
- Rather use something newer as this is not a maintained plugin. Thanks for your interest.
Let me know what you think in the comments below.
