Oh Square images, Where Art Thou?

As of September 2015, Instagram rolled out the new feature allowing users to post non-square images. If you used the API, you would have noticed that API is still returning the square images with white borders which is basically a fallback for all the Apps created before. You might agree that these fallback images are pretty ugly, although they don’t break your application at least.

How to fix it?

If your application is ready to handle non-square images, you could go to Manage Clients page and under Migration tab on your application page, there’s a checkbox to enable the migration.

As you can see in the description, this fallback will work until June 1, 2016, after that you’ll be forced to migrate.

I’m going to use “metmuseum” profile as an example in this article. After migration API returns slightly different URLs for each image. Following is an array that API returns for this image.

            
(
  [low_resolution] => stdClass Object
    (
      [url] => https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/12519511_1134161999935380_1730275103_n.jpg?ig_cache_key=MTE3ODUxMDM3NzMwMDM4MDQ2Mg%3D%3D.2
      [width] => 320
      [height] => 232
    )

  [thumbnail] => stdClass Object
    (
      [url] => https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c147.0.785.785/12519511_1134161999935380_1730275103_n.jpg?ig_cache_key=MTE3ODUxMDM3NzMwMDM4MDQ2Mg%3D%3D.2.c
      [width] => 150
      [height] => 150
    )

  [standard_resolution] => stdClass Object
    (
      [url] => https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/12519511_1134161999935380_1730275103_n.jpg?ig_cache_key=MTE3ODUxMDM3NzMwMDM4MDQ2Mg%3D%3D.2
      [width] => 640
      [height] => 465
    )

)

          

Few hacks

In our Agency, I was asked to swap the fallback square images with high quality center cropped one. But the problem was the Instagram API still returns those 3 above URL for each image. However if you look at Metropolitan Museum Instagram web version you’ll see that there’s high quality square images.

met museum ig feed

So i spent some time poking around on the feed and comparing URLs together and finally figured it out.

following is the standard_resolution url :

https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/12519511_1134161999935380_1730275103_n.jpg

To get the full size image from standard_resolution, you can easily just remove the size s640 x 640 from url. The original image size of the above link is 1080 x 785 (landscape).

If you take a closer look at thumbnail’s URL, there’s a parameter that does the cropping “/c147.0.785.785/”.

https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c147.0.785.785/12519511_1134161999935380_1730275103_n.jpg

“c” is for the Crop command.
147 is the rounded number of (width-height/2) for landscapes, and (height-width/2) for portraits.
Zero is set the crop to center.
785 is the smallest aspect of the image (height for landscapes and width for portraits)

If the image is portrait, we should substitute the “zero” width “147”. Also keep that in mind that these two numbers are for getting the image cropped from center, if you want > to get another result you can play around with the numbers.

High quality square image without hassle

Since thumbnail version is already cropped to center, we can just easily take the “/s150x150/” and change it to our desire size. i.e /s600x600/. The size shouldn’t be larger than original image’s width (in this case 1080), otherwise it will return an error.

https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/c147.0.785.785/12519511_1134161999935380_1730275103_n.jpg

Returned image from above URL

Hope this helps.

I think Instagram should eventually update the API documentation, but until that, you can use these hacks.