PNG transparencies and IE

dodden · 16.05.2004, 08:13

Okay, I know that I have been on and off about PNG transparencies, however, I have found a great site that allows PNG support through PHP script and not Javascript. This is great on so many levels I do not know where to start, but I will say one thing. If the user has Javascripts turned off, the user will not be able to see the image. The PHP script serves it up prior to view so no worries.

I have this working on other tests and on a couple of functional sites, however, I have been trying to incorporate this with MOS, and I am running into stumbling blocks. The code I have been using is based on the work from Justin Koivisto at http://www.koivi.com/ie-png-transparency/.

Has anyone had any luck running MOS with PHP PNG transparency? Does anyone have an idea how I might incorporate this PHP PNG transparency into Mambo? It loads all inline background, and IMG PNGs. It is great code with this one exception.

Otherwise, I will go back to work on this on Monday since I will have two days off so I can concentrate on this fully then.

Thank you in advance.

dodden · 16.05.2004, 17:25

I have figured out how to get this to work and I will be posting the link to the source, a tutorial how to use replacePngTags and the like. I will continue work so that this can also include PNG files found in CSS files. As of right now, it can only work with inline styles.

Darren Odden
mediaMystique

alphanostrum · 28.05.2004, 06:57

wow, that´s really very innovative.

dodden · 03.03.2005, 04:40

Code:

<INDEX.PHP=====================>

<?php echo "<?xml version=\"1.0\"?>"; defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<?php ob_start(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) {
	include ("editor/editor.php");
	initEditor();
}
?>
<?php include ("includes/metadata.php"); ?>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<?php 
$Browser_Name = strtok(" ");
if(ereg("Gecko", $HTTP_USER_AGENT))
{
$Browser_Name =  "NS";
} else if(ereg("Opera", $HTTP_USER_AGENT))
{
$Browser_Name = "OPERA";
} else if(ereg( "MSIE", $HTTP_USER_AGENT))
{
$Browser_Name = "MSIE";
} 

if ($Browser_Name != "MSIE")
{
echo "<link href=\"templates/$cur_template/css/not-ie.css\" rel=\"stylesheet\" type=\"text/css\" />";
} else if ($Browser_Name == "MSIE")
{
echo "<link href=\"templates/$cur_template/css/ie.css\" rel=\"stylesheet\" type=\"text/css\" />";
}
?>

<?php echo "<link rel=\"stylesheet\" href=\"templates/$cur_template/css/style.css\" type=\"text/css\">" ; ?>

<link rel="shortcut icon" href="images/favicon.ico" />

<?php // Custom MainMenu extension...
$database->setQuery("SELECT * FROM #__menu WHERE menutype = 'mainmenu' AND published ='1' AND parent = '0' ORDER BY ordering");
$mymenu_rows = $database->loadObjectList();
$mymenu_content = "";
foreach($mymenu_rows as $mymenu_row) {
	// print_r($mymenu_rows);
	$mymenulink = $mymenu_row->link;
	if ($mymenu_row->type != "url") {
		$mymenulink .= "&Itemid=$mymenu_row->id";
	}
	if ($mymenu_row->type != "separator") {
		$mymenu_content .= "<a href=\"".sefRelToAbs($mymenulink)."\" class=\"bar\">$mymenu_row->name</a><font color=\"#D3F5D0\"> | </font>";
	}
}
$mymenu_content = substr($mymenu_content,0,strlen($mymenu_content)-2);
?>
<title><?php echo $mosConfig_sitename; ?></title>
</head>
<body>
	<div id="header">
<?php '		<img src="templates/<?php echo $cur_template?>/image/vmlynx.png" width="230" height="61"/> '?>
		<img src="templates/<?php echo $cur_template?>/text.php" width="800" height="65"/>
	</div>
	<div id="righthead">
	
	</div>
	<div id="breadcrumbs">
		<span class="pathway"><?php include "pathway.php"; ?></span>
	</div>
	<div>
		<div id="leftcontent">
		<p><?php mosLoadModules ( 'left' ); ?></p>
			<p><?php mosLoadModules ( 'user1' ); ?></p>
		</div>
		<div id="centercontent">
			<p><?php mosLoadModules ( 'top' ); ?></p>

			<p><?php include_once("mainbody.php"); ?></p>
		</div>
		<div id="rightcontent">
			<p><?php mosLoadModules ( 'right' ); ?></p>
			<p><?php mosLoadModules ( 'user2' ); ?></p>
		</div>

	</div>
	<div id="bottomBar">
			  <p align="center"><?php echo $mymenu_content ?></p>
	</div>
	<div id="footer">
				<p align="center"><a href="http://mediamystique.com" />designed by mediaMystique</a> | <a href="http://mamboserver.com" />powered by mambo open source</a></p>
	</div>
<?php
    include_once 'replacePngTags.php';
    echo replacePngTags(ob_get_clean(),"templates/$cur_template/image/");
?>
</body>

</html>

<replacePngTags.php ==========================>

