Instafeed.js: How to retrieve images with different resolutions?

[masiorama]

Hello there, in the docs it is stated that:

thumbnail_url: The Media's thumbnail image URL. Only available on VIDEO Media.

Does this mean that if I want to retrieve the feed images in a lower resolution I simply cannot?

I haven't found a way to retrieve the images in a resolution lower than 900x900...

Can anyone clear this up to me please?
Thanks in advance.

[masiorama]

I fear it is not possible: https://stackoverflow.com/questions/59930227/instagram-basic-display-api-alternative-image-size

[vulkanus]

Too bad! :(((

[masiorama]

Has anyone find a way to get small images directly from the source? Any ETA from Instagram? I definitely understand that this is not an Instafeed problem, nonetheless I think this is a big problem for this library too.
Thanks for any info!

[shanomurphy]

I found the following url pattern works for retrieving images of different sizes:

Take the post permalink:

https://www.instagram.com/p/CEriQnOMwW9/

and append media?size=t to it like this:

https://www.instagram.com/p/CEriQnOMwW9/media?size=t

• media?size=t returns a 150x150 px image
• media?size=m returns a 320x320 px image
• media?size=l returns a 1080x1080 px image

This resolves to a corresponding image on their CDN.

So in instafeed we can use the template option and the {{link}} templating tag like so:

<a href="{{link}}"><img src="{{link}}media?size=t" /></a>

Or add our own size attributes using the transform option and model tag:

var feed = new Instafeed({

    accessToken: InstagramToken,

    // Add image size attributes
    transform: function(item) {
        item.model.image_thumb  = item.link + 'media/?size=t';
        item.model.image_medium = item.link + 'media/?size=m';
        item.model.image_large  = item.link + 'media/?size=l';
        return item;
    },

    /**
     * Create responsive image using srcset. The 'sizes' attribute
     * should be adjusted to fit the actual dimensions in your page
    */
    template: '<li><img src="{{model.image_thumb}}" srcset="{{model.image_thumb}} 150w, {{model.image_medium}} 320w" loading="lazy" sizes="(max-width: 600px) 25vw, 320px" /></li>'

});

feed.run();

I'm guessing this could break at any moment if Instagram stop supporting this (undocumented?) url pattern though.

[benjamin-hull]

Good detective work, @shanomurphy!

Your observation:

I'm guessing this could break at any moment if Instagram stop supporting this (undocumented?) url pattern though.

is pretty much on-point though: Instagram did take extra steps to stop Instafeed v1 from using these undocumented URLs, so I would be very hesitant to use them in a production setting.

I'm going to close this issue, as there's no official support for image resolutions, so it's not something that Instafeed can look after. Thanks again!