Wc png me once
| Extension detail information wc_png_me_once | |
| PNG me baby one more time or One PNG to rule them all for Web-Crossing This is the official extension manual | |
| documentation state | stable  licence OCL |
| forgeproject | |
| mailinglist | |
| usergroups |  forEditors, forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced
|
| author(s) | Sudara |
| TER category | fe |
| dependency | |
<< Back to Extension manuals page
PNG Me Once
What this extension does
These days, professional websites do some fancy tricks like have transparent pictures. Oooh!
Internet Explorer 6 does not like transparent pictures. Boo!
(Sometimes we have to fix other people's mistakes. I don't mind doing this, but I don't want to do it more than once. So here is the end-all-be-all of PNG fixing-ness.)
This extension fixes foreground and background PNG transparency in IE6 using javascript ninja magic.
Motivation
It is 2007. Good quality design takes advantage of css and xhtml while supporting somewhat older browsers.
Designers in 2007 like transparent images. They make websites look better.
When I build a site I don't want to worry about their PNG-yness or whether Grandma on IE 5.5 cruising by my site will see something ugly like this:
Concept
This extension uses Javascript and (at run-time) 'fixes' your background and foreground transparent PNGs.
The Javascript is unobtrusive: It does not get in your way. It does not live in the <body> tags, but in the header tags.
That means your nice and pretty xhtml stays nice and pretty.
The extension is based on the amazing LowPro Library which is based on the ground-breaking, largely imitated, Prototype Javascript Library
What you need to do to make it work
The overview?
- Give any foreground PNG images a class name like the default "ie-img-png-fix"
So, you will have something like this:
<img source="/path/to/image.png" alt="i am going to be sooooo fixed" class="ie-img-png-fix"/>
- Give the elements holding your css background-images a class name like the default "ie-png-fix"
like this:
- Install the extension
- Include the "extension template" in your main template. That means, click "Template" in the menu, click on the root page of your site, click "Click here to edit whole template record", scroll down to Include Static From Extensions, and add the
- If you used the default class names suggested, you are done. Call it a day. Otherwise, to get fancy-pants, head to the constant editor.
Other fun things to do in the Constant Editor
Disable IE Check
This lets you play with the extension in other browsers such as firefox. Turn it on to watch your precious PNGS turn into spans with crazy background images in other browsers.
Beware! All of your precious pngs will go bye-bye in browsers other than IE when you have this enabled.
Enable Firebug console logging
Wheeee! Get information on your PNGs and your containing divs in firebug.
If you have not heard of Firebug, and you do anything serious with html/css, you will be 10 times more productive if you go and download it now at http://getfirebug.com
Coming soon: addition of firebug lite to the mix, which means you would be able to turn on console logging even in IE 6!
All your Gotchas (is/are belong to us)
But wait! I'm inserting a transparent PNG as a content element. How do I add a class name to my <img> tag?
A little bit of info here about tagging all pngs with class names via Typoscript
This adds the class to all images, it doesn't differentiate png from other types: tt_content.image.20.1.params = class="ie-img-png-fix"
But wait! I have a repeating background PNG, is this extension going to work?
Yup!
It checks out your css ninja-style. If you have a repeating background image, it tells the AlphaImageLoader to work in 'scale' mode, meaning the image will stretch to the size of the container (for example the div that your background image is in). Get it?
There is one gotcha with AlphaImageLoader: The png has to be at least 64x64 pixels. So I'm told by little mice running around cleaning up those blue backgrounds. Dum dum dumm....so watch out for those small repeating transparent backgrounds. Officially, impossible to implement in IE6!
But wait! My links aren't working anymore!
Oh, I feel your pain.
That's one of AlphaImageLoaders great features. You aren't using the web to click anything are you? No no...
Seriously, you have to do something or re-work your design, which sucks.
Here's the answer. You have to be a super-smart css/html guru.
Actually, you can just be you - but you do need to do this (and I quote from one such guru[1])
"What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work."
What does that mean?
Lets say you have a nice div with a nice PNG background image.
If you have links and other clickable things that appear inside this div then you need to make sure that your div does not have a position property set. That means "position:relative" and friends is not allowed. On top of that, your links (or something containing your links) must have a "position:something" to work properly.
Fun stuff.
But Wait! My containing background div is a different size than I expected!
The AlphaImageLoader says 'sorry, better luck next time!'
Actually, the truth is that there are two settings (three really, but lets pretend there are two) that affect the way the PNG gets loaded in IE6.
The first setting, which is the default, is called "image" - that means your div, or containing element of the background PNG will resize itself to the size of your background image!
The second setting, is called "scale" and is only used by this extension when you are using repeating background images.
What is the point?
Be aware of your PNG sizes and your containing div sizes. Make sure your div is large enough for your png, and vise versa.
In fact, just make them the same size unless you have specific other needs.
But Wait! What if my div already has a class?
What about if my div already has had a class before adding "ie-png-fix repeat"?
