PNG support in vB3?

[Bailx]

i've been trying to use a php fix (i've been using javascript for a while) for my png images with transparency....

problem is i guess i'm not putting the code in the right spot.... i've tried global & index.php.... with no success.....

i was kinda hoping this would work since it says it can do background images (which i need to do in transparency for my site to look right)...

http://www.koivi.com/ie-png-transparency/

any help appreciated

[Bailx]

no interest in this huh?


ah well

[Faruk]

Why people have not hacked IE6 and written patches for it is beyond me. People will spend hours cracking software but won't spend 5 min removing stupid crap like that.

I'll rewrite my reply later.

Very simple: people who would be interested in that will just say "why the hell bother with that, when you shouldn't use IE6 to begin with and just switch to Firefox or Mozilla?!"

I mean, hacking IE6 will just not be worth it. You WON'T suddenly get 90% of all IE-users to switch to your hacked version, and hacking it WON'T make it anywhere near as powerful and flexible and useful as Firefox or Mozilla (or Opera). So it's a waste of time to hack IE for png-support, really.


( Mozilla)

[Faruk]

what i meant to say is, yes, there is a bug in explorer preventing from displaying png properly. png images w/ transparancy need to be embeded differently if you are to support explorer users.
so the question is if vB3 will "support" png images, meaning will it automaticaly generate the code or will i have to hack?

Why on EARTH would vBulletin have to "support" PNG's when the vBulletin design doesn't use PNG's???

vBulletin has nothing to do with PNG's, except for allowing users to upload them as attachments. If you change your vbulletin style and use transparent png's in them, then you are responsible for finding ways to make it work in Internet Explorer if you want to support explorer users.

vBulletin supports Explorer users fine, by not using any transparent PNG's in their design. Whatever you adjust to that, is your responsibility, and not vBulletin's.


edit:
As an added note of relevance to this discussion:

Due to the incredible lack of support for PNG's (and CSS1/CSS2/XHTML) in Internet Explorer (any version), my lovely far-more-efficient and completely customizable style for vBulletin is not going to be available to IE-users. My new site will have 2 main styles: a standard one that works effectively flawless in all browsers, and a far more advanced one (with CSS replacing many of the javascript vB3 has) that'll only work in Gecko-based browsers, Opera, Safari or Konqueror, i.e. browsers that do keep up with 5-year old Webstandards.
If you're like me, and want to make a really flexible style that makes use of transparent PNG's (which are actually the future, as opposed to being dead), you could do the same: make a separate style and just explain to IE users why they can't see/use it.
'Course, I'm probably one of the very few people who have that big a dislike to IE...

[Natch]

I also have a big dislike to IE, but as a designer of a range of sites, I have to support it, and as 90% of the world still uses IE, why not just process the output of the vB rendering process thru this function ...

<?php
 /*
 * replacePngTags - Justin Koivisto [W.A. Fisher Interactive] 7/1/2003 10:45AM
 *
 * Modifies IMG tags for MSIE5+ browsers to ensure that PNG-24 transparencies
 * are displayed correctly. Replaces original SRC attribute with a transparent
 * GIF file (spacer.gif) that is located in the same directory as the orignal
 * image, and adds the STYLE attribute needed to for the browser. (Matching
 * is case-insensitive.
 *
 * @param $x String containing the content to search and replace in.
 * @result Returns the modified string.
 */
 function replacePngTags($x){
     // make sure that we are only replacing for the Windows versions of Internet
     // Explorer 5+, and not Opera identified as MSIE
     $msie='/msie\s([5-9])\.?[0-9]*.*(win)/i';
     $opera='/opera\s+[0-9]+/i';
     if(!isset($_SERVER['HTTP_USER_AGENT']) ||
         !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
         preg_match($opera,$_SERVER['HTTP_USER_AGENT']))
         return $x;
 
     // OK, time to find all the IMG tags with ".png" in them
     preg_match_all('/<img.*\.png.*>/Ui',$x,$images);
     while(list($imgnum,$v)[email protected]each($images[0])){
         $original=$v;
         $atts=''; $width=0; $height=0;
         // If the size is defined by styles, find
         preg_match_all('/style=".*(width: ([0-9]+))px.*'.
                         '(height: ([0-9]+))px.*"/Ui',$v,$arr2);
         if(is_array($arr2) && count($arr2[0])){
             // size was defined by styles, get values
             $width=$arr2[2][0];
             $height=$arr2[4][0];
         }
         // size was not defined by styles, get values
         preg_match_all('/width=\"?([0-9]+)\"?/i',$v,$arr2);
         if(is_array($arr2) && count($arr2[0])){
             $width=$arr2[1][0];
         }
         preg_match_all('/height=\"?([0-9]+)\"?/i',$v,$arr2);
         if(is_array($arr2) && count($arr2[0])){
             $height=$arr2[1][0];
         }
         preg_match_all('/src=\"([^\"]+\.png)\"/i',$v,$arr2);
         if(isset($arr2[1][0]) && !empty($arr2[1][0]))
             $image=$arr2[1][0];
         else
             $image=NULL;
 
         // We do this so that we can put our spacer.gif image in the same
         // directory as the image
         $tmp=split('[\\/]',$image);
         array_pop($tmp);
         $image_path=join('/',$tmp);
         if(strlen($image_path)) $image_path.='/';
 
         // end quote is already supplied by originial src attribute
         $replace_src_with=$image_path.'spacer.gif" style="width: '.$width.
             'px; height: '.$height.'px; filter: progidXImageTransform.'.
             'Microsoft.AlphaImageLoader(src=\''.$image.'\', sizingMethod='.
             '\'scale\')';
 
         // now create the new tag from the old
         $new_tag=str_replace($image,$replace_src_with,$original);
 
         // now place the new tag into the content
         $x=str_replace($original,$new_tag,$x);
     }
     return $x;
 }
 ?>

or if that causes a performance hit (which it might/will for IE users), add the function itself to includes/functions.php, and add the function call manually to the individual locations where you have

<img src="someimage.png" alt="image with transparency" />

I don't see it as a big issue at all ... if IE can't handle it, then force IE to handle it ... but there is a tool to deal with it built into IE - a filter Microsoft.AlphaImageLoader which will properly render the transparency ...

[Orfejs]

read about it on vb.org ...

[Bailx]

PNG's (which are actually the future, as opposed to being dead

couldn't agree more...

...

in regaurdsto the png / php fix...
maybe it dosn't work for me because of the way i'm trying to do it?

i was using classes like this

.stats_box_top { background-image: url(./images/styles/default/headers/stats_box_top.png); height: 13px }
.stats_box_mid { background-image: url(./images/styles/default/headers/stats_box_mid.png); }
.stats_box_bot { background-image: url(./images/styles/default/headers/stats_box_bot.png); }

then calling the classes later

<td class="stats_box_top">

or is it just possible i put the php code in the wrong spot?

[Bailx]

I've been trying to add that to functions.php..... it keeps giving me errors though....



any suggestions on 'where' to put it?