Skip to main content
Topic: Strange behaviour with some cached images (Read 1917 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Strange behaviour with some cached images

I really don't know why this image is rotated http://oi67.tinypic.com/33v1e6w.jpg
It happens on elkarte 1.1 but also on 1.0 with Image Cache add-on enabled

sorry for my bad english

Re: Strange behaviour with some cached images

Reply #1
That is the age old problem of how the camera was held during the shot. 

The image EXIF data shows that image as rotated 90, so that is what you see here and on the tinypic site.  

If the image is uploaded to ElkArte, then it would get processed such that its orientation is corrected, but in this case its a remote image displayed inside of a IMG tag, so it shows it just as the picture was taken.

CSS4 has a new tag for image-orientation: from-image that will address this, but who knows when that will be released and supported.  For now you could add some JavaScript to read the remote images EXIF data, and then apply a CSS transform to rotate it correctly for viewing inside of an IMG tag.

On tinypic when you click to see the raw / original image, then its no longer in an IMG tag, its sent as a raw image.  As such your OS/Browser combo displays the image and that combo is generally aware of the orientation EXIF flag and displays it correctly.

TLDR:  the IMG tag is currently stupid.
Be safe, Be kind, Happy Programing

Re: Strange behaviour with some cached images

Reply #2
Does this addon I created using a external image proxy work?

http://addons.elkarte.net/enhancement/ExtImageProxy.html

Curious that's all, it does seem to work ok for me. I'm not suggesting that you use this over the other, it's just curiosity on my side.



Re: Strange behaviour with some cached images

Reply #5
I remember about auto rotated attachments that was implemented in elkarte 1.0 and that works very nice with attachments.  8)

Rotate the image and resave it before uploading should sort it.  ;)
It's not an image that I uploaded, but a member of my forum, I don't have a tinypic account, the easiest solution is to save and upload the image as attachment so it will be auto rotated.

Does this addon I created using a external image proxy work?
I didn't test that addon I use this one for elkarte 1.0 http://addons.elkarte.net/enhancement/Image-Cache.html
For now I won't do anything, I will soon update to 1.1 version.
sorry for my bad english

Re: Strange behaviour with some cached images

Reply #6
I remember about auto rotated attachments that was implemented in elkarte 1.0 and that works very nice with attachments.  8)

Rotate the image and resave it before uploading should sort it.  ;)
It's not an image that I uploaded, but a member of my forum, I don't have a tinypic account, the easiest solution is to save and upload the image as attachment so it will be auto rotated.


Thing is, I don't understand why someone would post a pic which is rotated incorrectly on Tinypic, then expect it to be the right way up when they embed it somewhere else.  The person who uploaded it needs to save them the right way up before uploading them.  ;)  If the auto rotation is working correctly your image will be rotated wrong way.

Re: Strange behaviour with some cached images

Reply #7
Most image viewers are displaying correctly those images using exif data, and the user will not notice that the image is not rotated correctly. Here is how it is displayed by Xviewer without rotating the image.

The same on mobile, even if the image is not rotated correctly the user will always see it correctly. I won't say it's the members fault, because they see fine those images on PC and smartphones.
sorry for my bad english

Re: Strange behaviour with some cached images

Reply #8
@Spuds would apply the same logic applied to the attachments to the proxy work?
Bugs creator.
Features destroyer.
Template killer.

Re: Strange behaviour with some cached images

Reply #9
I think so yes .... since the proxy has to download the image, it could be run through the rotation detect and correct functions.
Be safe, Be kind, Happy Programing