Image orientation

theofrancis's Avatar

theofrancis

12 Jun, 2016 09:33 PM

Hi. I've been struggling to find any way to quickly and reliably show images taken with my iPhone in a Markdown preview, with the correct orientation. I'm using 1Writer on my phone to quickly upload phone photos and insert a Markdown link into my notes.

When I check the images on Dropbox (web and app) and on my Mac (El Capitan), the images are oriented properly, which means the orientation EXIF data is traveling with the image (and being read when the image is displayed).

But in Marked 2 (and other Markdown apps, for that matter), the images appear without regard to the orientation setting -- in other words, many are sideways or upside down. Is there any way of ensuring that Marked 2 respects the image orientation setting? Is that in the cards for the future? Thanks!

tf

  1. Support Staff 1 Posted by Brett on 12 Jun, 2016 09:36 PM

    Brett's Avatar

    Marked simply displays the image as it exists on the disk. If there's exif data that changes the way an actual photo app displays it, you'll need a workflow that actually applies that when the image is saved (either on iPhone or using something like Hazel on your Mac).

    -Brett

  2. 2 Posted by theofrancis on 13 Jun, 2016 03:19 PM

    theofrancis's Avatar

    Hm. The orientation data accompanied the image. I can tell because other apps know to orient them the correct way -- including the dropbox website/my browser, and the Finder on my Mac.

  3. Support Staff 3 Posted by Brett on 13 Jun, 2016 03:25 PM

    Brett's Avatar

    Send me an example image, please.

    Marked is just a web browser at its core. If you can embed the image
    into an HTML document and Safari loads it properly, though, I'll need to
    take a look at what the difference would be.

    -=

  4. Support Staff 4 Posted by Brett on 13 Jun, 2016 04:03 PM

    Brett's Avatar

    I didn't realize this property existed, but try adding the following to the style preferences->additional CSS and let me know if it fixes the issue:

    #wrapper {image-orientation:from-image; }

    -Brett

  5. 5 Posted by theofrancis on 16 Jun, 2016 02:09 AM

    theofrancis's Avatar

    Here are three Dropbox links to a couple images: The first link is to a
    markdown file linking to the two images; the other two links go directly to
    the same images in the same order.

    https://www.dropbox.com/s/28acar7q68uf9fk/%21lg%2BTest-photos-for-orientation-troubleshooting%2B2016-06-15-214737.txt?dl=0

    https://dl.dropbox.com/s/i1lu1zqbdzhyl6y/IMG_4465.JPG?dl=0

    https://dl.dropbox.com/s/9a2i7qgasdwocbz/IMG_4464.JPG?dl=0

    One of the photos (filename ending in 4465) is a portrait-orientation photo
    that shows up in Marked (and a few other places) as sideways, with the top
    of my head pointing to the right (instead of up). However, the photo shows
    up oriented properly in most other places, including:

    - viewed in the finder on my Mac (running OS X 10.11.5)
    - viewed in the Dropbox web interface
    - viewed in Editorial on my iPhone 5S
    - viewed in Write on my iPhone 5S
    - viewed in 1Writer

    Other places that don't orient the photo properly:

    - nvAlt on my Mac
    - MultiMarkdown Composer on my Mac

    The other photo (ending in 4464) is landscape, and shows up correctly (top
    of my head at the top of the frame) everywhere I've checked.

    The orientation data does seem to travel with the image. Both images went
    from my phone to Dropbox (via 1Writer) and then to my Mac. Here's the EXIF
    data from the copy of the portrait photo (ending in 4465) on my Mac, as
    gathered with File Viewer:

    *************************************
    * File Viewer *
    * http://macfileviewer.com/ *
    *************************************

    /Users/theofrancis/Dropbox (Personal)/Apps/1Writer/.photos/IMG_4465.JPG

    File Information
    ----------------
    Kind: JPEG image
    Size: 648 KB (647,585 bytes)
    Disk: 651 KB on disk
    Where: /Users/theofrancis/Dropbox (Personal)/Apps/1Writer/.photos
    Created: June 15, 2016 9:48 PM
    Modified: June 15, 2016 9:48 PM
    Last opened: June 15, 2016 10:02 PM

    Image Information
    -----------------
    Dimensions: 1280 x 960
    Color space: RGB
    Color profile: sRGB IEC61966-2.1
    Alpha channel: Yes

    Image Metadata
    --------------

    {TIFF Metadata}
    Orientation: 8

    {Exif Metadata}
    PixelXDimension: 1280
    PixelYDimension: 960
    ColorSpace: 1

    {JFIF Metadata}
    DensityUnit: 0
    YDensity: 72
    JFIFVersion: (1,0,1)
    XDensity: 72

    FileInfo.com Information
    ------------------------
    .JPG - 1 file association

    Type: JPEG Image
    Category: Raster Image Files
    Popularity: ★★★★★
    Developer: Joint Photographic Experts Group

    Theo Francis | [email blocked]
    c: 347-432-1823 | www.theofrancis.com
    Twitter: @theofrancis <http://twitter.com/theofrancis> & @theowire
    <http://twitter.com/theowire>

  6. Support Staff 6 Posted by Brett on 16 Jun, 2016 03:02 PM

    Brett's Avatar

    So it looks like the webkit version used by OS X applications does not
    automatically handle image rotation. I'm still trying to figure out why
    Chrome and Safari do by default, but neither currently support the
    "image-orientation: from-image" property, so I've been unable to force
    it thus far.

    I don't see this currently being possible, but will explore further.

    -Brett

  7. 7 Posted by theofrancis on 16 Jun, 2016 04:39 PM

    theofrancis's Avatar

    Very odd -- so they somehow support the image orientation indicator, but
    don't do so through the property that's supposed to handle it?

    Theo Francis | [email blocked]
    c: 347-432-1823 | www.theofrancis.com
    Twitter: @theofrancis <http://twitter.com/theofrancis> & @theowire
    <http://twitter.com/theowire>

  8. Support Staff 8 Posted by Brett on 16 Jun, 2016 05:05 PM

    Brett's Avatar

    The property would be a manual way to override. What the browsers do seems to be at a lower level.

    http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

    -Brett

  9. 9 Posted by theofrancis on 16 Jun, 2016 05:22 PM

    theofrancis's Avatar

    Maddening. Thanks for looking into; I hope there's some way to find a
    solution... And if I have to do something differently to make things work,
    so be it -- but I have no idea what.

    Theo Francis | [email blocked]
    c: 347-432-1823 | www.theofrancis.com
    Twitter: @theofrancis <http://twitter.com/theofrancis> & @theowire
    <http://twitter.com/theowire>

  10. 10 Posted by rennanrieke on 26 Jul, 2018 10:02 PM

    rennanrieke's Avatar

    I'm having this trouble too. Specifically, it seems that portrait-oriented images come out 90º counterclockwise.

    My use case if for a daily journal. I write throughout the day on paper, then in the evening I transcribe it to a markdown file. I want to be able to include the occasional sketch inline.

    I use an Automator service that converts from heic to jpg, moves the image to my Assets folder, and copies the file path for inclusion in a TextExpander-driven markdown image.

    I tried including a 90º-clockwise rotation step in my workflow, but then the image rotates a full 180º in the Marked-rendered version. I inserted a second, backwards rotation to counteract the first, and it seems to be working.

    It's embarrassingly kludgy. Has anyone found a more elegant solution?

    Thank you all,

    Rennan Rieke

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac