I have many unfinished hacks lying around on my web server(s), but this time it is time to release something finished. Blogfront is a simple script that fetches, crops, caches and displays random images from your Flickr account, as demonstrated by this blogs header image (try refreshing the page).
Download and installation
- Version 0.7 (latest): blogfront.php (bugfixes, better default parameters, resizing)
- Version 0.6: blogfront.php (first, corrected, release)
To install, copy the php file to your web server, preferably to its own directory. Make sure the script has write permissions (do this my doing chmod 777 or similar). It needs write permissions to be able to save cached photos, which is necessary for decent fetch times. Edit the script file to add your Flickr account ID and your API key (currently you need your own API key… it’s beta you know đ ).
Usage
The script will fetch a list of photos with a specific tag from your Flickr account. Among these photos, one will randomly be picked, downloaded, cropped and resized to fit desired size, cached locally and then displayed. All you have to do is to make an <img> tag with the src parameter pointing to the blogfront.php script file residing on your server. The script file takes some parameters for customization:
- width – the width in pixels of the cropped image to be shown. Default is 640.
- height – the height in pixels of the cropped image to be shown. Default is 200.
- tag – the tag(s) to use when finding candidates among your Flickr photos. Default is “blogfront”, but you can change to anything. If you have several scripts running, you might want to have a different tag for each so you can have different sets of images. It is of course possible to define several tags, just write them comma separated.
- border – Boolean saying if there should be a black border in the photo or not. Default is “true”.
Example:
What is even better is that you can control how to crop each photo. Go to your Flickr account and find the pictures you have tagged to show up. For each picture, do one of the following to create a custom crop (default crop is from top left corner):
- Make a note (press the Add note icon on Flickr), and position and scale it roughly to where you want the crop. The actual crop and resize will be fitted inside your note with the same center point. In the note write “blogfront” to identify it. Nothing else.
- Edit the “blogfront” (or equivalent) tag to add the locations of the crop. The format is “blogfrontx1y2w3h4”. Replace “1” and “2” with the x and y coordinate respectively of the start of the crop. Replace “3” and “4” with the width and height of the crop. A number can be left out if one so wish. Remember, a note will have precedence over a tag.
FAQ
- It is ugly with a big note on my photo, what to do? In this version, there is no other way than to try to find out the location of the note you posted and transfer these numbers to a tag instead, as listed above. To find the coordinates of a note, view source for the photo page and search for the id photo_notes.
- I get a black image! What is wrong? This probably means no photo could be found. Make sure your tag is correct.
- Something is wrong with the image thats shows up! Try to delete the cache, i.e. delete all jpg-files from the script directory. Beware, this will increase load time considerably until all images have been cached again.
- How can I debug the script? Unfortunately, at this time it is impossible, other than echoing manually from within the script.
Disclaimer
The script is released as Creative Commons Share-Alike. I bear NO responsibility for the results of using this script. It is in beta and expected to have bugs. (oh, when you find the bugs, please let me know!)