search

paginagmbh / redmine_lightbox2

Lightbox for image attachments in Redmine
MIT License
126 stars 97 forks source link

Portrait Pictures shown streched to fit screen #67

Open itadminatitgroup opened 5 years ago

itadminatitgroup commented 5 years ago

the preview in browser shows the picture in wrong format. it is portrait, but it streches it to landscape.

try with this picture: DSC_0247

tofi86 commented 5 years ago

Funny thing: This happens here on GitHub as well, right? ;-)

The "problem" is, that your image has the "portrait orientation" set as an EXIF metadate:

Bildschirmfoto 2019-09-25 um 15 51 02

(sorry, german only, but you can read the marked entry as "Orientation: 6 (90° rotated counter-clockwise)"

And Redmine and other systems can't handle this metadate so they ignore it and present the image "as is", which means in landscape without the rotation.

On the other hand, the Windows image viewer, Mac OS Viewer and alike can handle this metadate and rotate the image properly. So they're making us think that "something is wrong with Redmine, Github, etc." but it isn't.

Normally, when rotating an image in those Desktop programs, the Orientation attribute is reset to 1 upon saving. So I don't know why this isn't happening in your case. I assume the image is directly from the camera and hasn't been edited yet.

A similar question has been raised on StackOverflow: https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation

I could implement the CSS rule image-orientation: from-image; but CanIUse says it's not widely supported: https://caniuse.com/#search=image-orientation From my observation, Firefox is doing this anyway, resulting in a stretched view of the image, but with correct orientation:

Bildschirmfoto 2019-09-25 um 16 27 27

While Chrome isn't implementing this rule, resulting in an non-rotated view which is what you call "wrong format":

Bildschirmfoto 2019-09-25 um 16 27 44

Testing and seeing this, I will add image-orientation: initial; to a further release in order to maintain the landscape view in Firefox to match the behaviour in other browsers and do not stretch and distort the image.

In the end, I'm stuck doing more because the lightbox library "fancybox" does not have any more options for this. I assume it's a bug how they retrieve the image size from source and I will open an issue at their bugtracker.

In the meantime I suggest you rotate and save the image in a desktop application and re-upload on your site. Sorry.

tofi86 commented 5 years ago

Testing and seeing this, I will add image-orientation: initial; to a further release in order to maintain the landscape view in Firefox to match the behaviour in other browsers and do not stretch and distort the image.

Done for Redmine 3.4 on branch redmine-3.4.

Done for Redmine 4.0 on branch master.

No new version has been released yet. Still looking for ways to read the EXIF meta data and find a workaround for fancybox.

tofi86 commented 5 years ago

A similar fancybox issue got closed: https://github.com/fancyapps/fancybox/issues/2293

So I guess this won't be implemented/fixed and I can'T do anything here at the moment...