I’ve been having fun implementing my first cut at Image/File management for Gravl, and along the way I’ve learnt about LightBox and the Scriptaculous InPlaceEditor stuff.

First up, I needed a way of doing an image preview, so I could see what all of those PNGs really meant. Lightbox gives you a great way of “overlaying” the preview image as a popup without the need to refresh the page. Very snazzy. I followed the instructions and I was up and running in a few minutes.

Gravl Image Preview with Lightbox

Everything will make more sense with a little screencast (1.5mb)

Next stop was handling image renaming. I was really after a way to edit the actual filename inplace. Enter InPlaceEditor. This call lets you specify the id of the object you want to edit inplace, along with the url to do the ajax call against (which will get passed the user’s updated value in a params.value). If all is well, you return the changed value and life continues.

Gravl Inplace Rename with Scriptaculous

Well that was quite a lunch hour. I have a basic image management solution to keep me going so I can now upload the images for this blog entry without needing an SCP client!

Happy Previewing in Grails!