The making of flickholdr.com, an image placeholder generator
There are a few services available to web designer and HTML coders to use dummy images in their html mockups or templates. The one I used to use is dummyimage but it is somewhat limited in that the images are completely static: a flat color and some text. I needed the same kind of service, but with actual images or photographs rather than simple placeholders. Something like dynamically generated stock images.
The idea
And then the idea dawned on me: why not use flickr’s creative commons licensed images? The quality is often very good, especially for “interesting” images, a lot of sizes are available, and users often use tags to classify their images, making it rather easy to get placeholder images about a particular subject.
The execution
So I proceeded to develop a little webapp to do just that, using codeigniter, my framework of choice for rapid application development
I used Codeigniter 2.0 from bitbucket, as I think it is the most up-to-date code available at the moment.
If the requested image already exists in the cache (i.e. it has already been requested) we simply echo that out, with proper headers, otherwise, we have to generate the image.
Getting images from flickr
Most of the code deals with pulling images from flickr, and then doing various to them before display. The code that pulls the image from flickr is located in a model called Flickr_model with three methods:
- A public method called
search()that gets images using the flickr API
- A private method called
_get_sizes()that finds the sizes available for that particular image
- Another private method
_get_author()that gets the information for the image and returns the name of the author, to be displayed in the watermark
The
search()method returns as soon as it finds an image of at least the required size.
The controller private method
_get_image()then takes charge of resizing, cropping and watermarking the image, using codeigniter’s image manipulation library to keep things quick and simple. I just tweaked the watermarking method of that class to allow for semi-transparent watermarks.
The controller then sends the image to the browser with the proper headers.
End of the story!
UPDATE: Flickholdr is now open sourced and the code is available on github