Web 2.0 Mirrored Images

What it Does

Provides an easy way to create 'reflected' images.

Attached Files

Web 2.0 Reflections(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 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.

About the Author