The Arcive of Official vBulletin Modifications Site.

About Developer · **Released**: 07-19-2004

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 the site 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 https://vborg.vbsupport.ru/showthread.php?t=61091 and https://vborg.vbsupport.ru/showthread.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 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

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

apokphp · #22 09-13-2004, 04:33 AM

Nach, they are currently stored in the database. Should I change that?

Natch · #23 09-13-2004, 05:21 AM

I'll be re-releasing this to include the new script which works without needing the height and widht... been too busy the last little while to do anything about it - you could try putting them into the filesystem - see how you go.

kall · #24 09-13-2004, 07:31 AM

Quote:

Originally Posted by Natch

I'll be re-releasing this to include the new script which works without needing the height and widht... been too busy the last little while to do anything about it - you could try putting them into the filesystem - see how you go.

I tried just sticking his new code where you had us place his old code...worked like a charm.

...well, except for wiping my logo out on vBaCMPS.

Natch · #25 09-13-2004, 12:52 PM

Well the only thing you would need to do is make sure you place the path back in to the spacer.png

kall · #26 09-13-2004, 09:10 PM

Quote:

Originally Posted by Natch

Well the only thing you would need to do is make sure you place the path back in to the spacer.png

Except for the fact that the vBaCMPS page is outside the main forums directory, and so I will need twox spacer.png?

kall · #27 09-14-2004, 02:48 AM

Quote:

Originally Posted by kall

Except for the fact that the vBaCMPS page is outside the main forums directory, and so I will need twox spacer.png?

Dang. I have no idea why it's disappeared on my index page... my other forum (new one) works fine.

Natch · #28 09-14-2004, 03:11 AM

The path - you should use a full path, or use the $_SERVER['DOCUMENT_ROOT'] superglobal to prefix your path to your spacer.png...

kall · #29 09-14-2004, 03:20 AM

I am using exactly the same block of text (the function) in both includes/functions.php .. on one site (the totally new one) it works marvellously.

On the other (my existing site), on the index.php, there is nothing visible above the navbar.

On checking the source, I get almost exactly the same thing on both, except on the one with no logo on index.php, the logo section looks like this:

PHP Code:


			
<!-- logo -->

<a name="top"></a>    

<table border="0" width="98%" cellpadding="0" cellspacing="0" align="center">

<tr ><td align="left"><a href="index.php?"><img src="/forums/spacer.png" style="width: 0; height: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://forums.nzboards.com/images/professional/misc/newlogo1.png', sizingMethod=scale);" border="0" alt="NZBoards 2.0" /></a></td>

<td align="right">&nbsp;</td></tr></table>

<!-- /logo -->

ie: it's not pulling the dimensions for some reason.

Natch · #30 09-14-2004, 03:28 AM

well it looks like you are using forums. format in the same situation as /forums/ - you need some consistency here

Suggest you change the path to / from /forums/...

kall · #31 09-14-2004, 03:35 AM

Yeah, it's on a subdomain really, the new one hasn't had that set up yet...maybe that is it.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04755 seconds Memory Usage 2,528KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (8)bbcode_php (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (6)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!