Photo Uploading with Incorrect Orientation

My client is trying to upload photos onto the ‘Flowers’ page under ‘Click to see More’ the photos show in their folder on the PC as the correct way - portrait but are uploading as landscape. Can anyone tell me why and is there a way for my client to change the orientation through the CMS? Thank you


Here is my public share link: https://preview.webflow.com/preview/sjflowers?preview=ca43ddc0eee63591b30341b6a7c0b6b2
(how to access public share link)

Hi @Roxzfr, thanks for your post and good question.

This is a know issue with iPhone and iPad images, I would be interested to know how they are capturing the original images.

If the image was taken with an iPhone device, you can explain this to your customer, that unfortunately, the iPhone camera hardware does not save the image directly in rotated form.

So rather than rotating the entire image, the camera software just adds a data file to the image noting which orientation the image should be in. It adds this information to the Exif data to these kinds of affected image captures.

So, when you open that photo with an application that reads the Exif data, the image is rotated while it’s not in other applications that don’t read the data. So basically, this image is saved in its original, unrotated form, but the Exif data is making it show in the rotated actual position.

To fix available images, the client should first open the image with an image editor tool such as Photoshop and save it again in the right orientation.

For new images, you could ask them to try and use a different camera or take photos in a different orientation on their phone. I found this guide online, but I’m not sure how helpful it might be: How to Stop Auto Rotate for Images on an iPhone

Let me know if this helps

3 Likes

Thank you @Cyberdave, I thought it would be the case. My client won’t be happy with the additional step but Hey Hell! Is there any way to manipulate the image using the Editor?

Hi @Roxzfr, unfortunately there is not a way yet to rotate in the editor, but that is a great idea, I would love your vote and comment on that here on the Wishlist item for that feature: Built-in Image editor that allows rotating uploaded | Webflow Wishlist

1 Like

yes, this is the common issue of the iPhones. Sometimes while taking the image with an iPhone device, not saved in that same manner you clicked means it rotate from its position. iPhone Messages Out of Order is also the issue mostly faced by the users.

Hi
I actually just had the same problem with my customer and her Iphone X (her old iphone 6 did not had the problem… weird??)

But we discovered that just copying the photo to the desktop and uploading it from here (instead of uploading it from the photo-library) suddenly worked :wink:
Dont know if this could work for you, but its worth trying.

Kim

Thank you…this saved me today. I was going nuts trying to understand why it was coming in rotated the wrong way.

cheers!

1 Like

Same issue! I’ve found that by editing the photo and saving as a png through Photoshop resolves the issue. Initially I thought it was my grid playing up.

We advise clients to process their images through tinypng.com. Less hussle than opening Photoshop and with multi image functionality for batch processing. This prevents the issue with rotated images AND optimises for file size at the same time.