OK - now to get this integrated to your vB so that any PNG24 images with transparency will display without that ugly grey backdrop in MSIE, please do the following:
In includes/functions.php:
Find:
PHP Code:
// parse PHP include ##################
if (!is_demo_mode())
{
eval(fetch_template('phpinclude_end', -1, 0));
}
Add After:
PHP Code:
$output = replacePngTags($output);
Find:
PHP Code:
// ###################### Start build datastore #######################
function build_datastore($title = '', $data = '')
{
global $DB_site;
// PNG-24 Alpha Transparency with MSIE
/* ***
* replacePngTags - Justin Koivisto [W.A. Fisher Interactive] 7/1/2003 10:45AM
* function to IE display of PNG transparencies - integrated to vB3 by Natch@mobileforces.org
* *** */
function replacePngTags($x,$img_path='/forums/images/',$sizeMeth='scale')
{
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5+
$msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
if( !isset($_SERVER['HTTP_USER_AGENT']) ||
!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
return $x;
// find all the png images in backgrounds
preg_match_all('/background-image:\s*url\(\'(.*\.png)\'\);/Uis',$x,$background);
for($i=0;$i<count($background[0]);$i++){
// simply replace:
// "background-image: url('image.png');"
// with:
// "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
// enabled=true, sizingMethod=scale src='image.png');"
// I don't think that the background-repeat styles will work with this...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
' src=\''.$background[1][$i].'\');',$x);
}
// find all the IMG tags with ".png" in them
$pattern='/<(input|img)[^>]*src=(\\\'|\\")([^>]*\.png)\2[^>]*>/i';
preg_match_all($pattern,$x,$images);
for($num_images=0;$num_images<count($images[0]);$num_images++){
// for each found image pattern
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// We do this so that we can put our spacer.png image in the same
// directory as the image - if a path wasn't passed to the function
if(empty($img_path)){
$tmp=split('[\\/]',$images[3][$i]);
$this_img=array_pop($tmp);
$img_path=join('/',$tmp);
if(empty($img_path)){
// this was a relative URI, image should be in this directory
$img_path=str_replace($_SERVER['DOCUMENT_ROOT'],'',dirname($_SERVER['PHP_SELF'])).'/';
}else{
$img_path.='/';
}
}
// If the size is defined by styles, find them
preg_match_all(
'/style=(\\\'|\\").*(\s?width:\s?([0-9]+(px|%));).*'.
'(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
// size was defined by styles, get values
$width=$arr2[3][0];
$height=$arr2[6][0];
// remove the width and height from the style
$stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
// Also remove any empty style tags
$modified=preg_replace(
'`style='.$arr2[1][0].$arr2[1][0].'`i',
'',
preg_replace($stripper,'',$modified));
}else{
// size was not defined by styles, get values from attributes
preg_match_all('/width=(\\\'|\\")?([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$width=$arr2[2][0];
if(is_numeric($width))
$width.='px';
// remove width from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
preg_match_all('/height=(\\\'|\\")?([0-9%]+)\\1?/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$height=$arr2[2][0];
if(is_numeric($height))
$height.='px';
// remove height from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
}
if($width==0 || $height==0){
// width and height not defined in HTML attributes or css style
if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i]);
$width=$size[0].'px';
$height=$size[1].'px';
}
}
// end quote is already supplied by originial src attribute
$replace_src_with=$img_path.'spacer.png'.$quote.' style="width: '.$width.
'; height: '.$height.'; filter: progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(src=\''.$images[3][$i].'\', sizingMethod='.
$sizeMeth.');"';
// now create the new tag from the old
$new_tag=str_replace($images[3][$i].$quote,$replace_src_with,
str_replace(' ',' ',$modified));
// now place the new tag into the content
$x=str_replace($original,$new_tag,$x);
$i++;
}
return $x;
}
// /PNG-24 Alpha Transparency with MSIE
In this last bit of code, please edit the line
PHP Code:
function replacePngTags($x,$img_path='[color=red]/forums/images/[/color]',$sizeMeth='scale')
so that the $img_path variable points to your forumroot directory from your ['DOCUMENT_ROOT']. This is relying on your having uploaded the attached spacer.png to your forumroot/images/ folder.
OK - now the only reason this will not work (except if you neglect to upload this excellent functions.php file) is if your calls to the PNG file of your choice does not have a full definition ... When I say work - your forum will still work no probs, it's just the script will pass over each PNG tag like the Angel of Death over a blood-stained door if you don't fit the bill
Read over his page if you want more info as I said Enjoy y'all ( and please remember to test this in IE - it will only make a difference if you use IE )
I've also attached for your own testing, the same image used in the test on the original author's site...
Have fun kiddies May the PNG24 be with you
LOL - well that attachment of the spacer.png doesn't work ;D you need to be able to see the 1x1 attachment to click on it hehe... feel free to grab it from http://www.mobileforces.org/forums/images/spacer.png
EDIT 26-08-2004: This links to a HOW-TO on using this with Avatars - it requires a small one-file, one-tempalte hack.
EDIT: 07-01-2005
The function this is based on was updated a while back to NOT require the width and height to be explicitly defined, and so this has now been updated to include the latest version of this function.
TO UPGRADE:
Just replace:
PHP Code:
// PNG-24 Alpha Transparency with MSIE
/* ***
* replacePngTags - Justin Koivisto [W.A. Fisher Interactive] 7/1/2003 10:45AM
* function to IE display of PNG transparencies - integrated to vB3 by Natch@mobileforces.org
* *** */
function replacePngTags($x,$img_path='/forums/images/',$sizeMeth='scale')
{
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5+
$msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
if( !isset($_SERVER['HTTP_USER_AGENT']) ||
!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
return $x;
// find all the png images in backgrounds
preg_match_all('/background-image:\s*url\(\'(.*\.png)\'\);/Uis',$x,$background);
for($i=0;$i<count($background[0]);$i++){
// simply replace:
// "background-image: url('image.png');"
// with:
// "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
// enabled=true, sizingMethod=scale src='image.png');"
// I don't think that the background-repeat styles will work with this...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
' src=\''.$background[1][$i].'\');',$x);
}
// find all the IMG tags with ".png" in them
$pattern='/<(input|img)[^>]*src=(\\\'|\\")([^>]*\.png)\2[^>]*>/i';
preg_match_all($pattern,$x,$images);
for($num_images=0;$num_images<count($images[0]);$num_images++){
// for each found image pattern
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// We do this so that we can put our spacer.png image in the same
// directory as the image - if a path wasn't passed to the function
if(empty($img_path)){
$tmp=split('[\\/]',$images[3][$i]);
$this_img=array_pop($tmp);
$img_path=join('/',$tmp);
if(empty($img_path)){
// this was a relative URI, image should be in this directory
$img_path=str_replace($_SERVER['DOCUMENT_ROOT'],'',dirname($_SERVER['PHP_SELF'])).'/';
}else{
$img_path.='/';
}
}
// If the size is defined by styles, find them
preg_match_all(
'/style=(\\\'|\\").*(\s?width:\s?([0-9]+(px|%));).*'.
'(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
// size was defined by styles, get values
$width=$arr2[3][0];
$height=$arr2[6][0];
// remove the width and height from the style
$stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
// Also remove any empty style tags
$modified=preg_replace(
'`style='.$arr2[1][0].$arr2[1][0].'`i',
'',
preg_replace($stripper,'',$modified));
}else{
// size was not defined by styles, get values from attributes
preg_match_all('/width=(\\\'|\\")?([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$width=$arr2[2][0];
if(is_numeric($width))
$width.='px';
// remove width from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
preg_match_all('/height=(\\\'|\\")?([0-9%]+)\\1?/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$height=$arr2[2][0];
if(is_numeric($height))
$height.='px';
// remove height from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
}
if($width==0 || $height==0){
// width and height not defined in HTML attributes or css style
if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i]);
$width=$size[0].'px';
$height=$size[1].'px';
}
}
// end quote is already supplied by originial src attribute
$replace_src_with=$img_path.'spacer.png'.$quote.' style="width: '.$width.
'; height: '.$height.'; filter: progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(src=\''.$images[3][$i].'\', sizingMethod='.
$sizeMeth.');"';
// now create the new tag from the old
$new_tag=str_replace($images[3][$i].$quote,$replace_src_with,
str_replace(' ',' ',$modified));
// now place the new tag into the content
$x=str_replace($original,$new_tag,$x);
$i++;
}
return $x;
}
// /PNG-24 Alpha Transparency with MSIE
With this
PHP Code:
// PNG-24 Alpha Transparency with MSIE
/* ***
* replacePngTags - Justin Koivisto [W.A. Fisher Interactive] 7/1/2003 10:45AM
* function to IE display of PNG transparencies - integrated to vB3 by Natch@mobileforces.org
* *** */
function replacePngTags($x,$img_path='/forums/images/',$sizeMeth='scale')
{
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5+
$msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
if( !isset($_SERVER['HTTP_USER_AGENT']) ||
!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
return $x;
// find all the png images in backgrounds
preg_match_all('/background-image:\s*url\(\'(.*\.png)\'\);/Uis',$x,$background);
for($i=0;$i<count($background[0]);$i++){
// simply replace:
// "background-image: url('image.png');"
// with:
// "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
// enabled=true, sizingMethod=scale src='image.png');"
// I don't think that the background-repeat styles will work with this...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
' src=\''.$background[1][$i].'\');',$x);
}
// find all the IMG tags with ".png" in them
$pattern='/<(input|img)[^>]*src=(\\\'|\\")([^>]*\.png)\2[^>]*>/i';
preg_match_all($pattern,$x,$images);
for($num_images=0;$num_images<count($images[0]);$num_images++){
// for each found image pattern
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// We do this so that we can put our spacer.png image in the same
// directory as the image - if a path wasn't passed to the function
if(empty($img_path)){
$tmp=split('[\\/]',$images[3][$i]);
$this_img=array_pop($tmp);
$img_path=join('/',$tmp);
if(empty($img_path)){
// this was a relative URI, image should be in this directory
$img_path=str_replace($_SERVER['DOCUMENT_ROOT'],'',dirname($_SERVER['PHP_SELF'])).'/';
}else{
$img_path.='/';
}
}
// If the size is defined by styles, find them
preg_match_all(
'/style=(\\\'|\\").*(\s?width:\s?([0-9]+(px|%));).*'.
'(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
// size was defined by styles, get values
$width=$arr2[3][0];
$height=$arr2[6][0];
// remove the width and height from the style
$stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
// Also remove any empty style tags
$modified=preg_replace(
'`style='.$arr2[1][0].$arr2[1][0].'`i',
'',
preg_replace($stripper,'',$modified));
}else{
// size was not defined by styles, get values from attributes
preg_match_all('/width=(\\\'|\\")?([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$width=$arr2[2][0];
if(is_numeric($width))
$width.='px';
// remove width from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
preg_match_all('/height=(\\\'|\\")?([0-9%]+)\\1?/i',$images[0][$num_images],$arr2);
if(is_array($arr2) && count($arr2[0])){
$height=$arr2[2][0];
if(is_numeric($height))
$height.='px';
// remove height from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
}
if($width==0 || $height==0){
// width and height not defined in HTML attributes or css style
if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i])){
// image is on this filesystem, get width & height
$size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$i]);
$width=$size[0].'px';
$height=$size[1].'px';
}
}
// end quote is already supplied by originial src attribute
$replace_src_with=$img_path.'spacer.png'.$quote.' style="width: '.$width.
'; height: '.$height.'; filter: progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(src=\''.$images[3][$i].'\', sizingMethod='.
$sizeMeth.');"';
// now create the new tag from the old
$new_tag=str_replace($images[3][$i].$quote,$replace_src_with,
str_replace(' ',' ',$modified));
// now place the new tag into the content
$x=str_replace($original,$new_tag,$x);
$i++;
}
return $x;
}
// /PNG-24 Alpha Transparency with MSIE
Happy New Year all... and God Bless all those affected by the Earthquake/Tsunami
vB Integration of "Normal display of PNG Alpha Transparency with MSIE" PHP script Details »»
Enjoy y'all 
)
About Developer
Visit Web Site
No support by the author.
07-13-2005, 01:24 PM
