Web 2.0 Mirrored Images

Tweet

2 November 2009 | Dieter Orens |

1 1

 Source files (3 KB)

Ever wanted to create the so-called 'web 2.0' mirrored images as you can see on http://www.dio5.com/portfolio/, without having to manually rotate and proces the image? Then this one is for you.

I have attached a fully working zip-package, but let's run through some of the code nonetheless.

When it comes to images the Image and GD class are the ones we need to tackle. Create a file in your mysite/code/ folder called ImageDecorator.php and add in the next code:

class ImageDecorator extends DataObjectDecorator
{
    function getMirroredImage($width, $height)
    {
        if ($this->owner->ID && $this->owner->Filename && Director::fileExists($this->owner->Filename))
        {
            $cacheFile = $this->owner->cacheFilename("MirroredImage", $width, $height);
 
            if (!file_exists("../".$cacheFile) || isset ($_GET['flush']))
            {
                $this->generateMirroredImage($width, $height);
            }
 
            return new Image_Cached($cacheFile);
        }
    }
 
    function generateMirroredImage($width, $height)
    {
        $cacheFile = $this->owner->cacheFilename("MirroredImage", $width, $height);
 
        $gd = new MyGD("../".$this->owner->Filename);
        if ($gd->hasGD())
        {
            $gd = $gd->mirroredImage($width, $height);
            if ($gd)
            {
                $gd->writeTo("../".$cacheFile);
            }
        }
    }
}

Create another file called MyGD.php in the same folder:

class MyGD extends GD
{
    public function mirroredImage($width, $height)
    {
        $newGD = imagecreatetruecolor($this->width, $this->height);
        $bg = imagecolorallocatealpha($newGD, 255, 255, 255, 127);
        imagefill($newGD, 0, 0, $bg);
        $dst_x = 0;
        $src_x = 0;
 
        $coordinate = ($this->height-1);
 
        foreach (range($this->height, 0) as $range)
        {
            $src_y = $range;
            $dst_y = $coordinate-$range;
 
            imagecopy($newGD, $this->gd, $dst_x, $dst_y, $src_x, $src_y, $this->width, 1);
        }
 
        $output = new GD();
        $output->setGD($newGD);
 
        $output = $output->croppedResize($width, $height);
        return $output;
    }
}

The previous code may look a bit daunting but it's basically just taking the current picture and mirrors it, after which we do a crop on it so you can add in a width & height.

To get the Image Decorator working, we'll need to add this line to our _config.php file:

DataObject::add_extension('Image', 'ImageDecorator');

The interesting part is how you can use it in your templates: $ExampleImage.getMirroredImage(300,200) will give you a mirrored image with a width of 300px and height of 200px.

Combine this with some clever use of css and a png gradient and you will be able to achieve what I did on http://www.dio5.com/portfolio/.

For those of you wanting to test this out, I provided a simple zip-package which contains a folder called 'mirrors'. Just unzip this in your root SS-folder, do a dev/build/ and you'll have an 'Example Page'-type which allows you to set an image on which this effect is demonstrated. It basically contains this html-snippet:
<div class="photo" style="background:url(<% control ExampleImage %> <% control getMirroredImage(300,200) %>$URL<% end_control %> <% end_control %>) no-repeat left bottom"> <div> <img src="<% control ExampleImage %> <% control CroppedImage(300,200) %>$URL<% end_control %> <% end_control %>" alt="$Title.ATT" /> </div> </div>

With this css:

 

.photo div{
	position:relative; 
	width:300px; 
	height:401px; 
	background:url(../images/overlay.png) repeat-x left 201px; 
}

 

Here we are adding the mirrored image as a background image on the outer container div of the 'normal' image. On the inner container div we add a black to transparent png-gradient and position the whole thing with css.

You probably want to experiment with changing the png-overlay image size & color in the zip. For a reflection on white you'll need to replace it with a white to transparent one, instead of a black one.

Hope this little snippet inspired you to do great things! Do not hesitate to ask for help or improve this where possible.

Note: I'm not adding support for IE6 here.