Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Editing markdown files with images for Pelican site

Is there a way to reference images in a Markdown file in such a way that they 1) preview properly when editing and 2) generate properly when processed with Pelican?

The whole reason I am trying Pelican is to make it as simple as possible to edit files locally/offline with various editors without having to run a local server. Those editors understand common image syntax like this:

![Pelican](images/pelican.jpg)

But for Pelican to generate the proper paths, I have to use:

![Pelican]({filename}/images/pelican.jpg)

Which editors don't understand and so the preview just shows broken images. This is less than ideal. Linking to images with full addresses doesn't work because I often work offline.

Is there some combination of settings--short of running a local server, which helps me not a bit when I am editing files on the ipad/etc--that would allow me to edit and properly publish using the same markup for images?

like image 653
Chris Avatar asked Feb 19 '14 21:02

Chris


1 Answers

Given the use case you've described, I believe the only solution is one in which the URL paths are the same in both local and production environments. For example, given the following hierarchy:

- content
    - images
        - dinosaur.jpg
    - posts
        - my-dinosaur.md

... you could link to the image from within my-dinosaur.md via:

Title: My Dinosaur
Date: 2013-03-28
URL: /posts/my-dinosaur.html
Save_as: posts/my-dinosaur.html

Here is an image of my dinosaur:

![Pelican](../images/dinosaur.jpg)

In this case, the generated HTML will contain a link to the image that looks like:

<img src="../images/dinosaur.jpg" />

As long as the relative positions between:

  • source document <-> image
  • generated HTML <-> image

... are the same, the above technique should allow you to accomplish your objectives.

Of course, depending on your chosen production URL structure, this may or may not be feasible. If you don't want to change the URL structure to match the source content organization structure, it will be difficult to render the image in both environments without running a local server.

like image 194
Justin Mayer Avatar answered Sep 20 '22 21:09

Justin Mayer