Code snippets for symfony 1.x


Refine Tags

Snippets tagged "filter hack"

Server-side transparent PNG hack for IE

I've found a very nice and easy method to add transparent PNG image support to IE. This filter is an easy alternative from using Javascript or server-side php scripts. Original code from

Add code below to your lib folder with filename pngAlphaFilter.class.php

class pngAlphaFilter extends sfFilter
  public function execute ($filterChain)
  public function executeBeforeRendering ($filterChain)
    $response = $this->getContext()->getResponse();
    $content = $response->getContent();
    $newContent = $this->replacePngTags($content, '/images/');
  *  KOIVI PNG Alpha IMG Tag Replacer for PHP (C) 2004 Justin Koivisto
  *  Version 2.0.12
  *  Last Modified: 12/30/2005
  *  Modifies IMG and INPUT tags for MSIE5+ browsers to ensure that PNG-24
  *  transparencies are displayed correctly.  Replaces original SRC attribute
  *  with a binary transparent PNG 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); or 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 string $x  String containing the content to search and replace in.
  *  @param string $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.
  *  @param string $sizeMeth   String containing the sizingMethod to be used in the
  *                      Microsoft.AlphaImageLoader call. Possible values are:
  *                      crop - Clips the image to fit the dimensions of the object.
  *                      image - Enlarges or reduces the border of the object to fit
  *                              the dimensions of the image.
  *                      scale - Default. Stretches or shrinks the image to fill the borders
  *                              of the object.
  *  @param bool   $inScript  Boolean flag indicating whether or not to replace IMG tags that
  *                      appear within SCRIPT tags in the passed content. If used, may cause
  *                      javascript parse errors when the IMG tags is defined in a javascript
  *                      string. (Which is why the options was added.)
  *  @return string
  public function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
      // make sure that we are only replacing for the Windows versions of Internet
      // Explorer 5.5+
      if( !isset($_SERVER['HTTP_USER_AGENT']) ||
          !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
          return $x;
          // first, I want to remove all scripts from the page...
      // find all the png images in backgrounds
          // 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...
                  'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
                  ', src=\''.$background[2][$i].'\');',$x);
      // find all the IMG tags with ".png" in them
          // for each found image pattern
          $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
                  // this was a relative URI, image should be in this directory
                  array_pop($tmp);    // trash the script name, we only want the directory name
          }else if(substr($img_path,-1)!='/'){
              // in case the supplied path didn't end with a /
          // If the size is defined by styles, find them
          if(is_array($arr2) && count($arr2[0])){
              // size was defined by styles, get values
              // remove the width and height from the style
              $stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
              // Also remove any empty style tags
              // size was not defined by styles, get values from attributes
              if(is_array($arr2) && count($arr2[0])){
                  // remove width from the tag
              if(is_array($arr2) && count($arr2[0])){
                  // remove height from the tag
          if($width==0 || $height==0){
              // width and height not defined in HTML attributes or css style, try to get
              // them from the image itself
              // this does not work in all conditions... It is best to define width and
              // height in your img tag or with inline styles..
                  // image is on this filesystem, get width & height
              }else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
                  // image is on this filesystem, get width & height
          // end quote is already supplied by originial src attribute
          $replace_src_with=$quote.$img_path.'spacer.png'.$quote.' style="width: '.$width.
              '; height: '.$height.'; filter: progid:DXImageTransform.'.
              'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
          // now create the new tag from the old
              str_replace('  ',' ',$modified));
          // now place the new tag into the content
          // before the return, put the script tags back in. (I was having problems when there was
          // javascript that had image tags for PNGs in it when using this function...
      return $x;

add this to your apps/your_app/config/filters.yml

  class: pngAlphaFilter

and put a spacer.png with 1 by 1 pixel with binary opacity in images/ directory. Or simply download one from the url below.

And now you are able to use the transparent PNG files as if IE fully supports it! The rest of templates need no change.

by Sung-Jin Hong on 2006-05-26, tagged filter  hack  png