Home → Problems →

Image orientation

• Edit

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

   

   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

   • Edit

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

   

   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.

   • Edit

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

   

   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.

   -=

   • Edit

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

   

   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

   • Edit

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

   

   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>

   • Edit

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

   

   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

   • Edit

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

   

   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>

   • Edit

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

   

   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

   • Edit

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

   

   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>

   • Edit

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

    

    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

    • Edit

11. 11 Posted by markdownrespect... on 17 May, 2020 05:10 PM

    

    @theofrancis I've had exactly the same problem. This is my workaround: after embedding a photo in a document from 1Writer I open it with Preview on the Mac, rotate it, rotate it back again to the desired position, save --> now the Exif data shows the desired orientation (I think it should be 1 for photos taken in portrait) --> now Marked displays it the way you was expecting it to do.

    • Edit