Getting different sizes of thumbnails using the JavaScript Chooser

Posted by Steve Marx on January 17, 2014

As mentioned in a post last week, we recently rolled out some improvements to the Chooser JavaScript API. One of the additions in the new library is a new set of thumbnails. Now, in addition to choosing the size of thumbnail you want to generate, you can also choose the mode used (e.g. "crop" instead of "fit"). You can read the full details in the JavaScript Chooser docs.

The Chooser now returns a single thumbnail link, but you can generate all the other thumbnails by modifying the query parameters of that URL. Below is code that converts the returned thumbnail to one that crops the image to 800x800. Note that this code uses jQuery's $.param method:

// strip off the existing query parameters
var baseThumbnail = files[0].thumbnailLink.split('?')[0];

// add "?mode=crop&bounding_box=800"
var cropped = baseThumbnail + '?' + $.param({ mode: 'crop', bounding_box: 800 });

Try it!

Below is an example that uses similar code to generate all fifteen possible thumbnail links (three different modes, each with five different sizes). Just click the button below and choose an image to see the various thumbnails. If you can't see the example in your blog reader, try visiting this post directly in your browser.