New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using standard resolution and all square media stop working #527
Comments
Same problem for me too. Happened from today I guess. May be Instagram changed something? @stevenschobert |
I can confirm this issue since yesterday. |
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. |
I think is a bug associated to https://twitter.com/instagram/status/902561859915669504 |
I can also confirm this issue @stevenschobert |
Seeing this widespread across the web with multiple sites using different scripts, not just limited to Instafeed |
I noticed the same - https://instagram.com/<:yourprofile>/media now returns non squared images.. |
Seeing it all over the web, including our customers... don't seem to see any official word about it though? |
Any solution guys? I got the same issue |
This is my temporary solution: (Shopify Client)
|
I have fixed it now temporarily via editing the
Then In CSS, I added
Hope that helps. |
using @khoata 's solution, i found out you can replace the I simply added this code:
For this to work, you need to use the I didn't use EDIT: you can use these resolutions : |
@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 ~Surjith |
@marieptremblay 👍 . But with me, just remove /s150x150 is enough :D |
@khoata just removing /s150x150 returns in actual height and width, not square for me. |
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:
|
So, should I tick that checkbox? |
Untick. I did that. |
@surjithctly you are right. I just tested and it seems to only work with resolutions that instagram are using : 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. |
Its already unticked :( |
@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. |
There are also different other resolutions, like 480x480 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? |
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! |
This seems to work for us:
|
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. |
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. |
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. |
@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 |
@akuhar You're very welcome. I have put this script after the |
Just solving this issue for my various sites using instafeed.js - rather than hooking in the resize to 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 |
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)
Note the line $('.instaitem > a > img').each(function() needs to be changed to whatever specific markup you are using. |
@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. |
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: Squared and cropped: 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! |
@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. |
I still can not change from 150x150 to 320x320, I think it's something that is escaping me, I am new here
|
Great work @stevenschobert removing the negative person no one needs it at all. |
@beejamin, you're solution works perfectly. Thank you all so much:) |
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? |
@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. |
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 #549 (comment) 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. |
@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! |
@kmoloo - I can take a look. Drop me an email to ben [at] companionstudio.com.au. |
Hello all, 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".
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".
So maybe the documentation is wrong/old. 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>'
}); |
@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
});` |
@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? |
@wilcarter15 did you update to the current version? Would be nice if you provide an code example so i can check ;-) |
@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() {
});` |
@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) |
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):Without signature (access denied):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. |
Does this mean we are stuck using the |
@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. |
Thanks @benjamin-hull for the hard work! implementing now and will report back with results. |
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! |
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. |
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.The text was updated successfully, but these errors were encountered: