Image Orientation Issue

ppoffice / hexo-theme-hueman

A redesign of Alx's wordpress theme Hueman, ported to Hexo.

http://ppoffice.github.io/hexo-theme-hueman/

GNU General Public License v2.0

1.17k stars 336 forks source link

Image Orientation Issue #209

Closed factoryal closed 5 years ago

factoryal commented 6 years ago

Please make sure these boxes are checked before submitting your issue. Thank you!

[ ] I have setuped and configurated the blog according to Hexo official documentation;
[ ] I have read the Theme Wiki carefully and created my own configuration file(_config.yml);
[x] I have looked up the Issues and found no duplicate issues.

Web brower shows image(photo I have taken with my smartphone) rotated. It seems that EXIF of the image has been ignored. I tried to fix this but I couldn't yet. Before I trying to fix this problem more, I just want to know that the problem is being Hexo or this theme.

Thanks. and sorry for my English.

ppoffice commented 6 years ago

@factoryal This should be a browser issue. Currently, only Firefox has the full support to rotate an image by its EXIF via a CSS property (https://caniuse.com/#search=image-orientation). But you can always use some JavaScript to help you do that (https://gist.github.com/runeb/c11f864cd7ead969a5f0), and you can also rotate your images before publishing them to your site.

factoryal commented 6 years ago

@ppoffice I tried to fix orientation with CSS property, it only works on Firefox and Safari. but thumbnails aren't be affected. It seems that the EXIF of the thumbnail removed while generating the thumbnail. I'll rotate my images manually before publishing to my site.

Thanks for your support.

factoryal commented 6 years ago

I discovered image rotator according to it's EXIF data. If someone has problem like my case, try this.

Check here: https://savolai.net/software/JPEG-EXIF_autorotate

It's really easy to use. Before uploading image, just right-click the post's assets folder and click autorotate. (I only tested on Windows. Windows 10 also works well.)