vBulletin LTS

← Back to vBulletin 3.0 Add-Ons

vB Integration of "Normal display of PNG Alpha Transparency with MSIE" PHP script
Mod Version: 2.00, by Natch
This modification is in the archives.
vB Version: 3.0.4 Rating: (0 vote - 0 average) Installs: 7
Released: 20 Jul 2004 Last Update: Never Downloads: 2
Not Supported  

File Edits: 2 (in one file)
New Files: 1 (forumroot/images/spacer.png)

This script, for those that don't know it, is a server-side solution to the faulty display of 24-bit alpha transparencies in MSIE...

For more info please read up on http://www.koivi.com/ie-png-transparency/ created by the d00d that wrote the script - all the props go to him!

Created in response to my need to bloody well get it right after so many months, as well as index.php?t=61091 and index.php?t=66846...

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;

    if ($title != '')
    {
        $DB_site->query("
            REPLACE INTO " . TABLE_PREFIX . "datastore
                (title, data)
            VALUES
                ('" . addslashes(trim($title)) . "', '" . addslashes(trim($data)) . "')
        ");
    }
} 
Add After:
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 email
* *** */
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

Will work:

<img src="$vboptions[bburl]/images/misc/someimage.png" width="10" height="10" />

Will not work:

<img src="$vboptions[bburl]/images/misc/someimage.png" />

Will work:

<img src="clear.gif" style="background-image:url($vboptions[bburl]/images/misc/someimage.png);height:10px;width:10px" />

Will not work:

<img src="clear.gif" style="background-image:url($vboptions[bburl]/images/misc/someimage.png)" />

Will work:

<body style="background-image:url($vboptions[bburl]/images/misc/someimage.png)">

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

Spoiler (click to open)


OK - a solution to this is a separate hack:

In includes/functions_showthread.php:

Find:
PHP Code:
        if (empty($avatarurl) OR ($bbuserinfo['userid'] > 0 AND !($bbuserinfo['showavatars'])))
        {
            $show['avatar'] = false;
        }
        else
        {
            $show['avatar'] = true;
        } 
Add below:
PHP Code:
        if($avatarurl)
        {
            $avatarbits = getimagesize($avatarurl);
            $avatarimgsrc = $avatarbits[3];
        } 
In postbit / postbit_legacy:

Find:
Code:
<img src="$avatarurl"
Add after:
Code:
<if condition="$avatarimgsrc">$avatarimgsrc </if>
HTH mate - this puts the width and height properly formatted for the <img src tag - if you want to format it using style, then you would use $avatarbits[0] and $avatarbits[1] for width and ehight respectively and then format your $avatarimgsrc statement accordingly
Code:
$avatarimgsrc = "style="width:$avatarbits[0]px;height:$avatarbits[1]px"

Close
 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 email
* *** */
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 email
* *** */
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

Download

No files for download.

Supporters / CoAuthors

  • Natch

Screenshots

 


vblts.ru supports vBulletin®, 2022-2024