I'd like to begin a series of posts detailing some of the cooler features of SlideSix.com. In this series I hope to share some of my lessons learned and feature some of the code that went into building the site.

This post shows one of my favorite features: the image cropper.

When editing your profile (or your group) you are given the option to upload a user image. It's always a challenge to ensure a consistent image size when you allow your users to upload an image. Thankfully it was super easy thanks to the built in imageCrop function (on the server) and my cfImageCropper custom tag (on the client side). I'm not going to highlight the exact code here since I've done so in my cfimagecropper posts here on my blog. Essentially it's as easy as detecting the image upload, optionally resizing the image down to 700px wide (so that it fits comfortably in the browser), alerting CF that an image crop is needed after the form is saved and including the image crop utility in a cfwindow. I constrain the crop area to 150px x 150px to ensure a consistent image size. The actual user image does not get saved until and unless the image is cropped to safeguard against the user navigating away from the page before completing the crop.