Instafeed.js: Using standard resolution and all square media stop working

[jramgit]

I was using resolution: 'standard_resolution' and also disabled the Non Square Media option from the instagram client to get all the pictures squares on 612x612, however, this has stopped working out of the sudden yesterday, the images are now shown in their original resolution and not squares only. For "low_resolution" or "thumbnail" they images are all shown in squares but low resolution then. I tested this with different Instagram accounts and same thing happened. Also, I checked some other sites using instafeed.js and noticed their images are also now shown in different sizes and not squares.

[surjithctly]

Same problem for me too. Happened from today I guess.

May be Instagram changed something? @stevenschobert

[andreasemer]

I can confirm this issue since yesterday.

[marieptremblay]

I can confirm this too. The 'thumbnail' resolution works but 'low_resolution' and 'standard_resolution' are returning the original resolution. I've looked at the instagram changelog and developper blog but I found no update on their part for now.

[andreasemer]

I think is a bug associated to https://twitter.com/instagram/status/902561859915669504

[PedroTiagoSimao]

I can also confirm this issue @stevenschobert

[rbairstow]

Seeing this widespread across the web with multiple sites using different scripts, not just limited to Instafeed

[wiesson]

I noticed the same - https://instagram.com/<:yourprofile>/media now returns non squared images..

[thusenth]

Seeing it all over the web, including our customers... don't seem to see any official word about it though?

[khoata]

Any solution guys? I got the same issue

[khoata]

This is my temporary solution: (Shopify Client)

resolution : "thumbnail",
template: '<a class="slide" href="{{url}}" title="{{ cap }}" data-link="{{url}}"><img class="{{orientation}}" src="{{img}}"/></a>'

<script>
 $(window).load(function() {
  $('#instafeed > a > img').each(function(){
         var src = $(this).attr('src');
       $(this).attr('src',src.replace('/s150x150/', '/'));
   });
});
</script>

[surjithctly]

I have fixed it now temporarily via editing the template part in instafeed init script. Changed <img src.. to the background image holder.

<div class="instagram_img_holder" style="background-image: url({{image}});"> </div>

Then In CSS, I added

.instagram_img_holder {
   width: 260px;
   height: 260px;
   background-size: cover;
}

Hope that helps.

[marieptremblay]

using @khoata 's solution, i found out you can replace the 150x150 by any known instagram resolution and you will receive that image. @surjithctly 's solution did not work for me because I needed my pictures to be squared as they have to resize properly on my responsive page.

I simply added this code:

$(window).on("load", function() {
    $('#instafeed > a > img').each(function(){
        var src = $(this).attr('src');
        $(this).attr('src',src.replace('150x150', '320x320'));
    });
});

For this to work, you need to use the thumbnail resolution.

I didn't use $(window).load(function() { }); since this function is deprecated since JQuery 1.8 and removed in JQuery 3.0. I used $(window).on("load", function() { }); instead.

EDIT: you can use these resolutions : 150, 320, 640, 1080 etc.

[surjithctly]

@marieptremblay Seems they do not support any size. I just tried with few and seems some are not working. eg: 260 or 344.

I got it worked using above technique for my project, but don't know why it did not work for you. maybe because of the % width I added in CSS (that was needed for me since I was using a carousel). I have changed it now.

You may also try the padding-bottom technique to make it responsive.

~Surjith

[khoata]

@marieptremblay 👍 . But with me, just remove /s150x150 is enough :D

[surjithctly]

@khoata just removing /s150x150 returns in actual height and width, not square for me.

[khoata]

@surjithctly

Until June 1, 2016, Instagram's API will return square images (with white borders), regardless of how they were originally uploaded.

If you'd like to get images in their original landscape and portrait forms, you can opt-in to the API change by editing your Instagram API client, and clicking on the "Migrations" tab:

https://cloud.githubusercontent.com/assets/896486/10865600/560ad6a6-7fde-11e5-8e14-2013e51eda7c.png

[surjithctly]

So, should I tick that checkbox?

[khoata]

Untick. I did that.

[marieptremblay]

@surjithctly you are right. I just tested and it seems to only work with resolutions that instagram are using : 150, 320, 640, 1080.

I tested those on past and newly uploaded images and they work fine. It seems like the assets are still generated even though they decided to change the resolution they work with.

[surjithctly]

_Untick. I did that._

Its already unticked :(

[khoata]

@marieptremblay you right ! I removed "/150x150" this morning and it's worked. Now, it's not working. Just tested your way with 640x640. It's working.

[andreasemer]

@surjithctly you are right. I just tested and it seems to only work with resolutions that instagram are using : 150, 320, 640, 1080.

There are also different other resolutions, like

480x480
540x540
600x600

and so on, you just have to test the urls. But its still a bug for me in the API...

The question is should we create a pull request for instafeed, or should we wait for the fix?

[stevenschobert]

Hey everyone! Thanks for all the reports; it's great to see the community come together and suggest workarounds.

I wish I had some great "inside knowledge" to share, but I'm in the dark with you all 😞 If I had to guess - I'd agree with @andreasemer that it's related to their new album features they release.

I'll leave this thread open so everyone can keep discussing how they're handling the update. I'm open to community suggestions if anyone feels theres a specific way we can address it inside the library!

[Aframewerx]

This seems to work for us:

if (jQuery(".instafeed-wrapper").length) {
// Instagram Feed
var feed = new Instafeed({
  get: 'user',
  userId: 'ID-NUMBER',
  clientId: 'CLIENT-NUMBER',
  limit: 20,
  sortBy: 'most-recent',
  resolution: "thumbnail",
  accessToken: 'ACCESS-TOKEN',
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
});
feed.run();
}

<section>
  <div class="container">
      <div class="instafeed-wrapper">
        <div id="instafeed" class="instafeed"></div>
    </div>
  </div>
</section>

<script>
$(window).on("load", function() {
    $('#instafeed > a > img').each(function(){
        var src = $(this).attr('src');
        $(this).attr('src',src.replace('150x150', '640x640'));
    });
});
</script>

[jramgit]

In using @khoata solution also works for me, though I found images load first in low resolution and then are adjusted to the desire resolution to me, 640x640.

[joeygallegos]

I'm also having the same issue where it used to return a square image but is not returning the original size of the image uploaded. Wish we were notified of this before it was released. Now I have to implement a fix for every app I have using this implementation.

[jramgit]

In using the replace solution @marieptremblay I noticed the site now is making two request for each picture, one for 150x150 and another request for 640x640.

[akuhar]

@marieptremblay Thanks for providing your solution -- took a few tries, but it's working for me now.

Question: where would you recommend placing the script? As part of/separate from the instafeed script in the <head>, or before closing the <body>?

[marieptremblay]

@akuhar You're very welcome.

I have put this script after the feed.run(); which initializes instafeed. I didn't put it in the instafeed library itself since it's a temporary fix. You should always add your scripts at the body of your <body> tag (even your instafeed library should be there. It's not a good idea to add scripts to the <head> tag as it slows down the page loading time).

[benjamin-hull]

Just solving this issue for my various sites using instafeed.js - rather than hooking in the resize to $(window).on('load'), you can use instafeed's built-in success callback to insert a 'custom size'. This is a variation on @khoata's solution, in that it re-writes the URL, but it does it before the images are inserted, so you don't have to load the low-res size and then the full resolution version (example simplified to show the important bits):

var feed = new Instafeed({
  ///... your other config goes here.
  resolution: 'square', // This can be any name you like, you just need to re-use it in the success callback.
  success: function(response){
    response.data.forEach(function(e){
      // Now insert the 'square' size into each image's data:
      e.images.square = {
        url: e.images.thumbnail.url.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600'),
        width: 600,
        height: 600
      };
    });
  }
});

_Updated Jan 25 2018 to remove signature from URL before rewriting_.

💣 _Update Mar 28 2018 - Instagram are now enforcing signed URLs, so this no longer works_

[elescondite]

Placing the code in the after() function instead of the window.load event will avoid the visual flash of initial/adjusted resolution.

This also works for the case where you use the IG "load more" API call. Without it, the newly loaded images would be at the lower resolution. (window.load only fires once but Instafeed.after fires after every image addition)

var userFeed = new Instafeed({
    accessToken: '123456789.123456789123456789',
    get: 'user',
    userId: 123456789,
    sortBy: 'most-recent',
    limit: 8,
    resolution: 'low_resolution',
    template: '<div class="instaitem"><a href="{{model.images.standard_resolution.url}}"><img src="{{image}}" /></a></div>',
    after: function() {
        // disable button if no more results to load
        if (!this.hasNext()) {
            $('#insta-more').hide();
        } else {
            $('#insta-more').fadeIn();
        }
        $('.instaitem > a > img').each(function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace('150x150', '320x320'));
        });
    }
});

