<li><p><aclass="github-button"href="https://github.com/chaos-bodensee/lektor-image-resize.git"data-icon="octicon-star"data-size="large"data-show-count="true"aria-label="Star lektor-image-resize on GitHub"target="_blank">Star</a></p></li>
<p>This plugin generates JPG and WEBP Images and Thumbnails in predefined sizes for any images in your <ahref="https://getlektor.com"rel="nofollow">Lektor</a> content.
The difference between this plugin and the lektor <ahref="https://www.getlektor.com/docs/api/db/record/thumbnail/"rel="nofollow">thumbnail</a> filter is that this plugin is converting all images and you don't need to have any references to the images in your templates.</p>
<h2>TL;DR: What does this plugin do?</h2>
<ul>
<li>It will generate <code>JPEG</code> images in the sizes you configured of all images in your Lektor content using <code>imagemagic</code>.</li>
<li>It will generate <code>WEBP</code> images in the same sizes using <code>imagemagic</code>.</li>
</ul>
<h2>Usage</h2>
<p>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 <code>waffle.jpg</code>, and to link to it in the content (not the template), but also show a thumbnail.
All images will be converted to webp using <ahref="https://pypi.org/project/Pillow/"rel="nofollow">Pillow</a>.</p>
<p>You can use the images like that:</p>
<pre><spanclass="cm"><!-- Simple example --></span>
<p>Will take a file called <code>waffle.jpg</code> and create the files <code>waffle-small.jpg</code>,
<code>waffle-medium.jpg</code> and <code>waffle-woowee.jpg</code> as well as <code>waffle-small.webp</code>,
<code>waffle-medium.webp</code> and <code>waffle-woowee.webp</code> 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.</p>
<p>The <code>max_width</code>/<code>max_height</code> parameters work like for the <ahref="https://www.getlektor.com/docs/api/db/record/thumbnail/"rel="nofollow">Lektor
thumbnail</a> command.</p>
<h2>Good to know</h2>
<p>There is a filter plugin avaliable at <ahref="https://github.com/chaos-bodensee/lektor-image-filter.git"rel="nofollow">lektor-image-filter</a> available, that can help you to use the image in all configured sizes,</p>
Please enable JavaScript to view the <ahref="https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="bottomsummary">
<divclass="container">
</div>
</div>
<footer>
<divclass="container">
<divclass="row">
<divclass="col-sm-4 icon-bar">
<ahref="https://github.com/lektor/lektor/"title="Lektor on GitHub"
><iclass="fa fa-github"></i></a>
<ahref="https://github.com/lektor/lektor/issues/"title="Report Issues for Lektor"
><iclass="fa fa-bug"></i></a>
<ahref="https://twitter.com/getlektor"title="Find Lektor on Twitter"
><iclass="fa fa-twitter"></i></a>
<ahref="https://gitter.im/lektor/lektor"title="Chat on Gitter"
><iclass="fa fa-comment"></i></a>
<ahref="https://github.com/lektor/lektor-website/tree/master/content/plugins/lektor-image-resize/contents.lr"title="View source for this page"><iclass="fa fa-code"></i></a>
</div>
<divclass="col-sm-8">
<ahref="../../license/">License & Copyright</a> •
<ahref="../../contact/">Contact</a> •
Made with <iclass="fa fa-fw fa-heart"title="Heart"><spanhidden>Heart</span></i> in Carinthia
