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
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-0.1a1.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | e311908dcd0452d3ed29ce98731fe444e77a84049056410e31e65e5843926c47 |
|
MD5 | 349342a2fb9058ec95f634cf359eddff |
|
BLAKE2b-256 | 1a1dcad4c701acd664afaa74fe752d62e2bc6a0c8556f1c2bbfafce3d0c69329 |
Hashes for lektor_responsive_image-0.1a1-py2.py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 6c63052b772cc12c8814afdf6cc817a281b6fad3ea2f275f0d2ba5c1c9116b0c |
|
MD5 | ae5b6a70eba4ccb66ba242dc648dfe45 |
|
BLAKE2b-256 | 83b0ceb16885b7e86ec528f1fccf85e6a161485eaeb9af8d23b98dea3d7e2c92 |