Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Wc png me once

From TYPO3Wiki
Jump to: navigation, search
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 document state list
licence OCL
forgeproject
mailinglist
usergroups list of usergroups forEditors, forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced
author(s) Sudara
TER category fe
dependency

<< Back to Extension manuals page

[edit]


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:

Grandma-looks-at-my.png

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

Include-from-extensions.png


  • 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.

Constant-Editor-Of-Doom.png

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"?