# Plugin – lektor-image-resize 1.0.0

Generate JPG and WEBP Images and Thumbnails in predefined sizes.

#### Project links

#### GitHub Statistics

#### Meta

Version: 1.0.0

Author: L3D

#### Tags

images, thumbnails, and webp

View all tags.

## Project Description

# lektor image resize plugin

This plugin generates JPG and WEBP Images and Thumbnails in predefined sizes for any images in your Lektor content. The difference between this plugin and the lektor thumbnail filter is that this plugin is converting all images and you don't need to have any references to the images in your templates.

## TL;DR: What does this plugin do?

- It will generate `JPEG` images in the sizes you configured of all images in your Lektor content using `imagemagic`.
- It will generate `WEBP` images in the same sizes using `imagemagic`.

## Usage

Use this plugin if you want to be able to link to full-size images in your content, but still want thumbnails to be generated for the link itself. For example, you may have an image called `waffle.jpg`, and to link to it in the content (not the template), but also show a thumbnail. All images will be converted to webp using Pillow.

You can use the images like that:

    <!-- Simple example -->
    <a href="waffle.jpg"><img src="waffle-small.jpg" /></a>

    <!-- example with srcset -->
    <a href="waffle-small.webp">
      <img src="waffle-small.webp"
        srcset="waffle-small.webp  640w,   // Viewport bis zu 640
                waffle-medium.webp 1280w,  // Viewport größer als 1280
                waffle-woowee.webp 1920w"  // Viewport größer als 1920
      />
    </a>

## Installation

To install the plugin, add `lektor-image-resize` to your plugins from the command line and create a config file:

    # add the plugin to lektor
    lektor plugins add lektor-image-resize

If you have trouble, see the plugin installation section of the Lektor documentation.

Create a 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`.

Here is a example config file:

    [small]
    width = 640
    height = 360

    [medium]
    height = 720

    [woowee]
    width = 1920

Will take a file called `waffle.jpg` and create the files `waffle-small.jpg`, `waffle-medium.jpg` and `waffle-woowee.jpg` as well as `waffle-small.webp`, `waffle-medium.webp` and `waffle-woowee.webp` All the files will be created, regardless of whether the original file is smaller, so you can link without worrying whether a file will exist or not. If the original file is smaller than the width you have specified, the file will only be copied, and will not be resized.

The `max_width`/`max_height` parameters work like for the Lektor thumbnail command.

## Good to know

There is a filter plugin avaliable at lektor-image-filter available, that can help you to use the image in all configured sizes,

## Comments