Pelican - add image to summary

Question

I'm using pelican to create a website. I'm trying to add an image to the summary so that the summary always starts with an image.

I tried adding the image to the summary in the metadata (using markdown) but it only shows up on the index page and not on the other pages (in the example below the image does not show in the Posts page). I also have to add the image in the same line as the text which sometimes renders in a weird way (some text is to the side of the image depending on the image size).

Here is an example of the metadata:

Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Summary: ![figure 1](images/fig1.png) and this is my post summary

I also tried to use the summary plugin but that but that did not work at all.

What is the easiest way to add an image to the summary? I was hoping to avoid modifying the html code if possible.

Answer 1

Add the image as a field metadata in your article, say it "Cover", like this:

Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Cover: images/fig1.png
Summary: and this is my post summary

So you can use it in your template in this way.

{% if article.cover %}<img src="{{ article.cover }}" alt="">{% endif %} {{ article.summary }}

This line looks for Cover key in the metadata, and if there is one, create the img tag. If is not, then simply pass.

Answer 2

Ad it there where article.summary already is used. I use pelican-theme alchemy (that uses bootstrap) and article.summary is in index.html. I extended it as follows:

  <div class="col-sm-8">
    <h4 class="title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h4>
    <div class="content">
      {{ article.summary|striptags }}
      {% if article.cover %}           
         <div class="container"><div class="col-md-6" style="padding-left: 0px;  padding-right: 0px;">
           <img src="{{ article.cover }}" class="img-fluid">
           </div></div>   
      {% endif %} 
    </div>
  </div>

This works for me with the pictures in the images-folder.

But I have an other problem: the posts do not find the pictures in the same images-folder :-(