I have been doing a lot of javascript coding recently. It’s funny because until six months ago I was a javascript beginner. I had done some js but didn’t completely get it and began by copying and pasting from other sites in the hope that things would just work. Then again that’s how I started with php too.
As I began to work on PagePlay more and more the javascript needed to be more and more clean and easy to adapt for when we add new functionality.
The last piece of easy to use goodness I have been working on is the photo editing functionality. When PagePlay first launched it would automatically resize your photos to the width of your template and you could edit the title and alternative text, but the photo would just be a resized version of what you uploaded and the thumbnail version would just be square versions of that photo.
The new photo editing toolbar allows you to select which part of the photo you want to use for each version needed on the site. You can choose your thumbnail, your content (standard) version and then when the new pageitems come in such as photobanner you will be able to crop again from the original for them.
The whole of PagePlays front end functionality is based on the jQuery javascript library and for the photo editing stuff I have gone with a very new and in development (currently on 0.9.5) but powerful plugin called jCrop. It has most of the functionality I needed and is simple enough for the end user to understand. It’s more useful feature for me was it’s (almost complete) ability to deal with scaled images.
So if you are looking for an image cropper and you already know a little about the jQuery library I suggest you give jCrop a look.
Update:
I originally wrote this article in November 2008. That’s quite a while back so be sure to check for newer cropping plugins including:
jCrop (still available)
imgAreaSelect