Giveth-dapp: Unifying the image aspect ratio

[GriffGreen]

Edit: See the task description https://github.com/Giveth/giveth-dapp/issues/273#issuecomment-379605135x

The picture, when uploaded is always, zoomed in so that the top and bottom are cropped off... we need a better zooming strategy... maybe so that nothing is ever cropped off?

[vojtechsimetka]

If you upload square picture there is no problem. But yes in an ideal world user would be able to zoom in themselves and crop the image just in the DApp. Is it really needed right now though?

[GriffGreen]

this was fixed recently? like in the last few days? case check yalor's pic uploads.... https://alpha.giveth.io/campaigns/NAhUFqW8hFnmkdmN they were all zoomed in and ugly.

If you upload a square picture, you crop 30% off the top and bottom and view the middle 40% stretched out.

Can you reference a place where this is fixed?

Is there a way to edit past milestones to change the picture? Can this be done manually so our app can have a high quality for displaying publicly?

[GriffGreen]

if you check out the comms campaign: https://alpha.giveth.io/campaigns/R1WkS0obautijkvJ

They did a great job at picking a bunch of funny awesome pictures.... but it loses all of the fun when the photos are cropped :-(

you see this as you scroll:

[vojtechsimetka]

Problem definition:
The DACs, Campaigns and Milestones all have images, however, noone knows how the resulting images will be displayed and the image display varies on amount of the entities and the browser resolution

Task:

• [ ] Change the image uploading component to handle cropping to 4:3 aspect ratio
• [ ] Change DACs card display to always show 4:3 aspect ratio image. The cards should be at most 350 px. https://alpha.giveth.io/dacs
• [ ] Change Campaigns card display to always show 4:3 aspect ratio image. The cards should be at most 350 px.https://alpha.giveth.io/campaigns
• [ ] Change Milestones card display to always show 4:3 aspect ratio image. The cards should be at most 350 px.https://alpha.giveth.io/campaigns/fzOahNwFVyY7qLTI
• [ ] Milestones without image should show the Giveth logo in various colours according to the visual identity guide

[GriffGreen]

Love it!!!

[geleeroyale]

Playing around with this for an hour now. There is no way around setting a fixed aspect on upload. I made a hotfix that does not go for 4by3, but a square image, because we use background-size: cover to make the pictures snug the box, we lose some image information in extreme ratios.

I found this while looking for a ready-made-solution to image-resizing on upload:
https://github.com/DominicTobias/react-image-crop

my cosmetic hotfix: https://github.com/Giveth/giveth-dapp/pull/291

[Edit: This fix is mostly affecting views that hold more than 2 items]

[vojtechsimetka]

I think @twmilli will fix this.