Floatbox display images in native orientation, different from non-Floatbox in same browser

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 81
This image appears to display in any browser with proper orientation:
https://www.genspangroup.com/models/filemanager-uploads/NYKOGPKF6WQMJ3R2W9MN/E1781FA8-AE5C-4BD2-83CD-2ED3C42D6A8E.jpeg

However, if I open that same URL within a Floatbox, the image is rotated. Here is a screenshot:
https://web.bbdesign.com/screen.jpg

I have seen elsewhere in these forums that Floatbox does not alter the orientation of images. But do you have any idea why the same browser would display the same image (same URL) differently, depending on whether its in a Floatbox or not?

These images are coming from user uploads. I have had to deal with orientation issues already. For example, I generate a thumbnail using Persits ASPjpeg. That software component has a function called ApplyOrientation which preserves the orientation when writing the thumbnail JPG file. If I don't use that function, in some cases the image comes out rotated. That function seems to have solved the issue with thumbnails.

With the full-size image, however, I am just writing the uploaded file to the server and using a direct URL to it (as above). I suppose I could use ASPjpeg to create a "large version", and use ApplyOrientation. I don't know if that would solve this or not.

I also know that different browsers will respect embedded image orientation differently, I am just surprised to find different displays within the same browser of the same URL.

Thank you.
Member
Registered: Oct 2017
Posts: 37
Create a little test HTML page that has nothing but an <img> tag with the src attribute pointing to that JPG, and I think you'll discover that this problem has nothing to do with Floatbox. It's improperly rotated in Chrome, Firefox, and Safari. The problem is that it has EXIF Orientation metadata, but the browsers ignore it.
Administrator
Registered: Aug 2008
Posts: 3350
The auto-rotation of bare images looks to be a courtesy implemented by browser vendors to emulate behaviour of standalone image-viewer applications. I set up a minimal html page consisting of doctype, html, head, and body, and put a simple img element in the body. All browsers showed your image laying on its side - hence the conclusion that auto-rotation is just a courtesy put in place for direct image viewing only. (Note: Edge doesn't auto-rotate direct images.)

As you suspected, Floatbox can't help you auto-rotate images. Floatbox leaves the content rendering up to the browser, and the browsers don't auto-rotate images in standard HTML pages. I would think that auto-rotation would best be done at the server before delivering the image to the client. And I bet someone has got a short php routine posted somewhere that does this. A quick search of "php auto rotate image exif" showed some promise.

I suspect many (most? all?) online image presentation services handle auto-rotation on their back-end. Floatbox is entirely client-side, and so implementing auto-rotation does not make it onto the Floatbox enhancements do-list.
Member
Registered: Apr 2009
Posts: 81
Great, thanks for the explanation and advice!
Member
Registered: Sep 2018
Posts: 1
See also exiftool's
-Orientation
command-line option.

I was having trouble with the, and the solution was to run the following command against my images to clear out the tag:

find . -name "*.jpg" -exec echo exiftool -P -overwrite_original_in_place -Orientation=0 -n {} \;

Page: 1