Editing markup files with images for the Pelican website

Question

Is there a way to refer to images in the Markdown file so that they 1) look correctly when editing and 2) generate properly when processing with Pelican?

The whole reason I'm trying to use Pelican is to simplify editing files locally / autonomously with various editors without having to start a local server. These editors understand the general syntax of an image as follows:

![Pelican](images/pelican.jpg) 

But in order for Pelican to create the right paths, I have to use:

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

Which editors do not understand, so only broken images are displayed in the preview. This is less than ideal. Linking to images with full addresses does not work, because I often work offline.

Is there any combination of settings - the local server does not work, which helps me a bit when editing files on ipad / etc - will this allow me to edit and publish correctly using the same markup for the image?

Answer 1

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

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

... you can link to an image from my-dinosaur.md with:

 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, which looks like this:

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

So far, the relative positions between:

• source document ↔ image
• generated HTML ↔ image

... are the same, the above method should allow you to perform your tasks.

Of course, depending on the URL structure you choose, this may or may not be feasible. If you do not want to change the structure of URLs in accordance with the organizational structure of the source content, it will be difficult to display the image in both environments without starting the local server.

Answer 2

The {filename} approach does not work for images in the current version of Pelican.

Here's how to do it:

Starting with Pelican 3.5, you can use the {attach} tag to attach any type of file to a static site. The relative path agreement for the content folder remains the same.

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

Just paste the above phrase into your article, wherever you intend to link the image, and it would be nice to go.

Let me know how it turns out!

Answer 3

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

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

This should solve (2). Without additional information about which editors you use and how they turn image paths into rendered images, however, it is impossible to find out if this will allow (1).