Note the line _$('.instaitem > a > img').each(function()_ needs to be changed to whatever specific markup you are using.

[marieptremblay]

@beejamin thank you for sharing. This is a better optimized solution. I will be trying this on my website soon enough. I didn't think to use a callback and it's definitely better to load the images only once.

[douglaswelcome]

Thanks all for the work on this. I thought I was going crazy when I noticed this issue until I found this discussion.

One thing I found (not sure it will help or not) but I noticed a slight difference in the URL when digging into the squared images directly on instagram profile pages:

Landscape:

https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14717339_563179363872773_4450707899689205760_n.jpg

Squared and cropped:

https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c170.0.683.683/14717339_563179363872773_4450707899689205760_n.jpg

The cropped adds the c170.0.683.683/. Not sure what to make of this, but thought it worth pointing out.

Thanks for all the help!

[stevenschobert]

@panoply I find your comment to be horribly distasteful, and not the least bit constructive. I'm removing your comment, as well as reporting your behavior to GitHub.

--

Everyone: My apologies if you received an email notification (like I did) with this user's comment. I'm pretty bummed out that someone would take time out of their day to write a comment like that. I've removed the comment and reported the user to GitHub. Thank you all for being an awesome community and keeping it positive.

[hencar]

I still can not change from 150x150 to 320x320, I think it's something that is escaping me, I am new here
My code :
`

                <script type="text/javascript">
                    var feed = new Instafeed({
                        get: 'user',
                        userId: 29612141,
                        accessToken: '29612141.1677ed0.33b8db6557cf48c1a8933885afdef740',
                        template: '<div class="grid12-2"><a target="_blank" href="{{link}}" title="{{caption}}"><img width="auto" height="auto" title="{{caption}}" src="{{image}}" /></a></div>',
                        limit: 12,
                        resolution: 'thumbnail',
                        orientation: 'square'
                    });

                    feed.run();

            $(window).on("load", function() {
                        $('#instafeed > a > img').each(function(){
                        var src = $(this).attr('src');
                        $(this).attr('src',src.replace('150x150', '320x320'));
                        });
                    });

                </script>`

[mdunbavan]

Great work @stevenschobert removing the negative person no one needs it at all.

[rightlook]

@beejamin, you're solution works perfectly. Thank you all so much:)

[Banjoist155]

I also had the issue of the server responding with 403 (Forbidden) using @marieptremblay's solution. (January 18,2018). Any ideas on how to remedy this?

[marieptremblay]

@Banjoist155 my website has the 403 issue as well using my own solution. I have not yet looked for a solution. I will keep you updated if I find anything.

[benjamin-hull]

Looks like the 403 is related to Instagram providing signed URLs for images now. You can't rewrite the size in the URL without needing a new signature. For now, you can also use an unsigned URL - so if you first remove the signature as per https://github.com/stevenschobert/instafeed.js/issues/549#issuecomment-358049610 you can then rewrite the size.

I've updated my previous example to include this fix.

Be aware that Instagram will likely move to _only_ allow signed URLs in future, in which case, we're going to have to find a new approach.

[kmoloo]

@beejamin - I'd like to get your solution implemented on my store, even if it is temporary. I'm incredibly new to JS, can you tell me exactly where to place your code and if it needs to replace some part of what already exists? Thanks!

[benjamin-hull]

@kmoloo - I can take a look. Drop me an email to ben [at] companionstudio.com.au.

[silberundeis]

Hello all,
after running into the same error i was a bit confused about the "not so cool" solution provided. Because i am not rly happy with that i dived into the code and found a weird switch.

First of all in the documentation it says for changing the image resolution you have to use the prop "resolution". But for some reason it is checking "imageResolution" and not "resolution".

switch(options.imageResolution)

The second thing are the cases who check for the property value. Again in the documentation it says for example "low_resolution". But in the code it checks for "low-resolution".

case "low-resolution":

So maybe the documentation is wrong/old.
@stevenschobert please let me know if i found the needle or if i am just too dumb to get this code :D

Heres my final code for getting the correct resolution:

let feed = new Instafeed({
        get: 'user',
        userId: 'MY_ID',
        accessToken: 'MY_TOKEN',
        limit: feedLimit,
        imageResolution: 'standard-resolution',
        imageTemplate: '<a href="{{link}}" style="background-image:url({{image}})"></a>'
    });

[wilcarter15]

@benjamin-hull I was using your solution, it worked beautifully, but then it stopped (thank you BTW!!). After a lot of trouble shooing the only thing I can figure is that Instagram has gone to only using signed URL's like you said. Any ideas on a fix?

Here is my code that was working until the other day. Currently I have commented your solution out and I am just using the 'standard_resolution' setting. Also I am using Bootstrap 4.)

