So I think I have a bug here and I saw some posts on EXIF data and a supposed fix but I do not know if this is related. I have a JPG which is in portrait which I upload to Bubble as the image in a _Picture Data Type. When I view this in Bubble is shows mis-rotated (90 degrees counter-clockwise).
However if I click “see” it opens in a new tab and is correctly rotated (as below).
The problem I have is that the same inconsistent behaviour exhibits in other ways. For example when this image is used in the Advanced Slider it works fine (i.e. it is correctly rotated). However I use the Lightbox Slider to zoom in on an individual image. When I do this it is the mis-rotated image.
That image is, in fact, not rotated. In the first case, it has simply been stretched (distorted) to fit the dimensions of the container, but you can safely ignore that. It’s not something a user of your app will ever see; rather, it’s just a minor annoyance of the Bubble back end when displaying an uploaded image.
This is very strange, the version I saw was rotated rather than stretched. When I pasted the snippet however this is not what showed. This is very confusing!
Anyway this screenshot should show you the impact for the user. The background image is the one from the Advanced Slider gallery, the foreground is the same image shown via the Lightbox plugin.
Ah, ok. Unfortunately, it doesn’t seem like a Bubble issue per se. In the particular case you depict, it seems like it might be related to the Lightbox plugin and how it handles (or doesn’t handle) EXIF data. If it’s happening with the latest version of the plug-in, you should probably contact the plug-in developer.
EDIT
If you haven’t already done so, you should check the Bubble file manager to see how the image is oriented in Bubble storage.
I was going to say the same thing, it is usually how the image handles the data from the image.
I rarely see this issue nowadays but it does seem to creep up sometimes. I agree with @sudsy, you can also test it by just displaying the image in a normal image element and see if it is the correct way. Then you can explain to the plugin developer that it works when displaying it normally, just not with their plugin.
The images do display correctly in a regular image so I have contacted the plugin developer @ZeroqodeSupport on their own forum. I will let you know how it goes, they were previously responsive to a request I had for an amend on this plugin.
Sadly @ZeroqodeSupport have come back to say the plugin cannot support EXIF files, which isn’t very helpful. I am looking to have the user upload images - and I am dealing with the full gamut of capabilities. Telling they cannot use EXIF images is going to be akin to speaking to them in Greek (to some anyway) so this in effect renders the plugin valueless to me.
Any other thoughts? Basically I want users to be able to zoom in on the current image from the gallery (which is implemented with Advanced Slider - though I am not sure this matters).
Yes, indeed, the current Lightbox plugin functionality does not support EXIF files. But we hope to make such improvement in future. Apologies, there are no time estimates for how soon it will be, but once it will be added - be sure we will let you know.
That’s a bummer. Sorry. Maybe @ZeroqodeSupport will allow that feature to be sponsored?
An alternative could be to allow the user to rotate and crop the image when they upload it. I think the Croppie plugin allows the user to rotate images. I would check that plugin out if I were you.
I think that might solve your problem, plus it will allow you to crop the images to the same size. That could be helpful in itself.
thanks @J805 , unfortunately the images are not mis-rotated anywhere else (single Bubble image/Advanced Slider plugin) and so this is unlikely to solve the issue as rotating them again will mean they ARE mis-rotated in these other views which are also used.
Up to you, but, I think you should still try it. I’m not completely sure how it works but I think it will fix your issue. I think it rotates it and saves it the right way. Anyways, I still think it’s worth a shot. I think someone else was having the same issue and I think this helped them too.
I agree with @J805. Ensuring proper orientation before upload would be a good strategy to pursue.
If cropping is not a concern and if you’re allowing users to upload their own images, my Upload Buddy plugin might be worth a look. It allows for rotation and downsampling before upload. You can burn through Bubble storage rather quickly if users are uploading full res images from their phone.
If you need cropping or fancy image effects, I think there are at least a couple other plugins that might fit the bill. Just search the plugin marketplace.
Maybe