Getting decent sized pictures using the rottentomatoes API

Question

I am using the rotten tomatoes API, which is fairly straight forward. The following is my basic code:

var apikey = "xxxxx";

function queryForMovie(query) {
  queryUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=" + apikey + "&q=" + encodeURI(query);
  $.ajax({
    url: queryUrl,
    dataType: "jsonp",
    success: queryCallback
  });
}

function queryCallback(data) {
  var el = $('#movie-listings');
  $.each(data.movies, function(index, movie) {
    el.append('img src="' + movie.posters.original + '" alt="' + movie.title + '"');
  })
};

$(document).on("load", queryForMovie("Star Wars"));

However, this gives back a very small image.

What would be a good way to get a larger sized image, while limiting requests where possible?

Answer 1

** UPDATE **

Rotten Tomatoes has made configuration changes such that trying to reference cloudfront urls directly no longer works. Therefor, this solution no longer works.

Such is the danger of using non-sanctioned workarounds.

Does anybody know of a good service for getting movie posters?

---

Original non-working answer:

Even though the Rotten Tomatoes API lists four separate images in a movies poster object (thumbnail,profile,detailed, and original), they are all, currently, identical URLs:

"posters": {
    "thumbnail": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "profile": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "detailed": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "original": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg"
}

According to RT, high-resolution poster images are no longer available via the APIs to maintain focus on ratings and reviews, more detailed content.

However, if you're willing to "order off menu," you can still get at the full resolution image. The part of the poster image urls following /54x80/ is the cloudfront url for the original image:

http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg

...becomes...

http://dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg

A javascript implementation might look something like this:

// movie = RT API movie object
var original = movie.posters.original.replace(/^.*?\/[\d]+x[\d]+\//,"http://");

This image will ordinarily be much much larger than 54x80, and it may not be feasible to load and display large lists of these images. Trying to modify the url resizing.flixster.com url doesn't work--there appears to be some kind of resource dependent hash involved. If you want to be able to downscale the images, you need to set up or find an image proxy service. I found that Pete Warden's article on resizing and caching images with cloudfront to be of great help.

An example using the service he set up in the article might look like http://imageproxy.herokuapp.com/convert/resize/200x285/source/http%3A%2F%2Fdkpu1ddg7pbsk.cloudfront.net%2Fmovie%2F11%2F13%2F43%2F11134356_ori.jpg

In javascript, this would look something like:

// Match url: http://[some.kind/of/url/[height]x[width]/[original.cloudfront/url]
var url_parts = movie.posters.original.match(/^.*?\/([\d]+)x([\d]+)\/(.*)/);

var ratio = url_parts[1] / url_parts[2], // Determine the original image aspect ratio from the resize url
    size = 200, // This is the final width of image (height is determined with the ratio)
    original = "http://" + url_parts[3],
    wxh = [size, Math.round(size/ratio)].join("x");

// Construct the final image url
movie.posters.original = [
    "http://imageproxy.herokuapp.com/convert/resize/",
    wxh,
    "/source/",
    encodeURIComponent(original)
].join("");

// The first request of this URL will take some time, as the original image will likely need to be scaled to the new size.  Subsequent requests (from any browser) should be much quicker, so long as the image remains cached.

NOTE: Doing something like this depends on Rotten Tomatoes keeping their resize urls the same form (resize url + [width]x[height] + encoded cloudfront url). Unless you set up your own image proxy service, you are also at the mercy of the proxy owner, as far as uptime, performance, security, and image quality is concerned.