<?php
/*
*   replacePngTags - Justin Koivisto [W.A. Fisher Interactive] 7/1/2003 10:45AM
*   Modified: 5/5/2004 8:09AM
*
*   Modifies IMG and INPUT tags for MSIE5+ browsers to ensure that PNG-24
*   transparencies are displayed correctly.  Replaces original SRC attribute
*   with a transparent GIF file (spacer.png) 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. However, the width attribute
*   should come before height.
*
*   Also replaces code for PNG images specified as backgrounds via:
*   background-image: url('image.png'); When using PNG images in the background,
*   there is no need to use a spacer.png image. (Only supports inline CSS at
*   this point.)
*
*   @param  $x  String containing the content to search and replace in.
*   @param  $img_path   The path to the directory with the spacer image relative to
*                       the DOCUMENT_ROOT. If none os supplied, the spacer.png image
*                       should be in the same directory as PNG-24 image. When supplying
*                       a path, be sure it ends with a '/'.
*   @result Returns the modified string.
*/
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.AlphaImageLoader(
        //      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
        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
        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);
        }
        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);
            $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.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_with,
            str_replace('  ',' ',$modified));
        // now place the new tag into the content
        $x=str_replace($original,$new_tag,$x);
        $i++;
    }
    return $x;
}
?>

dodden · 03.03.2005, 04:42

Now lets do text on the fly!

<Text.php =====================>

Code:

<?php
/* ---------------------------------------------- */
/* ------------ BEGIN PHP SNIPPET ----------------*/
/* ---------------------------------------------- */

// include MOS metadata
// include ("includes/metadata.php");

// specify the file name - you can use a full path, or "../../" type stuff here
// if the image is not in the same directory as this code file
$image = imagecreatefrompng("image/header.png");

// specify the font size 
$font_size = 50;

// in this case, the color is white, but you can replace the numbers with the RGB values
// of any color you want
$color = imagecolorallocate($image, 153,204,255);

// make our drop shadow color
$black = imagecolorallocate($image, 0,0,0);

// and now we do the overlay - the layers of text start top to bottom, so 
// the drop shadow comes first
//
$text = "vmLynx";
// $text = $mosConfig_sitename;

// $image - the base image file we specified above
// $font_size - Well duh. Its the size of the font
// 0 - the angle of the text - we don't want an angle, so we leave it at 0
// 55 - pixels to the right from the leftmost part of the image
// 35 - pixels down from the top of the image
// $black - the color we defined above
// "../fonts/ARIALBD.TTF" - the location on the server that the font can be found
// $text - the text we're overlaying - you can also use a variable here
ImageTTFText ($image, $font_size, 0, 56, 50, $black, "fonts/arndboen.ttf",$text);

// Now add the actual white text "on top"
ImageTTFText ($image, $font_size, 0, 55, 49, $color, "fonts/arndboen.ttf",$text);
header("Content-type: image/png");
imagepng($image);
imagedestroy($image); 


?>

stackedsax · 30.10.2006, 08:41

I know this thread is old, but I see a lot of people still muttering about these problems and fixing with js. I think this method is a bit more reliable and I offer this bit of trivia:

The initial:

<?php ob_start(); ?>

doesn't seem to be necessary at all. I think Joomla is already doing output buffering somewhere before the template is loaded.

Just one less step to worry about.

Now, I've toyed with createing a mambot for this, but I'm not sure whether an onPrepareContent mambot will only look through content or affect things like modules also. Anyone know?

TroyM · 26.11.2007, 03:28

Quote:

Originally Posted by dodden

Now lets do text on the fly!

<Text.php =====================>

Code:

<?php
/* ---------------------------------------------- */
/* ------------ BEGIN PHP SNIPPET ----------------*/
/* ---------------------------------------------- */

// include MOS metadata
// include ("includes/metadata.php");

// specify the file name - you can use a full path, or "../../" type stuff here
// if the image is not in the same directory as this code file
$image = imagecreatefrompng("image/header.png");

// specify the font size 
$font_size = 50;

// in this case, the color is white, but you can replace the numbers with the RGB values
// of any color you want
$color = imagecolorallocate($image, 153,204,255);

// make our drop shadow color
$black = imagecolorallocate($image, 0,0,0);

// and now we do the overlay - the layers of text start top to bottom, so 
// the drop shadow comes first
//
$text = "vmLynx";
// $text = $mosConfig_sitename;

// $image - the base image file we specified above
// $font_size - Well duh. Its the size of the font
// 0 - the angle of the text - we don't want an angle, so we leave it at 0
// 55 - pixels to the right from the leftmost part of the image
// 35 - pixels down from the top of the image
// $black - the color we defined above
// "../fonts/ARIALBD.TTF" - the location on the server that the font can be found
// $text - the text we're overlaying - you can also use a variable here
ImageTTFText ($image, $font_size, 0, 56, 50, $black, "fonts/arndboen.ttf",$text);

// Now add the actual white text "on top"
ImageTTFText ($image, $font_size, 0, 55, 49, $color, "fonts/arndboen.ttf",$text);
header("Content-type: image/png");
imagepng($image);
imagedestroy($image); 


?>

dodden,

Thanks for the solution... I was looking for it...

musman1986 · 27.05.2008, 00:21

I will surely test it.

loveumaryii · 30.05.2008, 17:37

We should never remember the benefits we have offered nor forget the favor received.-------------------------Our wow power leveling website offer Fast and Secure wow powerleveling service. WoW Power Leveling 60-70, Cheap wow power leveling 1-70. The Professional Cheap WoW Gold! Powerlevel wow gold now. WOrld of warcraft Power Leveling bloom of true love associated with this time of year!