feat: allow to upload larger images without cropping any part of the image

[AfonsoMartins26]

No description provided.

[netlify]

✅ Deploy Preview for cesium-pelo-mundo ready!

Name	Link
🔨 Latest commit	8ce63f5
🔍 Latest deploy log	https://app.netlify.com/sites/cesium-pelo-mundo/deploys/66e86abdc353d700086c7434
😎 Deploy Preview	https://deploy-preview-102--cesium-pelo-mundo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MarioRodrigues10]

First of all, i really like the improvements that you made, but let's review a few things.

1. I think it will be good to keep the same layout for vertical images, and use a similar layout to horizontal images.
   

2. The use case should be like, I upload a picture to be added to CeSIUMPeloMundo and you choose the picture orientation, by default is vertical, in case it's horizontal you display the layout that you showed us by using the same design Diogo did previously.

You can make that by adding a prop either to json and the function that parses the pictures.

What's your thoughts on it? 👀 @AfonsoMartins26

Note: I didn't reviewed code in this, due to this improvements in the UI that are still needed to be done, after that is done i'll review it 🙌

[AfonsoMartins26]

Pc and mobile versions:

[MarioRodrigues10]

It looks amazing @AfonsoMartins26 🙌 !!
Great job 🤩

[MarioRodrigues10]

This looks good to me ✅ , but let the other reviewers @diogogmatos , @joaodiaslobo and @ruilopesm take a look into it !! 🙌

[joaodiaslobo]

The image now has some odd white borders on its corners, can you fix that?
Also, I think the location text (in this example "Lisboa, Portugal") looks less clear than before, missing a shadow maybe?

New:

Old:

[joaodiaslobo]

Also, I wonder if it would be possible to maybe discover the orientation of the image automatically through its width and height? 🤔

[joaodiaslobo]

Popover is way too small on mobile devices.

New | Old

[AfonsoMartins26]

Also, I wonder if it would be possible to maybe discover the orientation of the image automatically through its width and height? 🤔

In my initial pr, I implemented the feature. However, @MarioRodrigues10 said:
"The use case should work as follows: When uploading a picture to be added to CeSIUMPeloMundo, you should be able to choose the picture orientation. The default orientation should be vertical. In cases where the picture is horizontal, you should display the layout you showed us earlier, using the same design that Diogo previously implemented."

[AfonsoMartins26]

Pc and mobile changes:

[joaodiaslobo]

Text looks cool and no more white borders, great! 🎉
But now, the image is way too big on mobile, to the point where it gets out of the screen:

How it should look:

I have used iPhone SE resolution for these examples.
Just make sure it fits and this PR should be good to go!! 🙏

[MarioRodrigues10]

Text Overlay and text needs to be adjust to the mobile perspective. 🙌

[diogogmatos]

Long text is looking weird when it wraps around. Don't know if this was an existing problem or a new problem though ahaha.

[diogogmatos]

In some pins the image shows up sideways even though the picture orientation is correct in the picture file. This is something that already happens in the deployed version but it would be cool to fix it too since we're messing with this.

[joaodiaslobo]

In some pins the image shows up sideways even though the picture orientation is correct in the picture file. This is something that already happens in the deployed version but it would be cool to fix it too since we're messing with this.

@diogogmatos
Pretty sure this is already fixed in this PR!

[diogogmatos]

In some pins the image shows up sideways even though the picture orientation is correct in the picture file. This is something that already happens in the deployed version but it would be cool to fix it too since we're messing with this.

@diogogmatos

Pretty sure this is already fixed in this PR!

@joaodiaslobo

The screenshot was from the deploy preview on this PR...

[joaodiaslobo]

The screenshot was from the deploy preview on this PR...

@diogogmatos
Interesting, locally it does in fact use the right orientation but in the deploy preview it doesn't. 🤔

[diogogmatos]

Seems to be fixed! Just make sure the checks pass ;)

[MarioRodrigues10]

Yes problem seems to be fixed @diogogmatos, I think @joaodiaslobo requested him to remove one or two lines and fix the CI, and after that it's good to go. 🙌

[joaodiaslobo]

What a great addition! 🤩

No longer relevant