A question that users have asked a few times on our websites is, "How do I add my photo to a forum posting or to a wiki article?". The common answer is to have them upload their photo to their favourite photo hosting site and then insert the required BBCode in to the forum posting which links to the photo. But what about users that don't have an account on a photo hosting site? They only want to upload a couple of pictures and don't want to spend ages doing it!
We could have included an upload button on our forums and wiki, but that presents a few problems too:
- The default size of photos taken by digital cameras is too large for forum postings or web based articles. Some users won't have the software or knowledge of how to crop, and resize their photos.
- Uploading large photos will waste our bandwidth.
- It would be nice to allow users to select previously uploaded photos, but how do we create thumbnail versions of the photos?
- Where do we store the photos?
Step 1: Integrating with Picnik
Picnik allows a user to upload a photo from their PC. Once uploaded to the Picnik servers they can crop and resize the photo but they can also do much more; including adding frames, effects and text, adjusting colours and sharpness, and even touching up the photo. This all happens within the browser so no software installation is required.
Picnik is a cool product, but it's the way that it can be easily integrated in to our own websites that makes it great. In the forum posting form and wiki editor on
www.EquiPortal.co.uk we have added a button to launch Picnik. From here the user uploads their photo to Picnik, optionally edits it and then saves it.
Control is passed back to the EquiPortal server but a couple of interesting things have already happened to make our life easier:
- We receive a location to download the photo from.
- The photo has automatically been resized to a suitable size for publication in the forum or wiki (this maximum size is configurable), therefore saving our bandwidth and looking after users who don't appreciate that photos need to be scaled down for use on the web.
- We also receive a location to download a thumbnail version of the photo that Picnik has automatically produced.
- Now all we have to do is store the photos and automatically insert the required links in the users forum posting or wiki article.
Picnik is already used by some of the major photo hosting sites including flickr and photobucket so we know that the service will continue to be available in the future.
Step 2: Storing the photos on Amazon S3
OK, so Picnik has solved a lot of problems for us, but we don't want to host loads of photos on our server because it will eat up our bandwidth and storage and slow down our websites.
Amazon's S3 (
Simple Storage Service) is a secure and cost effective way of storing files and optionally making them publicly available over the Internet. The servers are very reliable in terms of uptime and data persistence and they are massively scalable.
It is a fairly simple process to open an Amazon account, and incorporate the code to upload our photos and thumbnails to their servers. This enables us to introduce a second button to our forums and wiki to allow users to show a gallery of previously uploaded thumbnails, which can be selected and automatically inserted in to their postings or articles.
Conclusion
By integrating Picnik and Amazon S3 services in to our solutions we can provide a rich user experience for photo uploading, editing and hosting. The solution is low cost with high availability and has minimal impact on our servers.
We look foward to using Picnik and Amazon S3 in more of our solutions in the near future.
