Natch
07-04-2004, 05:55 PM
OK - I have started working on this again - but I need a hand.
The premise is that PNG transparency is the way of the future, except for the fact that IE will not render those transparencies without a grey fill where it should be transparent - not really ideal ;) ... however there is an IE-only ActiveX filter that will cause them to render properly, and I have had it in mind for a while to integrate this into vB somehow ...
OK - here is where I am at: I have the PHP function (gotten from the guy who coded it originally (http://www.koivi.com/ie-png-transparency/)) and I have inserted this into functions.php at the end:// 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=''){
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5+
$msie='/msie\s([5-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.AlphaImag eLoader(
// enabled=true, sizingMethod=scale src='image.png');"
// haven't tested to see if background-repeat styles work...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale'.
' src=\''.$background[1][$i].'\');',$x);
}
// OK, time to 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++){
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// 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));
}
// 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 this 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 this from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
// if either height or width were left out, son't replace this image this allows
// the image to show up (not fixed) instead of not displaying the image at all
if($width==0 || $height==0)
continue;
preg_match_all('/src=(\\\'|\\")([^\"]+\.png)\\1/i',$images[0][$num_images],$arr2);
if(isset($arr2[2][0]) && !empty($arr2[1][0]))
$image=$arr2[2][0];
else
$image=NULL;
if(!empty($img_path)){
// We do this so that we can put our spacer.png image in the same
// directory as the image
$tmp=split('[\\/]',$image);
array_pop($tmp);
$img_path=join('/',$tmp);
if(strlen($img_path)) $img_path.='/';
}
// 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=\''.$image.'\', sizingMethod='.
'\'scale\');"';
// now create the new tag from the old
$new_tag=str_replace($image.$quote,$replace_src_wi th,
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
However, so far, when I try to apply this function in (for example) print_output(), it will not return the right output ...
The premise is that PNG transparency is the way of the future, except for the fact that IE will not render those transparencies without a grey fill where it should be transparent - not really ideal ;) ... however there is an IE-only ActiveX filter that will cause them to render properly, and I have had it in mind for a while to integrate this into vB somehow ...
OK - here is where I am at: I have the PHP function (gotten from the guy who coded it originally (http://www.koivi.com/ie-png-transparency/)) and I have inserted this into functions.php at the end:// 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=''){
$arr2=array();
// make sure that we are only replacing for the Windows versions of Internet
// Explorer 5+
$msie='/msie\s([5-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.AlphaImag eLoader(
// enabled=true, sizingMethod=scale src='image.png');"
// haven't tested to see if background-repeat styles work...
$x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
'Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale'.
' src=\''.$background[1][$i].'\');',$x);
}
// OK, time to 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++){
$original=$images[0][$num_images];
$quote=$images[2][$num_images];
$atts=''; $width=0; $height=0; $modified=$original;
// 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));
}
// 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 this 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 this from the tag
$modified=str_replace($arr2[0][0],'',$modified);
}
// if either height or width were left out, son't replace this image this allows
// the image to show up (not fixed) instead of not displaying the image at all
if($width==0 || $height==0)
continue;
preg_match_all('/src=(\\\'|\\")([^\"]+\.png)\\1/i',$images[0][$num_images],$arr2);
if(isset($arr2[2][0]) && !empty($arr2[1][0]))
$image=$arr2[2][0];
else
$image=NULL;
if(!empty($img_path)){
// We do this so that we can put our spacer.png image in the same
// directory as the image
$tmp=split('[\\/]',$image);
array_pop($tmp);
$img_path=join('/',$tmp);
if(strlen($img_path)) $img_path.='/';
}
// 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=\''.$image.'\', sizingMethod='.
'\'scale\');"';
// now create the new tag from the old
$new_tag=str_replace($image.$quote,$replace_src_wi th,
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
However, so far, when I try to apply this function in (for example) print_output(), it will not return the right output ...