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 details)

Uploaded Source

Built Distribution

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

Uploaded Python 3

File details

Details for the file lektor_responsive_image-1.0.0.tar.gz.

File metadata

File hashes

Hashes for lektor_responsive_image-1.0.0.tar.gz
Algorithm Hash digest
SHA256 1f139706fee720ea619f29eb92ee2815976491fec3aeda2ba70c3788f05ec35f
MD5 3030082d503368de31cdfa13a8ba1c6d
BLAKE2b-256 2062a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36

See more details on using hashes here.

File details

Details for the file lektor_responsive_image-1.0.0-py3-none-any.whl.

File metadata

File hashes

Hashes for lektor_responsive_image-1.0.0-py3-none-any.whl
Algorithm Hash digest
SHA256 5534b0bd1710960e70f6e16bd0e2a31b8d90e22f32a8b11b34778a55ec561446
MD5 e702ca934d1560706894a2b03e99c404
BLAKE2b-256 560973541307d5893ba079cec5308381793cbb68ac2ff61707fe138f36eb29e5

See more details on using hashes here.

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