Rule of Thirds

moment
by unexpectedtales View original image on Flickr
Sorry, you must be using a modern browser to view this site. Suitable browsers include any recent version of Firefox and Chrome, and more recently Internet Explorer 9

Image: All Rights Reserved

Instructions

Browse to any image using the thumbnails, or choose one of your own images by pasting the url (e.g. http://www.flickr.com/photos/24469639@N00/2686229845) into the box bottom-right. Nothing much more to it really!

But if you have any really strong images that showcase the rule of thirds, then do join up to the Rule of Thirds Showcase group on Flickr and add them. They'll then get displayed on this site too.

About

This is just an experimental service, inspired by a Flickr contact's image - I wanted to see if the image conformed to what is perhaps the most widely used tool for photographic composition, the Rule Of Thirds. A few hours later and I had a basic page up and running, which has then been refined over a few evenings.

Known issues & future plans

The single biggest issue is that many Flickr images, seemingly especially those that make Explore, are marked as 'All Rights Reserved'. As such they cannot be displayed on a third party site/service such as this, and I have had to replace them with an ugly placeholder! I also want to play around with the thumbnail randomisation a little, but in essence it's working OK. There's a problem with the Facebook share where although the link is OK Facebook fails to pick up the current image, instead displaying one that it has cached. And I still haven't found a way of letting teh canvas height scale according to the height of the image.

In terms of future plans I'd like to add an option to change the colour of the grid, and possibly add different grid options (e.g. a 50% horizon, a centre circle etc). I might also open it up to other images, from other sites like Picasa or from directly pasting in an images url.

Technical stuff

The page is built in PHP using the excellent phpFlickr library. The overlay lines are drawn using HTML5, based on the drawImage tutorial on https://developer.mozilla.org/en/Canvas_tutorial/Using_images. If anyone wants to see the source code or even to lend a hand improving it, then just let me know.

Feedback & Questions?

If you have feedback or questions then do send me an email.

More images from unexpectedtales

Rule of Thirds Showcase

Add your own images to the Rule of Thirds Showcase group >>>

Today's Explore

Choose a Flickr image