Pelican plugins » Images

Gives sane de­faults to im­ages and fig­ures and pro­vides a way to present beau­ti­ful im­age gal­leries.

How to use

Down­load the m/im­ file, put it in­clud­ing the m/ di­rec­to­ry in­to one of your PLUGIN_PATHS and add m.images pack­age to your PLUGINS in This plug­in as­sumes pres­ence of m.html­san­i­ty.

PLUGINS += ['m.htmlsanity', 'm.images']

To use the im­age grid fea­ture (see be­low), in ad­di­tion you need the Pil­low li­brary in­stalled. Get it via pip or your dis­tri­bu­tion pack­age man­ag­er:

pip3 install Pillow

Im­ages, fig­ures

The plug­in over­rides the builtin im­age and fig­ure di­rec­tives and:

  • Adds .m-image / .m-figure CSS class­es to them so they have the ex­pect­ed m.css im­age and fig­ure styling.
  • Re­moves the :align:, :figwidth: and :scale: op­tions, as this is bet­ter han­dled by m.css fea­tures.
  • To main­tain ac­ces­si­bil­i­ty eas­i­er, makes it pos­si­ble to en­force :alt: text for ev­ery im­age and fig­ure by set­ting M_IMAGES_REQUIRE_ALT_TEXT to True.

You can add ad­di­tion­al CSS class­es to im­ages or fig­ures via the :class: or :figclass: op­tions, re­spec­tive­ly. If you want the im­age or fig­ure to be click­able, use the :target: op­tion. The alt text can be spec­i­fied us­ing the :alt: op­tion for both im­ages and fig­ures.

.. image:: flowers.jpg
    :target: flowers.jpg
    :alt: Flowers

.. figure:: ship.jpg
    :alt: Ship

    A Ship

    Photo © `The Author <>`_
A Ship
Pho­to © The Au­thor

Im­age grid

Use the .. image-grid:: di­rec­tive for cre­at­ing im­age grid. Di­rec­tive con­tents are a list of im­age URLs, blank lines sep­a­rate grid rows. The plug­in au­to­mat­i­cal­ly ex­tracts size in­for­ma­tion and scales the im­ages ac­cord­ing­ly. If the im­age has EXIF in­for­ma­tion, prop­er­ties such as aper­ture, shut­ter speed and ISO are ex­tract­ed and dis­played in the cap­tion on hov­er. The im­ages are al­so made click­able, the tar­get is the im­age file it­self.

Ex­am­ple of a two-row im­age grid is be­low. Sor­ry for reusing the same two im­ages all over (I’m mak­ing it eas­i­er for my­self); if you want to see a live ex­am­ple with non-re­peat­ing im­ages, head over to my blog.

.. image-grid::