How to not display images in Pelican article summaries?

Question

If an article does not have an explicit 'summary' in its metadata section, Pelican will by default output 50 words (SUMMARY_MAX_LENGTH = 50) when {{ article.summary }} is used. If the beginnings of an article contains a large image (in terms of dimensions), that large image would be included in the article summary.

This behavior may be a problem when the purpose of using {{ article.summary }} is prevent the article from taking up too much space, especially when used on the site index page where all articles are listed.

Is there a way prevent the output of images in an article summary?

I am using Pelican 3.7.1.

Answer 1

Try using Summary plugin:

This plugin allows easy, variable length summaries directly embedded into the body of your articles. It introduces two new settings: SUMMARY_BEGIN_MARKER and SUMMARY_END_MARKER: strings which can be placed directly into an article to mark the beginning and end of a summary.

https://github.com/getpelican/pelican-plugins/tree/master/summary

Answer 2

With my version of Pelican (Pelicant 4.0.1 with the Pelican-bootstrap3 theme) you can simply push the image down in your markdown article template with the script tag like so:

title: title
slug: sluggy
category: stuff
date: 2019-02-12
modified: 2019-02-12

Just some article text with some **markdown** styling.

<script>
<!--
    // This is pure filler that pelican wont execute but does consider when
    // determining the size of the article in the homepage/index overview.
//-->
</script>

<img src="path/to/my/image.png">

More _markdown_ article text.

The image will not be shown in the index/summary if the filler is enough.

if you want to prevent images to pop up in the middle of your summary overview and you don't want to use the Summary option (which is less DRY) you can do something like this:

title: title
slug: sluggy
category: stuff
date: 2019-02-12
modified: 2019-02-12

This is my article text about how I once altered an image, the result 
was:

<span class="img_point_of_reference"></span>

and I write more text over here.

<script>
    var my_image = document.createElement('IMG')
    my_image.src = "./images/stuff/example_image.png"

    var ref_point = document.getElementsByClassName("img_point_of_reference")[0]
    ref_point.parentNode.insertBefore(my_image, ref_point)
</script>

The Javascript at the end will only execute when the article in loaded fully.