search

orchidhq / Orchid

Build and deploy beautiful documentation sites that grow with you
https://orchid.run
GNU General Public License v3.0
514 stars 53 forks source link

Image with portrait orientation gets rendered as landscape #297

Closed singularsyntax closed 5 years ago

singularsyntax commented 5 years ago

Hello,

My post includes a photo via the Markdown ![image-alt-caption](/path/to/the/image) syntax, which references an image in the /assets/media directory. The original image has portrait aspect, but gets rendered by Orchid as landscape.

Am I missing something?

cjbrooks12 commented 5 years ago

How is the image being copied to the output site? Are you having Orchid copy an entire asset directory over (as in this docs page), or using the asset filter in a template?

Orchid shouldn't be doing anything to rotate it without you explicitly telling it to. My guess is that the image is actually set to landscape orientation, but whatever you use to preview it rotates the preview automatically. But browsers wouldn't do that automatic rotation, so it would look different on the page.

When running the local server, if you replace the src attribute URL with a file:// URL referencing the absolute file path of the image, does the image show up properly?

singularsyntax commented 5 years ago

I haven't done anything special with asset file processing (I haven't learned about that yet) - I just cloned the Orchid Starter repository and enabled the Future Imperfect theme, and added a post and an image asset - so it should be doing whatever the default behavior is for those.

Replacing the src attribute with a file:///... URL results in the image not being displayed at all - instead the browser displays the alt text. If, however, I reference the image in the browser directly using either the image's full URL (http://localhost:8080/assets/media/IMG_3982.jpg), or a file:///... URL, it displays with the correct orientation, as it does when I open it with Preview on Mac OS.

I should note that this is all behavior with the local server - it doesn't work at all when deployed - the URL src attribute is rendered as /assets/media/IMG_3982.jpg and the alt text is displayed. The relevant Markdown is:

![Some alt text](/assets/media/IMG_3982.jpg)
cjbrooks12 commented 5 years ago

You'll want to make sure Orchid adds the base URL to all image links, to ensure they will always load properly both locally and in production. Try changing the Markdown image link to the following (make sure the post includes a Front Matter header):

![Some alt text]({{ 'assets/media/IMG_3982.jpg'|asset }})

If that doesn't work, would you mind sending me the image you're having trouble with, or the full repo you're working on (including the image)? You can send it privately on Gitter if you need.

singularsyntax commented 5 years ago

Using the {{ ...|asset}} tag resolves the issue with the deployed site. But the image is still shown with landscape orientation.

I invited you to the project hosted on GitLab (I prefer not to post the project URL publicly) ... I'm assuming that should send you some kind of notification with a link to the project to clone it.

cjbrooks12 commented 5 years ago

I got the invite, but I don't think I have the necessary permissions to view the code. There's no "repository" tab from the Gitlab project page, and it won't let me clone the repo locally.

singularsyntax commented 5 years ago

Try now.

cjbrooks12 commented 5 years ago

Thank you! I was able to figure the problem out, it was just that the photo's internal orientation was not set properly, and wasn't anything Orchid was doing to the image. I opened an issue on your repo and attached screenshots demonstrating the problem, and also described a fix.