[orgmode] image issues

[olymk2]

I have been embeding images in my org files, but the path used in the org file and nikola seem to differ.

in org ../../images/myimage.jpg works but to make it display in the nikola output you need to use ../../../images/myimage.jpg

in other words you need an extra ../ so the image displays in either org or your blog not in both.

from a google i found the below blog post from someone else mentioning the same issue.

https://streakycobra.github.io/posts/blogging-in-org-mode-with-nikola/#sec-5

Is there a work around or am i doing something incorrectly ?

[Kwpolska]

You want to use /images/myimage.jpg.

Does Emacs really display those images inline?

[olymk2]

As you seem surprised, here is a screen shot, yes it does display images emoji and all sorts of other things if you have the modes enabled.

It also auto completes the file path for the image, but obviously for you example that would not work in emacs because / would search from root not from current location so the auto complete and inline images will not work.

I wonder if we could parse it on the nikola side so both would work.

[Kwpolska]

I don’t think we should. We already have a lot of stuff related to path mangling, and let’s not make some special exception for Org mode and a text editor that has an antiquated and baroque GUI and yet does inline graphics.

Also, are the paths dependent just on file location or something else?

Vim FTW.

[Kwpolska]

Speaking of Org mode, there have been quite a few issues for that plugin recently. Has Nikola been advertised on some Org mode community recently?

(But Vim love aside, we can’t make an exception like this reliably.)

[olymk2]

Not that i am aware of emacs and org have had major new releases recently, I picked out nikola because it actually supports org mode files I am quite new to emacs myself.

I was using markdown previously but the code blocks in org mode made me switch, there great for documenting things.

not sure what you mean about dependant on file location, they are relative to your current document, another screen attached if it helps.

I mainly use it to varify the image path before publishing.

[Kwpolska]

But is there some thing, eg. working directory, that could change that?

Anyways, I’m afraid we can’t mess with paths depending on the compiler, sorry.

[olymk2]

Not that I am aware of, but a google led me to this page which might be a step towards a solution on the emacs side.

http://stackoverflow.com/questions/14684263/how-to-org-mode-image-absolute-path-of-export-html

Also i am a fan of vim as well, i am using spacemacs with evil mode ie the vim keys and tend to use them for editing so i get the functionality of both editors :)

[Kwpolska]

@punchagan, could you look at all this?

[punchagan]

@Kwpolska I'll spend some time looking at the orgmode plugin issues in the next couple of days.

[olymk2]

great, seems simplist would be to strip all ../ from the image tags in org files then it will be relative to the sites root, it would mean the org files could be at any depth in the folder tree and the images would still resolve.

[ralsina]

Also, the extra "../" is probably because the produced file is not at the same "depth" in output/ as your org file is in posts/ or pages/. I suspect that can be solved by touching POSTS or PAGES in conf.py so that those "depths" match.

[punchagan]

@olymk2 I'm unable to reproduce this. My config is the default Nikola config + the config as suggested by the orgmode plugin. My test blog directory structure is as below

$ tree -R
.
├── conf.py
├── galleries
├── images
│   └── sample.jpg
├── listings
├── pages
├── plugins
│   ├── __init__.py
│   └── orgmode
│       ├── conf.py.sample
│       ├── init.el
│       ├── macros.org
│       ├── orgmode.plugin
│       ├── orgmode.py
│       ├── __pycache__
│       ├── README.md
│       └── requirements-nonpy.txt
└── posts
    └── test-post.org

And this is my sample post

Can you share the config of your site?

[olymk2]

I could create an example if needed, looking at your example it looks like it would work until you run output then the urls would end up with ../ in them ?

using this for my config

http://dpaste.com/2M610R3

[AbnerZheng]

@olymk2 As you have mentioned that http://stackoverflow.com/questions/14684263/how-to-org-mode-image-absolute-path-of-export-html might be a solution, have you work out by this way? I tried this way, but found it's not work with nikola but with export to html. Do you have any tip?

[olymk2]

@AbnerZheng I never found a decent solution though i am having another look.

@punchagan in your example post you have [[../images/sample.jpg]] what is that translated to when you serve up the site, for me its still ../images/sample.jpg but the image lives at /images so its not working when i try.

[olymk2]

Also noticed part of the problem is because when i edit the file i have this path /folder/filename.org

when i build i end up with this path

