Getting different sizes of thumbnails using the JavaScript Chooser

// By Steve Marx • Jan 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 });

// Copy link