Skip to main content

Lektor plugin to help with multi-resolution responsive images

Project description

Lektor Responsive Images Plugin

PyPI version PyPI Supported Python Versions GitHub license GitHub Actions (Tests) Trackgit Views

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

lektor_responsive_image-1.0.0.tar.gz (91.7 kB view hashes)

Uploaded Source

Built Distribution

lektor_responsive_image-1.0.0-py3-none-any.whl (6.7 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page