Search code examples
pelican

Pelican - add image to summary


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.


Solution

  • 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.