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.
imagessrcsetwebp
will print the configured sizes aswebp
to put in asrcset
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.imagessrcjpg
will print the first configuredjpg
image name to put in asrc
element.firstwidth
will print the first configured image width to put in awidth
element. If you use the Advanced Lektor Example we try to compute the width if no is provided,firstheight
will print the first configured image height to put in aheight
element. If you use the Advanced Lektor Example we try to compute the height if no is provided,
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 width
enty does not exist the entry will be ignored.
Here is a example config file:
[small]
width = 640
height = 360
[medium]
height = 720
[woowee]
width = 1920
<img src="{{ 'waffle.jpg'|imagessrcjpg }}"
width="{{ 'random_string'|firstwidth }}" height="{{ ''|firstheight }}"
srcset="{{ 'waffle.jpg'|imagessrcsetjpg }}" />
<img src="waffle-small.webp"
width="640" height="360"
srcset="waffle-small.webp 640w,
waffle-woowee.webp 1280w,
waffle-woowee.webp 1920w" />
-> If the width
is not defined the option will be skipped in srcset!
[fields.my_image]
label = Example Image
description = Select a Image from the Attatchments of this site. Upload one, if no one is available
type = select
source = record.attachments.images
{% set image = record.attachments.images.get(this.my_image) %}
<img src="{{ image | imagessrcwebp }}"
width="{{ image | firstwidth }}" height="{{ image | firstheight }}"
srcset="{{ image | imagessrcsetwebp }}" />
- 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.
<img src="waffle-small.webp"
width="640" height="360"
srcset="waffle-small.webp 640w,
waffle-medium.webp 1280w,
waffle-woowee.webp 1920w" />
-> If the width
is not defined we try to compute the option based on the height
entry and the source image aspect ratio.
(Please note that we added some new lines to make the example better readable and we assume that my_image: waffle.jpg
comes from your .lr file, created via lektor admin menu) and is a image in 16:9
aspect ratio.
lektor plugin add lektor-image-filter