/folder/filename/index.org

so the depth is one deep, ie ../../ does not work because it would then be ../../../

so this is why relative paths are not working, not sure why its creating a folder per post and if thats possible to configure.

[Kwpolska]

You would have to disable PRETTY_URLS in config — but I’d recommend giving up on seeing images in a text editor instead.

[olymk2]

Dont really want todo if nothing else it verifys you have the links correct in your documents.

had an idea, what about adding a setting for org plugin specifically ie

ORG_REGEX_REPLACE

default it to None, but if you set a list of regex's [('/src="..\/"', '')] for example the output will be passed with the regex list ?

it would be a minor change to th code and could be useful beyond this simple use case, and we can use this regex to solve mine and various other people issues with emacs and the preview ?

I will create a PR if you want one, else i will just use my own fork for my blog.

[Kwpolska]

What would that setting do? Because if I understand you correctly, it would introduce some messing with paths in links, only for org-mode stuff. I’m :-1: for that idea, because it adds a lot of complexity for a minor use case — and it does not apply to any other compiler.

[olymk2]

well it would allow messing with the html output or org input, it could be global for other things.

else not sure what the best way to hook this in would be.

basically just need like a user override for path mangling, i pushed a fork and i have this for my config.

open to better ways.

# Replace src="../ with src="../../
# ie move up a folder to fix pretty url depth change
# ORG_REGEX_REPLACE = [(r'src\=\"../', 'src="../../')]

# Replace src="../../../ with src="/ the ../ is recursive
# ie make the image absolute from the weeb server root
ORG_REGEX_REPLACE = [(r'src\=\"(../)*', 'src="/')]

[Kwpolska]

No. Closing as wontfix.

[olymk2]

shame, guess i will have to use a fork for now. @StreakyCobra did you ever find another solution to this ?

[felixfontein]

I don't think the regex replace solution is good anyway, as you might have completely different paths for the same HTML snippet if it is used in indexes. So your regex workaround would only work if you don't use indexes (but post lists instead). Except, of course, if you only use the orgmode compiler for pages, and not for posts.

The only good solution is to make sure that the orgmode plugin produces HTML files with absolute paths (and not with relative paths). Then it will always work and Nikola can make the paths relative again when configured to do so.

[olymk2]

@felixfontein I agree that the regex solution is not great, i did look over the code and could not see an obvious way to override the way the urls are written for a specific function else i would have tried to hook in and rewrite the urls there.

If anyone knows if i can do this i would be interested to get a better solution.

[felixfontein]

You can always use something similar to Nikola's URL rewriting code to postprocess the generated HTML file:

doc = lxml.html.document_fromstring(data, parser)
doc.rewrite_links(url_replacer, resolve_base_href=False)
data = lxml.html.tostring(doc, encoding='utf8', method='html', pretty_print=True, doctype='<!DOCTYPE html>')

where url_replacer(link) is a function taking one argument (the link to be rewritten) and can return the new link. (See Nikola.rewrite_links and Nikola.render_template for where this code comes from.)

In url_replacer, you should convert all relative links which aren't proper URLs to absolute links (something starting with /). How you do that depends on where the images are stored; this might require some new setting (to set up where the pictures are copied to).

[olymk2]

I will have a look and see if i can implement that instead of the regex solution, thansk @felixfontein

[olymk2]

change the code to modify the urls using @felixfontein suggestion and it works, i basically just add ../ to the urls when the option is switched on.

Shall i create a PR or is this not something you want in the official plugin ?

[Kwpolska]

I’m not going to approve that PR for the interoperability reasons I mentioned earlier. Your “solution” works only because apart from PRETTY_URLS, you keep the same folder structure on both reasons (images/foo.png and posts/foo.org → output/images/foo.png and output/posts/foo), so it’s really a hack that works by coincidence. This hack won’t work if you have different output directory names. Nikola expects you to link to stuff based on the output paths, not input paths.

[felixfontein]

You should really convert the relative paths to absolute paths. You might want to add a setting which gives the relative position of the images root w.r.t. the posts/pages folder root, or something like that, but then you have to use that info to output absolute paths (/path/to/image.jpeg) in the HTML fragments. Only then can Nikola include them correctly in pages and indexes without that being dependent on PRETTY_URLS or whatever else.

(Is actually anyone using orgmode for posts, or is it just used for pages?)