Image orientation wrong after resize (orientation bug in server based image processing)

[svollmar]

We have an image that looks perfectly normal when displayed with

[[image:something.jpg]]

However, we need to display it smaller and something like this:

[[image:something.jpg||width=“100”]]

generates a smaller image - but in landscape instead of portrait orientation. We observe that the generated HTML code appends “?width=100” to the image link instead of delegating this to CSS styles (so we know that something breaks during server based image processing). We would also prefer to use CSS-based scaling - how can we achieve this? Thanks!

[vmassol]

Hello,

Maybe that image has some bad orientation metadata?

@svollmar

e would also prefer to use CSS-based scaling - how can we achieve this?

You won’t be able to use CSS-based scaling across the board since XWiki users server-side scaling for some images. Note that this allows to transfer less data between the server and the client and thus it’s good for performance.

What you could try, is stop using [[image:something.jpg||width=“100”]] and instead use `[[image:something.jpg||csswidth=“100”]] (for example) and then use a SSX to inject the CSS.

See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/ for SSX.

[mflorea]

@vmassol

What you could try, is stop using [[image:something.jpg||width=“100”]] and instead use `[[image:something.jpg||csswidth=“100”]] (for example) and then use a SSX to inject the CSS.

Or you can configure XWiki to not add the image dimensions to the image URL, thus disabling the server-side resize. See https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-tools/xwiki-platform-tool-configuration-resources/src/main/resources/xwiki.properties.vm#L148 . But as Vincent noted, this may have some performance implications.

[svollmar]

Thanks for your suggestions. We have created a web service (Django DB) on a remote system that allows users to upload images using cameras of iPads and smartphones (HTML 5 native interface; works surprisingly well). After an image has been uploaded, we use the XWiki’s REST interface to automatically append them to an XWiki page (in a particular labbook context) and display a scaled version. It is a bug in XWiki: the images are displayed correctly in a number of image viewers (including Photoshop), XWiki apparently does not handle JPEG-images with "Orientation: 6 (Rotated 90° CCW)” correctly. We now use a workaround and rotate the images before sending them to XWiki from our external server with a solution similar to this: ios - Rotating an image with orientation specified in EXIF using Python without PIL including the thumbnail - Stack Overflow