Easy PHP Reflections v2.1
Updated 5th January 2008
Easy Reflections v2.1 is a single PHP 4 script that creates reflections from any given GIF, JPEG or PNG image. When I say 'reflection' I mean in the Apple style as seen in the likes of iTunes, and now spreading across the web faster than a coyote on an ACME rocket. 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 it dumps the load on the client rather than the server. While it degrades nicely it obviously doesn't work if your visitor either (a) has JavaScript turned off (or IE security settings set to 'High' like lots of companies do), or (b) has a browser lower than IE5.5, Firefox 1.5 or Opera 9. As my version works server-side and relies on nothing more than an 'image' HTML tag, it'll work anywhere.
Download the script here (9KB ZIP file)
See Easy Reflections in action on the examples page.
You need PHP 4.3.2+ on your server. You also need the GD library.
Upload the file reflect_v21.php to your server. Then call it using a standard HTML img tag:
<img src="picture.jpg" /><br /> <img src="reflect_v21.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.php via your browser (www.yoursite.com/reflect_v21.php) and see if it spits out a message for you. It has various checks built into it to help with debugging.
v2.1 Update - 5th January 2008
Due to the number of people using Easy Reflections with the ImageFlow javascript package I have included a new parameter 'merge' which means that the final output image contains both the source and the reflection as one. You can now also fix the background colour in the script itself rather than passing as a parameter.
v2 Update - 2nd March 2007
I received an update to my Easy Reflections script back at the end of December 2006 from Monte Ohrt (co-developer of Smarty), and it took me a few months but I've now integrated his changes into v2. Monte added cache support, fixed a horizontal banding issue and changed the way the alpha fade worked slightly. This page has been updated to take his modifications into account.
You have 7 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) |
| bgc hex #000000 to #ffffff |
The background colour to fade the image into. Defaults to white. Value should be given in HEX and can be 3 or 6 characters in length. The hash (#) at the start is optional. Examples: &bgc=#000 or &bgc=#000000 (both will fade to black) |
| fade_start integer 1 to 127 (or %) |
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 %) |
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) |
| jpeg integer 1 to 100 |
By default Easy Reflection outputs a PNG file. If you would rather it output a JPEG instead then give this parameter. The value is the quality of the jpeg, with 1 being a complete mess, to 100 being pixel perfect. A value of 80 usually works well. Examples: &jpeg=100 (pixel perfect output) |
| 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. |
| merge boolean 0 to 1 |
By default Easy Reflection only outputs the actual reflection image itself, this is to save on processing time. However should you want it to output just one image (the original and the reflection combined) then set this parameter to 1 (default is 0) |
Here are some example uses of Easy Reflection.
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. Donations always welcome :)
© Copyright 2007 - 2008, Richard Davey