Editing markdown files with images for Pelican site

Question

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?

Moxa

Answer 1

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.

Kicker

Answer 2

The {filename} approach doesn't seem to work for images in the current version of Pelican.

Here's how to go about it:

From Pelican 3.5 onwards, you can use the {attach} tag to attach any file type to your static site. The relative paths convention for the content folder remain the same.

![MyImage]({attach}images/MyImage.jpg)

Just insert the above phrase in your Markdown article wherever you intend to link the image and you would be good to go.

Let me know how this turns out!

Reparable

This works but it doesn't preview correctly in an md editor, which is the original question. – Repository

Answer 3

You can use the Jinja {{ SITEURL }} variable in Markdown posts to refer to images:

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

This should solve (2). Without more information on what editors you're using and how they turn image paths into rendered images, though, it's impossible to know if this will solve (1).

Alyssa

Answer 4

{filename} directive is used for creating hyperlinks during the publishing, once published your images should be linked to the images folder within the output folder.

Depending on how you've configured the static path in pelicanconf.py, e.g.

# Path to static folders
STATIC_PATHS = ["images", "extra/SW.js"]

The right approach as per documentation is

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

where static is the path to your static folder that contains images.

Exarch