Instafeed.js: Instagram's new feature - multiple photos in one post. Instafeed photo goes grey for that post.

[patrickbolle]

Hi folks.
Instagram just released this - http://blog.instagram.com/post/157572774352/170222-multiple

Which is cool... but sort of makes it tough for Instafeed and other third party apps too...

For a post that has multiple photos attached to it, the Instafeed picture goes fully grey, no evidence of a picture trying to be shown.

You can see that on my client's homepage (at the bottom) here : https://hypeblvd.com/

Any ideas here?! This feature was literally just released, so I don't expect anyone to have it figured out already, just thought I would put it on the radar!

Cheers!

[stevenschobert]

Looking into this right now @patrickbolle, stay tuned.

[stevenschobert]

So at first glance, it looks like for these new images are coming back from the API like this:

{
  "id": "1455976586624879870_198272188",
  "images": {
    "low_resolution": {
      "height": 320,
      "url": "https://instagramstatic-a.akamaihd.net/null.jpg",
      "width": 320
    },
    "thumbnail": {
      "height": 150,
      "url": "https://instagramstatic-a.akamaihd.net/null.jpg",
      "width": 150
    },
    "standard_resolution": {
      "height": 612,
      "url": "https://instagramstatic-a.akamaihd.net/null.jpg",
      "width": 612
    }
  },
  "created_time": "1487785956",
  "tags": [],
  "attribution": null,
  "filter": "Normal",
  "type": "video",
  "user_has_liked": true,
  "link": "https://www.instagram.com/p/BQ0qv3PD8z-/",
  "location": null
}

Where the type is set to video and the all the image URLs are https://instagramstatic-a.akamaihd.net/null.jpg, which is a big gray square.

I don't see any new options in the Instagram API client settings, or anything mentioned in the Instagram API Changelog (last update was Jun 1, 2016), so I don't think there is anything we can do to actually display those pictures right now 😞

For now, you can filter out these images using the filter option available in v1.3+:

var feed = new Instafeed({
  get: "user",
  userId: "xxxx",
  accessToken: "xxxx",
  filter: function(image) {
    if (image.type === "video" && image.images.thumbnail.url.indexOf("null") >= 0) {
      return false;
    }
    return true;
  }
});
feed.run();

[stevenschobert]

Also, I've only tested this out against the feed @patrickbolle posted. If anyone can validate these changes on their own feeds, or sees anything different, please let me know.

[patrickbolle]

@stevenschobert Oh, that filter is exactly what I'll use then! Cheers Steven, appreciate the quick response!

[meanspa]

Getting the same behavior on our feed, filtering the images in the same way. Thanks!

[zomboh]

@stevenschobert came across this today and your code didn't work. Turns out now Instagram returns the type for multiple images as "carousel" and it works just as the "image" type, so you can actually just do this, for example:

filter: function(image) {
    if (image.type == 'image' || image.type == 'carousel') {
        image.template = '<li class="instagram-feed-item"><a href="{{link}}"><img class="lazyload" src="' + image.images.standard_resolution.url + '" /></a></li>';
    }

That will return the first image in the carousel. I don't need to show all of them, just the first one, so that works for me. Thanks for the nice library!

[stevenschobert]

@zomboh ah great! They must have updated the API! Thanks for sharing!

[LukaGiorgadze]

Waiting for this feature! :)

[stale[bot]]

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know.
Thank you all for your contributions.

[LukaGiorgadze]

Still waiting.. :/

[stale[bot]]

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know.
Thank you all for your contributions.