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
File details
Details for the file lektor_responsive_image-1.0.0.tar.gz
.
File metadata
- Download URL: lektor_responsive_image-1.0.0.tar.gz
- Upload date:
- Size: 91.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: pdm/2.12.2 CPython/3.10.12
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 1f139706fee720ea619f29eb92ee2815976491fec3aeda2ba70c3788f05ec35f |
|
MD5 | 3030082d503368de31cdfa13a8ba1c6d |
|
BLAKE2b-256 | 2062a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36 |
File details
Details for the file lektor_responsive_image-1.0.0-py3-none-any.whl
.
File metadata
- Download URL: lektor_responsive_image-1.0.0-py3-none-any.whl
- Upload date:
- Size: 6.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: pdm/2.12.2 CPython/3.10.12
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 5534b0bd1710960e70f6e16bd0e2a31b8d90e22f32a8b11b34778a55ec561446 |
|
MD5 | e702ca934d1560706894a2b03e99c404 |
|
BLAKE2b-256 | 560973541307d5893ba079cec5308381793cbb68ac2ff61707fe138f36eb29e5 |