Aha! Thanks for the feedback. From experience, I know what causes this issue, and it's something I need to deal with in a future update of Files app. Here's what's happening.
Cause: Image EXIF rotation
Your image is taken from a device (I am guessing Android phone), which does not actually rotate the image according to orientation when it is taken. Instead, the "rotation" value is stored in your image's EXIF meta data. That is why most (non-web) applications will display the image in correct orientation, because they will use the EXIF rotation value when displaying the image. You can check this by uploading your photo here metapicz.com, which will show that your image contains EXIF orientation settings. You will also find that the image is either correctly- or incorrectly rotated, depending on if your browser supports inline exif rotation. It will differ across different browsers. You can read more about problems with EXIF rotation in the following links:
Anyway, this is causing two somewhat separate issues:
1. Resized image
When resizing the image in Files app (via PHP), it does not know the EXIF rotation. The image is physically stored in landscape aspect, which is how it was stored from the camera device. Therefore, when Files app resizes the image, it will simply resize based on the physical dimensions of the image, which is in landscape format.
This can be fixed, as we can auto-rotate the resized image according to the EXIF rotation value stored inside the image.
2. Original image in popup
This is a separate issue, and where it gets a bit dodgy. In your screenshot, I can see that your image is in correct orientation, but that it's squashed. This is because the Files app is displaying the image based on width/height parameters from the file data (which is in landscape mode). However, your browser is smart enough to rotate the image according to the EXIF rotation value stored in image. The result (what you see), is that the orientation is correct (by browser), but the image gets sized in the popup as if it was in landscape format.
This becomes even more complicated now that SOME browsers support EXIF-rotation for embedded images, while some don't. If you try to open that image in POPUP from a few different browsers, you will find that 1)
Some browsers (like yours), will rotate the image correctly (although it will be squashed), while 2)
Some browsers will not rotate the image, which means it will have incorrect orientation (landscape), but at least it will not be squashed.
This is more complicated to solve, because I need to detect if 1)
The image has EXIF rotation, 2)
The browser supports EXIF rotation and intends to rotate the image based on EXIF, and then 3)
Modify the popup output. Complicated, but I will look into it!
The ultimate solution
The ultimate solution (so to speak), would be if your images were already correctly physically oriented, instead of having the orientation value stored in the image's EXIF meta data. Especially for images you intend to display on the web (in a web browser).
- Set your phone camera to physically rotate images
This might not even be an option in many phones, but most phones (at least iPhone) will already store the image with correct physical orientation (instead of storing orientation in EXIF). The reason some phones don't physically rotate the image when it's taken, is because it require additional CPU usage. Of course, even if this is an option on your smartphone, it won't affect photos you have already taken.
- Use a desktop application to correct orientation
There are many desktop apps available, that will auto-rotate your images based on the stored EXIF value. This means that, although they "seem" correct already, these apps will actually convert the EXIF rotation to physical rotation. That means there will be no problems when viewing the images from the web. Here are a few apps I found:
In conclusion, it should be simple to fix the rotation for thumbnails generated by Files app. The issue in the popup is more complicated, although I will look into that also. Could you please send me the original image, so I can do some tests?