Posted by Aidan Kane on 21 July 2011 at 08:54 AM
Categories: Site Launches, Web Apps
Categories: Site Launches, Web Apps
Aidan Kane
Tech Lead
Tech Lead
In creating the new 4Music site recently we ran into the age old problem of how to best crop uploaded images. Traditional cropping tools tend to be clunky, especially when you need to crop a single image in different ways as we did.
We hit upon the idea of just allowing editors to pick a focal point on the image and having some clever little bits of mathematics sort out all of the details.
It worked incredibly well for the 4Music project so it's a technique that we plan on using on all of our sites in the future. When we get a bit of spare time we are going to release the source code so that others can make use of it in their projects too.
Check out the video to see it in action.
Share this story
Share with third party communities
This will take you to a new window.
This will take you to a new window.
Phil Yates @pyates
21 July 2011 at 5:54 pm
Haha your blatantly trying not to laugh when talking about take that!
"Right between the eyes on robbie..."
Quote this comment
"Right between the eyes on robbie..."
Jonny @delicado
27 July 2011 at 11:16 pm
This looks cool but can you zoom out of your choice? (e.g. decide afterwards to showcase the whole picture or a bigger part of it?)
Quote this comment
28 July 2011 at 11:22 pm
Hey @delicado.
The way it works is that the closer to the edge of the image you click the more it will zoom in to make the crop. So, if you wanted, you could click right in the center of the image and it would always take a crop that was a zoomed out as much as possible.
We actually have several different cropping modes available depending on where we're using it.
Take the following example:
http://media.4music.com/media/original/2043/300x20...
http://media.4music.com/media/thumb/2043/300x200_4...
http://media.4music.com/media/thumb/2043/300x200_4...
In the first is the full original image in a 300x200 space with no cropping. You can see the original uploaded image is a square. Used when we want the whole image displayed in a limited space (for example in the galleries).
The second is a 300x200 crop but with no zooming. So it focuses on the focal point but doesn't zoom in at all in order to show most of the image but just cropping off either the top/bottom or left/right. We use this crop for major spaces like the lead image for a news article or artist.
The final one is a 300x200 crop but zoomed in to the focal point. In this case it zooms in as close as possible so the focal point is in the middle and it hits an edge (in this case the top edge). We use this for the thumbnails all over the site as you tend to end up zoomed in quite close to the face which is perfect for the small thumbs.
I hope that gives you a better idea of how it works!
We will put the code up soon so that people can have a better play with it. We also have a little html test example we made that we'll put up too.
Quote this comment
The way it works is that the closer to the edge of the image you click the more it will zoom in to make the crop. So, if you wanted, you could click right in the center of the image and it would always take a crop that was a zoomed out as much as possible.
We actually have several different cropping modes available depending on where we're using it.
Take the following example:
http://media.4music.com/media/original/2043/300x20...
http://media.4music.com/media/thumb/2043/300x200_4...
http://media.4music.com/media/thumb/2043/300x200_4...
In the first is the full original image in a 300x200 space with no cropping. You can see the original uploaded image is a square. Used when we want the whole image displayed in a limited space (for example in the galleries).
The second is a 300x200 crop but with no zooming. So it focuses on the focal point but doesn't zoom in at all in order to show most of the image but just cropping off either the top/bottom or left/right. We use this crop for major spaces like the lead image for a news article or artist.
The final one is a 300x200 crop but zoomed in to the focal point. In this case it zooms in as close as possible so the focal point is in the middle and it hits an edge (in this case the top edge). We use this for the thumbnails all over the site as you tend to end up zoomed in quite close to the face which is perfect for the small thumbs.
I hope that gives you a better idea of how it works!
We will put the code up soon so that people can have a better play with it. We also have a little html test example we made that we'll put up too.
