Osmek's image interface has always been pretty great for designers. You can specify image sizes to be generated when an image is uploaded, telling osmek to fit the image within a certain width and height, or to crop the image to fit the dimensions exactly. This allows designers to specify exact image settings for different sections of a site, and make sure that the images will fit. You can even pull custom image sizes on the fly by appending an image url with a size setting, for example 100x100x1 would cause the image to be scaled down and cropped to exactly 100x100.

The problem comes when Osmek crops an image. If a thumbnail is set to be 100x100, and a portrait image is uploaded, you run the risk of decapitating the subject in the image.

We wanted a way to fix this. What we came up with was an inline resize & crop tool. This allows us to make sure that the original size restraints are retained while cropping, and gives a user the ability to edit the cropped region for any image. Check out how it works in the animated gif below.

We can accomplish this by saving all the resize and crop data for every image when it's created, then taking the source image and scaling down/positioning it to match the current thumbnail you want to re-crop.

For now this functionality only works well for thumbnails. You can imagine how this method would degrade for an image size of say, 1000x1000 because of browser size restraints. Hope you enjoy the new functionality. I'd love to hear you feedback in the comments.