A filter to print the input image in different predefined image sizes.
Project description
image-filter
A Lektor filter to print the input image in different predefined image sizes.
This plugin is designed to work together with the lektor-image-resize Plugin.
Current Filters:
imagessrcsetwebp
will print the configured sizes aswebp
to put in asrcset
element.imageswidthwebp
will print the first configuredwebp
image width to put in awidth
element.imagessrcwebp
will print the first configuredwebp
image name to put in asrc
element.imagessrcsetjpg
will print the configured sizes asjpg
to put in asrcset
element.imageswidthjpg
will print the first configuredjpg
image width to put in awidth
element.imagessrcjpg
will print the first configuredjpg
image name to put in asrc
element.
Configuration
You can configure the image width in the config file called configs/image-resize.ini
and add
a few sections for images. The section names can be whatever you want, the
final images will be called $(imagename)-$(sectionname).jpg
and $(imagename)-$(sectionname).webp
.
If the max_width
enty does not exist the entry will be ignored.
Here is a example config file:
[small]
max_width = 512
[medium]
max_width = 900
max_height = 900
[woowee]
max_width = 1440
Simple Lektor Example
Lektor Jinja2 Input
<img src="{{ 'waffle.jpg'|imagessrcjpg }}" width="{{ 'waffle.jpg'|imagessrcjpg }}"
srcset="{{ 'waffle.jpg'|imagessrcsetjpg }}" />
Lektor HTML Output:
<img src="waffle-small.webp" width="512"
srcset="waffle-small.webp 512w,
waffle-medium.webp 900w,
waffle-woowee.webp 1440w," />
Advanced Lektor Example
Lektor Jinja2 Input
{% set image = record.attachments.images.get(this.my_image) %}
<img src="{{ image | url | imagessrcwebp }}" width="{{ image | url | imageswidthwebp }}"
srcset="{{ image | url | imagessrcsetwebp }}" />
Explaination Input:
- First we created the Jinaja2-variable
image
that will contain our image (this.box_image
) to make this example better readable. (We assume you know how to create variables in lektor) - Next line we created a html image tag with
src
andwidth
- Last we created the
srcset
element with all configured sizes. - By the way we added the url filter in our example. there are options like
|url(external=true)
that you could like.
Lektor HTML Output
<img src="waffle-small.webp" width="512"
srcset="waffle-small.webp 512w,
waffle-medium.webp 900w,
waffle-woowee.webp 1440w," />
(Please note that we added some new lines to make the example better readable ans we assume that my_image: waffle-small.jpg
comes from your .lr file)
Installation
lektor plugin add lektor-image-filter
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
Built Distribution
Hashes for lektor_image_filter-1.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 4d50a7e4c500fa77df0746c6e782992675c2ebb7730d7a3ea862e4b97867de9d |
|
MD5 | 3023635ee9b84bf2253b22650acbf97c |
|
BLAKE2b-256 | e46214760fb8d96814981a7ba00ccaab314f9843d55ff22bb9a71b1ed35af7f7 |