可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

We have a custom Instagram integration in our site, the design for which assumes (and currently depends upon) the images it displays being square.

Instagram announced today that they will support landscape and portrait photos. Is there a way to load only square images/thumbnails even if the Instagram image is portrait/landscape?

回答1:

There is a hack for getting square images that I am using:

You take the thumbnail url which includes the correct cropping command and then replace the 150x150 with the size you actually want the image at.

For example, an api response for a landscape image thumbnail:

    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c135.0.810.810/11909312_160908554245117_2021517224_n.jpg",
      "width": 150,
      "height": 150
    }

the part c135.0.810.810 is doing the cropping to a square, which we want to keep, but the s150x150 is too small so replacing that with s640x640 gives us our cropped square image at the required size.

You can play around with the cropping command if you want this changed - e.g. setting the first number to 0 will give you a left-aligned cropped image.

回答2:

Yes it does.

I just spent some time poking around, and found some interesting things.

Short Answer: The API is still returning the square versions for images, even the ones that are uploaded as Portraits or Landscapes. If you want the original landscape / portrait images also, you have to do a little hack -- details below -- until they address it in their API response).

Ex: See this one photo of Taylor Swift uploaded by 1 of the user's mentioned in IG's blog post / press release -- @johnbenett

https://instagram.com/p/6ZVIHTJLYg/

This is the original uploaded photo - Portrait 512 px x 640 px

And here's what the Instagram API returns, for the various images (including thumbnail) for the above portrait image.

  "images": {
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s320x320/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 320,
      "height": 320
    },
    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 150,
      "height": 150
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 640,
      "height": 640
    }

So the standard resolution image returned by the API for this Portrait image is 640 px square and looks like this.

and the low resolution image returned by the API for this Portrait image is 320 px square and looks like this.

and last but not least, the thumbnail image returned by the API for this Portrait image is 150 px square and looks like this.

Notice how the photo has been cropped top and bottom to make it 640 square. If this is what you are looking for, then you are good to go, and you may stop reading right here :)

  "videos": {
    "low_bandwidth": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
      "width": 480,
      "height": 599
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1696545230566321_1671523019_n.mp4",
      "width": 640,
      "height": 799
    },
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
      "width": 480,
      "height": 599
    }
  }

and square images for the video poster image / cover image.

  "images": {
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s320x320/e15/11856717_420039798193500_1047568791_n.jpg",
      "width": 320,
      "height": 320
    },
    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e15/c140.0.360.360/11848988_1472118453090746_1196959304_n.jpg",
      "width": 150,
      "height": 150
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11856717_420039798193500_1047568791_n.jpg",
      "width": 640,
      "height": 640
    }

So with Videos, you are good to go, since the images array has the square images and the videos array has the actual videos in original aspect ratio.

回答3:

As far as I can tell so far, everything works as normal but the thumbnail won't be cropped in like on the Instagram app, you will see the white borders.

There must be a couple of extra image urls we can access but I haven't seen any update in the api docs.

回答4:

Update. Instagram just announced API support for landscape/portrait photo. Blog post

By default, the setting is disabled and the API will continue to return media in the old square format. When enabled, the API will return media in the format it was actually shared, which may be non-square. The ‘thumbnail’ images will not be affected by this setting, and they will continue to be square.

You don't have to change anything now but from June 1, 2016 all clients will receive photos and videos only in the format it was actually shared.

For my integration I want to receive original images so I enabled a new setting called Migrations in the “Edit Client” dashboard ( Instagram dev app configuration ).

I did some tests and it works fine. Here is example object returned by Instagram API:

{
    'low_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e35/p320x320/11849291_1520473841577439_1881145227_n.jpg,
    'standard_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/sh0.08/e35/p640x640/11849291_1520473841577439_1881145227_n.jpg,
    'thumbnail': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11849291_1520473841577439_1881145227_n.jpg
}