Improve cover image cropper

[alanna]

Reported by @carolineawoolard

As a collective admin I want to be able to edit the image on my page easily -- right now the tool for resizing makes it VERY hard for me to do this with images sized for a desktop and there is no suggested size for the image. See this Loom about it

[SudharakaP]

As mentioned in the docs the optimal size for a cover image is 2736x650. But I don't think we do a good job of surfacing this information in the modal itself. Also the modal is very small on a desktop screen which makes it difficult to resize and move the image. As a simple fix, I suggest,

• Add a info box to the modal mentioning about the optimal size for the cover image.
• Make the cover image modal larger (~1000px width) for desktop screens.

cc: @opencollective/design

[alanna]

While those are good ideas, they won't really fix the issues demonstrated in the Loom, which are also about how images appear in the cropper and how the zoom is unwieldy.

Could the system automatically resize any image uploaded to the optimal width, and then let you decide which section to display using the cropper only for the vertical?

[BenJam]

I think the option here is to do something a little like you see on profile picture editors, size the image appropriately, provide an aspect ratio mask and allow the individual to resize and move as needed:

this gif from twitter's interface.

[Betree]

@BenJam isn't that what we do already? (apart from the zooming issues)

Related: #2709