t is very common to find reduced-size pictures (thumbnails) on the web so that the user can quickly visualize the content of gallery for instance. Creating these thumbnails manually is quite tiresome: one needs to use a program to resize the original image, save it in a particular location, make the link to the thumbnail, etc. Fortunately, it is also possible to generate these thumbnails automatically.
For instance one can write a PHP script which uses the GD graphic library to generate thumbnails automatically. This is done by phpThumb()
, an excellent set of free PHP scripts which can process and generate thumbnails very easily. The only missing feature of phpThumb
() (as of now) is that it cannot drop soft shadows below the thumbnails. Personally, I like soft shadows, I think they create more depth in the page. I used to create them manually, which is tedious. That's why I decided to write a little script to generate thumbnails with shadows automatically. I now use this script copiously in my web pages, and I thought it might interest other people.
The script is very easy to use: in the web page where you want the thumbnail to be present, you just need to insert an image whose source src points to the script vignette.php
with the original picture as an argument:
By defaut, the script generates a PNG picture of maximal dimensions 150x150 with a centred shadow.
The PNG format allows transparency, which is used for the shadow. PNG transparency is well managed by most browsers, except Internet Explorer (prior to version 7). For this reason, the script detects automatically whether Internet Explorer v<7 is used, and if so generates JPEG files instead, where the shadow is rendered over a white background. One can change the colour of the background by specifying its Red-Green-Blue parameters:
src='vignette.php?f=... &r0=... &g0=... &b0=...'
r0 : red level (0-255)
g0 : green level (0-255)
b0 : blue level (0-255)
There are several other parameters that one can specify to the script:
h : maximum width (default: 150)
v : maximum height (default: 150)
d : distance of the shadow
flou : shadow blur (default: 10)
a : shadow angle (default: 45)
r : thumbnail angle (default: 0)
b : frame thickness (default: 0)
Here is an example:
Final word: instead of generating the thumbnail each time a visitor requests the page, generated thumbnails can be stored in a cache directory (to be specified in the script) in order to load them more rapidly. To activate the cache, use the parameter:
c : use cache (yes=1, no=0)
That's all, folks!