Lektor plugin to help with multi-resolution responsive images
Project description
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.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for lektor_responsive_image-1.0.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 1f139706fee720ea619f29eb92ee2815976491fec3aeda2ba70c3788f05ec35f |
|
MD5 | 3030082d503368de31cdfa13a8ba1c6d |
|
BLAKE2b-256 | 2062a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36 |
Hashes for lektor_responsive_image-1.0.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 5534b0bd1710960e70f6e16bd0e2a31b8d90e22f32a8b11b34778a55ec561446 |
|
MD5 | e702ca934d1560706894a2b03e99c404 |
|
BLAKE2b-256 | 560973541307d5893ba079cec5308381793cbb68ac2ff61707fe138f36eb29e5 |