How Figures & Images work in Pelican, by default
By default Pelican does a great job with figures and images, thanks to built-in support in ReStructuredText [1][1] . Pelican will turn this rst input:
.. figure:: {static}/images/better-figures-images-plugin-for-pelican/dummy-200x200.png
:align: right
This is the caption of the figure.
The legend consists of all elements after the caption. In this case, the legend consists of this paragraph.
into this HTML output:
<div class="figure align-right">
<img alt="/static/images/dummy-200x200.png" src="/static/images/dummy-200x200.png" />
<p class="caption">This is the caption of the figure.</p>
<div class="legend">The legend consists of all elements after the caption. In this case, the legend consists of this paragraph</div>
</div>
Which, given this CSS:
/* Styles for Figures & Images */
img {
border: 1px solid #bbb;
border-radius: 3px;
padding: 4px;
float: left;
margin: 1em …