Resize An Instagram Image Using A Media Query Parameter

This is something I have been meaning to post for quite some time, ever since I first started working on integrating Instagram's API in web applications from 2013. - The ability to resize an image from Instagram without having to deal with registering for an API key and worrying about request limits.

This approach is ideal if you have no requirement to get further information about an image, such as description, comments, likes etc.

Believe it or not, Instagram contains quite a neat (somewhat hidden) feature that gives you the ability to output three different sized images directly into a webpage, by constructing the path to an image as so: https://www.instagram.com/p/<image-id>/media/?size=<size-parameter>.

The supported "size parameters" are:

  • t - for thumbnail (150px x 150px)
  • m - for medium (306px x 306px)
  • l - for large (640px x 640px) 

The great thing about using the media parameter is that the requested image size is served up immediately. For example, we could embed an Instagram image directly into our HTML markup as so:

<p style="text-align: center;">
  <img alt="Mr. Brown - The Office Dog" src="https://www.instagram.com/p/uz_8x2qW6E/media/?size=m">
</p>

Which will render the following output:

Mr. Brown - The Office Dog

In this case, this is a picture of Mr. Brown (the office dog) from my Instagram profile in medium size.

JSON/XML To Strongly-Typed C# Object In Visual Studio

Today, I stumbled across a really neat feature in Visual Studio 2015 that gives you the ability to create a strongly-typed C# class directly into your class library. I'm amazed that I've happened to overlook this key feature since Visual Studio 2012!

Better late than never.

In the past, when consuming large JSON data-structures, I normally head off to json2csharp.com to help me get the initial class objects generated, which works a treat. I've blogged about my experiences using json2csharp here.

The strongly-type class generator feature is hidden away in a place I would never have thought to look - Edit > Paste Special, where you will be given the option to either generate a class object based on XML or JSON. But it's in there for a reason.

Paste Special - To Json or XML Class

All that needs to be done now is to either copy some XML or JSON ready to paste into a newly created class. I do find the generated output quite untidy, but this is a great starting point to generating complex data structures.