duncan­lock­.net

The Better Figures & Images Pelican plugin now supports Figure Numbering

A dummy placeholder image, 200x200 pixels square.
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.

A dummy placeholder image
Figure 3. This image is only 200px wide - smaller that the column it’s in. The max-width: 100% doesn’t stretch the image, because it’s also got a width: 200px - making it shrink to fit.

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]

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

dummy 200x200

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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]

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Related Posts