`//Instagram Plugin
$(document).ready(function() {

var userFeed = new Instafeed({
    get: 'user',
    userId: '6864543261',
    limit: 4,
    resolution: 'standard_resolution',
    /*success: function(response){
        response.data.forEach(function(e){
          // Now insert the 'square' size into each image's data:
          e.images.square = {
            url: e.images.thumbnail.url.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600'),
            width: 600,
            height: 600,
          };
        });
      },*/
    accessToken: '6864543261.1677ed0.047f5bd50b3c4c96b7fed8fc491a9537',
    sortBy: 'most-recent',
        filter: function(image) {
          var MAX_LENGTH = 70;


          // here we create a property called "short_caption"
          // on the image object, using the original caption
          if (image.caption && image.caption.text) {
            image.short_caption = image.caption.text.slice(0, MAX_LENGTH)+"...";
          } else {
            image.short_caption = "";
          }

          // ensure the filter doesn't reject any images
          return true;
        },
    template: 
    '<div class="col-12 col-sm-6 col-xl-3 mt-2"><div data-aos="fade-up"><a href="{{link}}" target="_blank"><div class="insta-widget"><img class="ig-hover" src="{{image}}" alt="{{user.full_name}}"/><div class="likes"><div class="likes-box"><div class="row justify-content-center"><div class="col-12"><p><img class="profile" src="{{model.user.profile_picture}}"/><span class="fas fa-heart"></span>{{likes}}<span class="fas fa-comment"></span>{{comments}}</p></div><div class="col-12"><p class="caption">{{model.short_caption}}</p></div></div></div></div></div></a></div></div>',
});


userFeed.run();

});`

[wilcarter15]

@slbrs Just tried your solution and it's not working for me. It's pulling up the small thumbnail resolution, not the larger 'standard-resolution'. What am I missing?

[silberundeis]

@wilcarter15 did you update to the current version? Would be nice if you provide an code example so i can check ;-)

[wilcarter15]

@slbrs my bad. I had a working solution based on the answer from @benjamin-hull but now that isn't working. I think it has something to do with IG only allowing signed URL's now. As far as I can tell I am using the current version. Here is the code I am currently using on my local server. First, I thought this would render a larger image, it appears to just be the thumbnail. Second, it seems to be ignoring the bootstrap template structure. (both of these issues were working fine last week with my 'old code'). All it renders is 4 thumbnails as inline images right next to each other. Am I just miss-understanding this whole thing?

I am using Bootstrap 4.0.

here it is

`$(document).ready(function() {

var userFeed = new Instafeed({
    get: 'user',
    userId: '6864543261',
    limit: 4,
    accessToken: '*************',
    imageResolution: 'standard-resolution',
    imageTemplate: '<div class="col-md-3"><a href="{{link}}" style="background-image:url({{image}})"></a></div>',
});


userFeed.run();

});`

[silberundeis]

@wilcarter15 i had the same problem with the template output but i didnt have time to fix it yet. (my quick and dirty solution was changing it directly in the instafeed.js)
Actually i stepped into this insane bugfixing precedure by accident after updating my packages :-/. Maybe the script needs some more fixes to work with the new api settings.

[benjamin-hull]

This is very much looking like Instagram is now enforcing signed URLs, so the previous workaround no longer works (example with standard size, no other changes):

With signature (works):

https://instagram.fmel2-1.fna.fbcdn.net/vp/ad55ee6c44c18c4daef1df27ab26047d/5B36C9DC/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/28432763_109338869901951_2504174218007019520_n.jpg

Without signature (access denied):

https://instagram.fmel2-1.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/28432763_109338869901951_2504174218007019520_n.jpg

As far as I can tell, this currently leaves us unable to load non-standard sizes, which means that the old, square format is just no longer provided. This fix is out of action for now.

[douglaswelcome]

Does this mean we are stuck using the background-size: cover method with non-square sizes?

[benjamin-hull]

_@douglaswelcome - that's one technique, there's another one linked below..._

I have created a pull request with a fix for this issue, but in the meantime, you can check https://codepen.io/benjamin-hull/pen/xWprYe for 2 approaches to cropping yourself in CSS.

[douglaswelcome]

Thanks @benjamin-hull for the hard work! implementing now and will report back with results.

[douglaswelcome]

Just to report back @benjamin-hull, grabbed your code, dropped it in and followed the documentation. Worked like a charm and took two minutes. Thanks for making my job easy!

[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.