Mixxmag PNGfix
If you have ever opened a webpage with a transparent PNG in Internet Explorer 6, you will see an obvious problem. The images do not appear transparent but adopts a light blue background. which is unsightly to say the least. This is the purpose of the PNGfix, to allow transparent PNG images to work correctly in the web browser Internet Explorer 6. A common way around this is to use a range of different Joomla! extensions which can be applied to your site. However, this is already built in to new Rocket Theme templates.
Below is a list of all the Rocket Theme Templates which have the PNGfix described above, incorporated into it. Also, all new templates releases will contain this as it has become an recurrent feature.
- Mixxmag
- Vertigo
- Versatility4
- Replicant2
- MetaMorph V2
- MetaMorph
- Perihelion
- TerranTribune Dark
- TerranTribune
- Hyperion
- Catalyst
- Chromatophore
However, the PNGfix causes problems with PNG images that have need been defined in respects to their dimensions (width and height). The images then become bloated and look highly distorted. As always, there are simple methods around this.
With the templates dating from April 2008 onwards, the PNGfix was changed so you could which images you wanted to apply the fix to which cuts down on conflicts as elaborated upon below. This fix works by adding a class to the HTML code of the image. This class is aptly named
fix. We have an example of image HTML code below:-
<img src="image.jpg" alt="Image" width="10" height="10" border="0" />
Now add
class="png" to the code such as:-
<img src="image.jpg" alt="Image" width="10" height="10" border="0" class="png" />
As illustrated earlier, undefined PNG images come into conflict with the PNGfix. There are a range of simple solutions to correct this problem:-
- Define the width and height in the <img> HTML code
In the situation where you have bloated PNG images inside content items, the procedure to correct is simple. First, enter your content item in the Joomla! administrator. Next, select the HTML icon on the content toolbar - this only applies if you use a content editor such as TinyMCE. Find your <img> code which should appear similar to <img src="image url" >. Change this to <img src="image url" width="100" height="199"> . The height and widths are defined in terms of pixels so alter the number 100 accordingly.
- Change the PNG to another format
This solutions is most applicable to the Joomla! default extensions such as the Syndicate Module. We basically convert the .png images to something which will not cause problems such as .gif. Rename the images from image.png to image.gif and change the references in the module files.
- Transparent PNGs without the PNGfix
The transparent PNG image illustrated earlier are what are called PNG32. These are high quality PNG images. However, you can have transparent PNG images in PNG8-bit format which do appear in IE6 correctly. There is a reason against this in certain circumstances as the quality is reduced dramatically. Only small images or icons work well in PNG8-bit format.
The best way to choose between PNG images is with Adobe Fireworks. In this image editing program, select PNG8 from the dropdown menu which is placed in the side toolbar called, Optimise and Align.
If you wish to remove the PNGfix from the template, you have to edit the template_ie6.php. Find and remove the following code:
/*
NEW PURE CSS PNG FIX SOLUTION
use class="png" to implement
*/
html .png,
div .png {
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "<?php echo $template_path; ?>/images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}
