Adds a square-crop option to automatically crop images

[benjamin-hull]

This option adds a wrapper element and some basic styling to crop images to a square, regardless of the original orientation. This should work in most simple cases, but there definitely will be some layouts it's not suitable for. It's really designed to handle the common case where users just drop in the script and point it at their username.

The starting point was this discussion: #527 and the fact that the workarounds no longer work, now that Instagram rejects unsigned URLs.

The new option is off by default, so everything should be backwards-compatible.

Lastly, this is my first foray into CoffeeScript, so let me know if I've got the style wrong or done anything dumb anywhere!

[stevenschobert]

Hey @benjamin-hull! Thank you for the contribution!

I've been super busy with other projects, but I'm really happy you took the time to put up the code here. I took a really brief glance at it, and everything looks good. The documentation additions is super helpful, so thanks for that.

Since it's a new feature, I'll probably end up pulling this into a v1.5 release, rather than v1.4.2, so I'll probably revert that commit (no worries though!).

I'll try to get this into a release as soon as I can, thanks!

[benjamin-hull]

No problem, mate. I've probably used your code on a dozen sites now, so it's the least I could do, really. Plus, forced me to look at CoffeeScript finally too, so that's a bonus.

It's almost a shame to have to include the feature detection, styling and DOM manipulation stuff for a workaround like this - it's obviously much cleaner without it, but judging by the discussion on the issues, I get the feeling that a lot of users are beginners when it comes to CSS and JS.

Makes much more sense as a 1.5 now that I think about it, too.

Thanks again for a great little lib! Let me know if I can ever help with anything else.

[jackputtock]

Hello; Steven, Benjamin,
What is the estimate for the release of 1.5? This feature would be awesome on my site as some of my recent Instagram images were not in the same aspect ratio or size as the rest causing it to push / mess up scaling.

Jack.

[joeygallegos]

I am having the same issue and this would help a whole lot. Do we have an ETA on the next major release for instafeed?

[benjamin-hull]

Hey @joeygallegos and @jackputtock - sorry for the delay. I know Steven's been up to his eyeballs on other projects, so as far as I know there's no timeline for the next release. Likely it will contain more than just this fix, though.

In the meantime, it's easy enough to achieve this yourself using the template options in instafeed.js, plus some simple CSS. I've got an example of that here: https://codepen.io/benjamin-hull/pen/xWprYe

If you have trouble with the CSS, feel free to leave a comment on the CodePen example, that way others can find it, too.

Thanks!

[stale]

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.