Easy PHP Reflections v3.0
Updated 13th March 2007
Easy Reflections v3 is a PHP 4 and 5 compatible script that creates reflections from any given GIF, JPEG or PNG image. When I say 'reflection' I mean in the Apple OSX style as seen in the likes of iTunes. Why would you want to do this? because as they're saying 'reflections are the new drop-shadows'.
Sure, but I created this as a way to automatically display reflections for user-uploaded images in a public gallery site. The thought of having to download each image and run it through Photoshop didn't appeal.
Khlo's script is a fine piece of work, and dumps the load on the client rather than the server. While it degrades nicely it obviously doesn't work if your visitor has JavaScript turned off (or IE security set to 'High' like lots of companies). My version works server-side and relies on nothing more than an 'image' HTML tag and PNG support.
Download the script here (3.2 KB ZIP file)
A lot! Version 3 now only outputs a PNG image, and uses the PNG transparency features to achieve the mirror gradient fall-off effect. In short it looks stunning, and you can overlay the reflection image on-top of any background now (an image, gradient, solid colour, etc) and it will still work just fine. As a result of this, the Background Colour and JPEG output options have been removed from V3.
Due to public demand (well ok, 3 emails!) if your source image is a PNG and already has transparency this will now be represented correctly in the reflection. Version 3 also supports image tinting. You can tint the mirrored image with any given colour, which can create some interesting and lovely effects including over-saturation glares, or deep hues.
You need PHP 4.3.2+ on your server. You also need the GD library.
Easy Reflections was written and tested with PHP 4.4.5 and PHP 5.2.1. It is fully compatible with E_ALL and Register Globals Off. It requires that PHP has GD extension 2.0.1+ loaded.
Upload the file reflect_v3.php then call it using a standard HTML img tag:
<img src="picture.jpg" /><br /> <img src="reflect_v3.php?img=picture.jpg" />
The file picture.jpg is referenced from the document root in the $_SERVER variable. So if the image exists in a sub-folder somewhere you'll need to pass that with the filename. If you find that nothing happens (or you get a broken image box), then try calling reflect_v3.php directly via your browser and see if it spits out an error message for you, as it has various checks built-in to help with debugging.
You have 6 parameters available, only one of which is actually required. See the examples for more details.
| Parameter | Result |
| img string |
This is the path and filename of the image you wish to reflect. You can include directories, or directory commands, but not URLs. This release can accept GIF, JPG or PNG as valid image types. Examples: &img=picture.jpg |
| height integer |
The height of the reflection image. This can be set in either pixels or a percentage value. If you don't know the height of the source image then it is better to use a percentage value. If the source image is always of a fixed size, then you can set a pixel value here which allows your HTML img tag to validate, because you can set a width and height value to it. Examples: &height=95 (height will be 95 pixels) |
| fade_start integer 1 to 127 or 0% to 100% |
The starting alpha value. There are 127 levels of alpha, beginning at 127 (no fade at all), to 1 (completely opaque). You can also specify this value as a percentage (50%, 80% etc). To get a really cool reflection effect it looks better if you start the alpha level off at 80, so that is the default. But play with this value for a variety of end results. One thing to bear in mind - the higher this value, the more height you'll have to allow your reflection image to have. Examples: &fade_start=70 (start alpha from 70) |
| fade_end integer 1 to 127 or 0% to 100% |
The fade_end sets the alpha value at which the fade will end. A setting of 1 will fade completely to the background colour. A setting of 63 (or 50%) would fade to half brightness. Examples: &fade_end=20 (take the alpha fade down to 20) |
| tint hex #000000 to #ffffff |
If you wish you can tint the colour of the reflection by passing a colour value to it. It defaults to no tint at all, but you can for example increase the blue channel for a more 'watery' effect. The value should be given as a standard HTML colour hex code and can be 3 or 6 characters in length. Values over 9 will 'over-tint' the image, causing a saturation effect. The hash (#) at the start is optional and on some PHP configurations should be left out totally. Examples: &tint=#bbb or &tint=#bbbbbb (both will saturate white) |
| cache boolean 0 or 1 |
Turn cache support on or off. By default the cache is disabled, meaning for every hit to the script a new image is generated. Turn on cache support by passing a value of 1. The first time the image is called a new file will be generated (either a JPEG or PNG depending on your setting above) named starting with 'refl_' followed by an MD5 hash. This reflected image is saved to the same directory as the source image. If suitable write permissions don't exist this will fail. The next call to the script will use the image from the cache instead of generating it again. The cached image is updated only when the timestamp on the source image becomes greater than the cached version. |
Here are some example uses of Easy Reflection v3.
I hope you find this script useful. Feel free to rip it apart, use chunks of it, re-write it, and generally use and abuse it at your leisure. If you have trouble with it, you can try emailing me, but my time is limited, so be sure to read this page carefully first. You are also welcome to post comments on this code on my blog.
© Copyright 2007, Richard Davey