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.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.0b1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 2c7ccd148291cfaf16b355d8def5a34c9f27120e21f5e8958df6c7e9be8f5bc5 |
|
MD5 | 0e97d83b07b1eecb698b169164f83666 |
|
BLAKE2b-256 | 9fc324da906877b30888eb59a2e1d81c07c46957a9db589cdbfc270d8c6ddd98 |
Hashes for lektor_responsive_image-1.0.0b1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 2c4265ea6f8d86aebaf3d50dddb6d10b5a8a8fd5eb9b85fbeb53d59372fb312b |
|
MD5 | 5330e9d5b13d406b6677a04158c314a9 |
|
BLAKE2b-256 | 37d3901389360c3b6e07a693da1d359ff1449ec26e112dc43d28613c2dd40493 |