Fixing my Pelican to display images

I found that the Pelican site theme I was using was automatically expanding images to 100% width, which I didn’t want to have. I also wanted to use captions on my images.

Thanks to Joe Lotz I was able to sort this out.

This involved switching from the Pelican provided Python Markdown to Pandoc Markdown. This adds a whole bunch more Markdown functionality to the site.

1. Add Pandoc and the Pelican Pandoc reader to your environment.

python -m pip install pandoc
python -m pip install pelican-pandoc-reader

2. Update your requirements.txt so the deployments to other environments, like Netlify when this is published, also do this.

pip freeze > requirements.txt

3. I wanted to extend the site CSS to use my own CSS file. But I also wanted to not make a lot of changes to the source CSS of the theme if possible. So I created a new CSS file under /theme/static/css and then updated /theme/templates/base.html and added my css file in last. I also had to edit the pelicanconf.py file and change the line NEST_CSS_MINIFY = True to NEST_CSS_MINIFY = False; without this change the minified css file is used instead and my custom css is ignored.
4. Now I was able to comment out the width: 100% and height: 100% from nest.css, and add the captioning CSS that I wanted to use to lazaruk.css.

This also served as a good reminder that css settings for images override the settings on individual images. Because I wanted to use the individual settings to define image size I needed comment those out of the css completely.