Metadata-Version: 2.1
Name: lektor-responsive-image
Version: 1.0.0b1
Summary: Lektor plugin to help with multi-resolution responsive images
Author-email: Jeff Dairiki <dairiki@dairiki.org>
License: Copyright © 2021 Geoffrey T. Dairiki
        
        Permission is hereby granted, free of charge, to any person obtaining
        a copy of this software and associated documentation files (the
        "Software"), to deal in the Software without restriction, including
        without limitation the rights to use, copy, modify, merge, publish,
        distribute, sublicense, and/or sell copies of the Software, and to
        permit persons to whom the Software is furnished to do so, subject to
        the following conditions:
        
        The above copyright notice and this permission notice shall be
        included in all copies or substantial portions of the Software.
        
        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
        EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
        MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
        NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
        LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
        OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
        WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
        
Project-URL: Home, https://github.com/dairiki/lektor-responsive-image
Keywords: Lektor plugin,responsive images,multi-resolution images,srcset
Classifier: Development Status :: 4 - Beta
Classifier: Environment :: Plugins
Classifier: Environment :: Web Environment
Classifier: Framework :: Lektor
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.7
Classifier: Programming Language :: Python :: 3.8
Classifier: Programming Language :: Python :: 3.9
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Topic :: Text Processing :: Markup :: HTML
Requires-Python: >=3.7
Description-Content-Type: text/markdown
License-File: LICENSE

# Lektor Responsive Images Plugin

[![PyPI version](https://img.shields.io/pypi/v/lektor-responsive-image.svg)](https://pypi.org/project/lektor-responsive-image/)
[![PyPI Supported Python Versions](https://img.shields.io/pypi/pyversions/lektor-responsive-image.svg)](https://pypi.python.org/pypi/lektor-responsive-image/)
[![GitHub license](https://img.shields.io/github/license/dairiki/lektor-responsive-image)](https://github.com/dairiki/lektor-responsive-image/blob/master/LICENSE)
[![GitHub Actions (Tests)](https://github.com/dairiki/lektor-responsive-image/workflows/Tests/badge.svg)](https://github.com/dairiki/lektor-responsive-image/actions)

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][mdn-responsive-images].

This plugin also registers a Jinja global function, `responsive_image`,
which can be used to render markup for multi-resolution images from
Jinja templates.

[mdn-responsive-images]: <https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>
    "MDN: Responsive Images"

## Configuration

The plugin is configured through `configs/responsive-images.ini`.
Here is an annotated example:

```ini
# 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.

```html+jinja
{% 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

### Release 1.0.0b1 (2023-04-20)

We've dropped support for python < 3.7.
We now test under both Lektor 3.3.x and (now in pre-release) Lektor 3.4.x 

### Version 0.1a1 (2021-02-13)

Split code into it's own git respository.

