stevenschobert / instafeed.js

A simple Instagram JavaScript plugin for your website
https://instafeedjs.com
MIT License
3.5k stars 858 forks source link

Images cropped to square aspect ratio #461

Closed ressy closed 7 years ago

ressy commented 7 years ago

Apologies if this was already covered in a recent issue, but I couldn't find any quite matching this behavior. About three weeks ago I set up Instafeed on a site and had it pulling in images at their original aspect ratio, as intended. Then about a week later it mysteriously switched to all square images, cropping out content from the original images.

Other than accessToken, clientId, and userId the only options I'm using in Instafeed() are:

        get: user,
        sortBy: most-recent,
        limit: 5,
        resolution: low_resolution

When I looked at the image URLs Instafeed is pulling in, I noticed it's specifying some kind of bounding box options that look responsible for the cropping. (No idea if that means Instagram is forcing the issue when it generates a URL for the client, or if Instafeed is doing that spontaneously, though.) The relevant URL segments are things like s320x320 and c0.134.1080.1080, where if I manually remove the latter in an address bar it fetches the uncropped image just as I want to see in the feed automatically. Any ideas?

ressy commented 7 years ago

Looking around a little more I just saw this pull request, which is basically what my feed is already doing on its own for some reason. The referenced stackoverflow post describes cX.Y.W.H being the cropping arguments, which makes sense given the c0.134.1080.1080 I'm seeing on my side. Still no idea why it's happening, though.

stevenschobert commented 7 years ago

Hey @ressy! Have you double checked your settings in the Instagram API, to ensure that you have the option to enable non-square media checked?

ressy commented 7 years ago

Sorry for the delayed reply (and thanks for the quick one). Yes, I have that check box checked under Manage Client > Migrations in the API interface.

stevenschobert commented 7 years ago

@ressy ah good! How did you generate the access token you're using?

ressy commented 7 years ago

I originally used this: http://instagram.pixelunion.net/

(I had found that referenced a few times in other issues here, so I gave it a go, and it seemed to work.)

I also tried to make sense of Instagram's authentication instructions, but without success until just this moment. I just finally realized the redirect URI referenced in the docs must be listed in the security settings for the client for it to work. Now I just set the redirect URI arbitrarily to 127.0.0.1 and manually copied the text out of the address bar when the redirect was attempted, and I've got a shiny new access token. But, the issue persists even with the new token in place in my new Instafeed() call.

Thanks again for your help.

ressy commented 7 years ago

Actually, I spoke too soon. A few hours later when checking again I see that I'm getting non-square images now. So apparently a new access token fixed it, though I have no idea why it would.

stevenschobert commented 7 years ago

@ressy ah yeah, you have to generate your own token with your own client ID for it to pick up the media settings.

Glad it's working for you!