Lektor Responsive Images Plugin

This plugin hacks up Lektor’s Markdown renderer to support multi-resolution responsive images in Markdown text.

Local images will be resized to a variety of sizes, and <img> tags will be rendered with srcset and (optionally) sizes attributes in order to support the use of responsive image resolutions.

This plugin also registers a Jinja global function, responsive_image, which can be used to render markup for multi-resolution images from Jinja templates.

Configuration

The plugin is configured through configs/responsive-images.ini. Here is an annotated example:

# Currently, only a section named "default" is used
[default]

# Widths of images to generate.
#
# Images will be generated at these widths (but only up to the native
# width of the image.)
#
# (This is the default value.)
widths = 480 800 1200 2400

# Image quality for generating scaled images
# (This is the default value.)
# NOTE: the quality parameter will be ignored if running under lektor version
# before 3.1.
quality = 92

# Width of the image put into the `src` attribute of the `<img>` tag.
# (Though the orignal image is never up-scaled.  If the original is narrower than
# this width, then the original image is used.)
# (This is the default value.)
default_width = 1200

# Value put into the `sizes` attribute of the `<img>` tag.
# The default is not to set a `sizes` attribute
sizes = (max-width: 576px) 95vw, (max-width: 992px) 65vw, 800px

Usage

In the common use case, you will want to adjust the CSS stylesheet for your site so that images within Markdown text get either display: block or display: inline-block, along with max-width: 100%, or similar.

Jinja global function

This plugin also registers a Jinja global function named responsive_image. It expects a single argument, which should be an Image instance. It returns an object which has an .attr attribute whose value is a dict of attribute which could be set on an <img> tag to generate markup for a multi-resolution image. E.g.

{% set image = this.attachments.get('figure.png') %}
{% set img_attrs = responsive_image(image).attrs %}
<figure class="figure">
  <img class="figure-img" {{ img_attrs|xmlattr }}>
  <figcaption class="figure-caption text-center">
    {{- this.caption -}}
  </figcaption>
</figure>

Author

Jeff Dairiki dairiki@dairiki.org

Changelog

Release 1.0.0 (2024-01-24)

There are no substantive code changes from release 1.0.0b1.

• Test under python 3.12, drop testing under python 3.7.
• Use pdm for build and dev env management.
• Use ruff for style linting and formatting.

Release 1.0.0b1 (2023-04-20)

We've dropped support for python < 3.7. We now test under both Lektor 3.3.x and (now in pre-release) Lektor 3.4.x

Version 0.1a1 (2021-02-13)

Split code into it's own git respository.