The Better Figures & Images Pelican plugin now supports Figure Numbering

A dummy placeholder image — Figure 1. This figure has automatic figure numbering.

I had a feature request for automatic figure numbering, like latex. I was revamping this plugin for Pelican 3.3 anyway - and this didn’t seem too hard - so I decided to add it.

So, the Better Figures & Images plugin now supports automatic figure numbering. To enable this for all posts, just add this to your config file:

FIGURE_NUMBERS = True

If you want to enable this per post, just add this to the metadata at the top of the post:

for restructuredText add this:

:figure_numbers: true

and for Markdown add this:

figure_numbers: true

Caution:

Can you have Figures in Markdown?

I use reStructuredText for this site, and I’m not sure if you can even have Figures in Markdown documents - and I haven’t tested it, so caveat emptor.

It adds this:

<span class="fig_num" id="fig_X">Figure X: </span>

to the start of the figure captions, where X is the current figure number. It only does this to figures that already have captions - it’ll skip figures without. It completely ignores images, even it they have captions - it only affects figures.

The markup it outputs looks something like this:

<div class="figure" style="width: 250px; max-width: 100%; height: auto;">
    <img style="width: 250px; max-width: 100%; height: auto;" alt="" src="/images/image.jpg" />
    <p class="caption">
        <span class="fig_num" id="fig_1">Figure 1: </span>This is the caption of the figure.
    </p>
    <div class="legend">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

The figure number on it’s own looks something like this:

<span class="fig_num" id="fig_1">Figure 1: </span>

This allows you to style it in CSS using the class and to link to it using the id/#fig_1 anchor.

The results look like this

Here are a few working examples, showing the results of using the plugin. The original rst source for these are available in the plugins /test folder:

dummy 800x300 — Figure 2. This image is wider than the column it’s in - try resizing the browser window. Because of the max-width: 100%, the image is resized to fit the column.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the third image caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. image::{static}/images/posts/better-figures-images-plugin-for-pelican/dummy-250x300.png[map to buried treasure 2]

This is the fourth image caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. image::{static}/images/posts/better-figures-images-plugin-for-pelican/dummy-250x300.png[map to buried treasure 3]

Post Statistics Plugin for Pelican: A Pelican plugin to calculate various statistics about a post and store them in an `+article.stats+` dictionary. Includes time to read, word count, word frequency and Flesch-kincaid stats.
Better Figures & Images Plugin for Pelican: How to get perfect and responsive images and figures with Pelican - using the Better Images & Figures Plugin.
How I built this website, using Pelican: Part 1 - Setup: I take you from zero to a complete, fully functional website, built the way a professional web developer would do it, using Pelican.
Automatically Publishing a Blogroll from an OPML File: I wrote a little script that asks Miniflux for a list of my feeds in OPML format and turns it into an AsciiDoc page

The Better Figures & Images Pelican plugin now supports Figure Numbering

Tags:

Caution:

The results look like this

This is the third image caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

This is the fourth image caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Related Posts

Comments