| Name | lektor-responsive-image JSON |
| Version |
1.0.0
JSON |
| download |
| home_page | |
| Summary | Lektor plugin to help with multi-resolution responsive images |
| upload_time | 2024-01-24 22:52:45 |
| maintainer | |
| docs_url | None |
| author | |
| requires_python | >=3.8 |
| 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. |
| keywords |
lektor
plugin
responsive
images
multi-resolution
images
srcset
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# Lektor Responsive Images Plugin
[](https://pypi.org/project/lektor-responsive-image/)
[](https://pypi.python.org/pypi/lektor-responsive-image/)
[](https://github.com/dairiki/lektor-responsive-image/blob/master/LICENSE)
[](https://github.com/dairiki/lektor-responsive-image/actions)
[](https://trackgit.com)
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.0 (2024-01-24)
There are no substantive code changes from release 1.0.0b1.
- Test under python 3.12, drop testing under python 3.7.
- Use `pdm` for build and dev env management.
- Use `ruff` for style linting and formatting.
### 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.
Raw data
{
"_id": null,
"home_page": "",
"name": "lektor-responsive-image",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "Lektor plugin responsive images multi-resolution images srcset",
"author": "",
"author_email": "Jeff Dairiki <dairiki@dairiki.org>",
"download_url": "https://files.pythonhosted.org/packages/20/62/a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36/lektor_responsive_image-1.0.0.tar.gz",
"platform": null,
"description": "# Lektor Responsive Images Plugin\n\n[](https://pypi.org/project/lektor-responsive-image/)\n[](https://pypi.python.org/pypi/lektor-responsive-image/)\n[](https://github.com/dairiki/lektor-responsive-image/blob/master/LICENSE)\n[](https://github.com/dairiki/lektor-responsive-image/actions)\n[](https://trackgit.com)\n\nThis plugin hacks up Lektor\u2019s Markdown renderer to support\nmulti-resolution responsive images in Markdown text.\n\nLocal images will be resized to a variety of sizes, and `<img>` tags\nwill be rendered with `srcset` and (optionally) `sizes` attributes in\norder to support the use of [responsive image\nresolutions][mdn-responsive-images].\n\nThis plugin also registers a Jinja global function, `responsive_image`,\nwhich can be used to render markup for multi-resolution images from\nJinja templates.\n\n[mdn-responsive-images]: <https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>\n \"MDN: Responsive Images\"\n\n## Configuration\n\nThe plugin is configured through `configs/responsive-images.ini`.\nHere is an annotated example:\n\n```ini\n# Currently, only a section named \"default\" is used\n[default]\n\n# Widths of images to generate.\n#\n# Images will be generated at these widths (but only up to the native\n# width of the image.)\n#\n# (This is the default value.)\nwidths = 480 800 1200 2400\n\n# Image quality for generating scaled images\n# (This is the default value.)\n# NOTE: the quality parameter will be ignored if running under lektor version\n# before 3.1.\nquality = 92\n\n# Width of the image put into the `src` attribute of the `<img>` tag.\n# (Though the orignal image is never up-scaled. If the original is narrower than\n# this width, then the original image is used.)\n# (This is the default value.)\ndefault_width = 1200\n\n# Value put into the `sizes` attribute of the `<img>` tag.\n# The default is not to set a `sizes` attribute\nsizes = (max-width: 576px) 95vw, (max-width: 992px) 65vw, 800px\n```\n\n## Usage\n\nIn the common use case, you will want to adjust the CSS stylesheet for\nyour site so that images within Markdown text get either `display:\nblock` or `display: inline-block`, along with `max-width: 100%`, or\nsimilar.\n\n## Jinja global function\n\nThis plugin also registers a Jinja global function named `responsive_image`.\nIt expects a single argument, which should be an `Image` instance.\nIt returns an object which has an `.attr` attribute whose value is\na dict of attribute which could be set on an `<img>` tag to generate\nmarkup for a multi-resolution image. E.g.\n\n```html+jinja\n{% set image = this.attachments.get('figure.png') %}\n{% set img_attrs = responsive_image(image).attrs %}\n<figure class=\"figure\">\n <img class=\"figure-img\" {{ img_attrs|xmlattr }}>\n <figcaption class=\"figure-caption text-center\">\n {{- this.caption -}}\n </figcaption>\n</figure>\n```\n\n## Author\n\nJeff Dairiki <dairiki@dairiki.org>\n\n## Changelog\n\n### Release 1.0.0 (2024-01-24)\n\nThere are no substantive code changes from release 1.0.0b1.\n\n- Test under python 3.12, drop testing under python 3.7.\n- Use `pdm` for build and dev env management.\n- Use `ruff` for style linting and formatting.\n\n### Release 1.0.0b1 (2023-04-20)\n\nWe've dropped support for python < 3.7.\nWe now test under both Lektor 3.3.x and (now in pre-release) Lektor 3.4.x\n\n### Version 0.1a1 (2021-02-13)\n\nSplit code into it's own git respository.\n",
"bugtrack_url": null,
"license": "Copyright \u00a9 2021 Geoffrey T. Dairiki\n \n Permission is hereby granted, free of charge, to any person obtaining\n a copy of this software and associated documentation files (the\n \"Software\"), to deal in the Software without restriction, including\n without limitation the rights to use, copy, modify, merge, publish,\n distribute, sublicense, and/or sell copies of the Software, and to\n permit persons to whom the Software is furnished to do so, subject to\n the following conditions:\n \n The above copyright notice and this permission notice shall be\n included in all copies or substantial portions of the Software.\n \n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
"summary": "Lektor plugin to help with multi-resolution responsive images",
"version": "1.0.0",
"project_urls": {
"Home": "https://github.com/dairiki/lektor-responsive-image"
},
"split_keywords": [
"lektor",
"plugin",
"responsive",
"images",
"multi-resolution",
"images",
"srcset"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "560973541307d5893ba079cec5308381793cbb68ac2ff61707fe138f36eb29e5",
"md5": "e702ca934d1560706894a2b03e99c404",
"sha256": "5534b0bd1710960e70f6e16bd0e2a31b8d90e22f32a8b11b34778a55ec561446"
},
"downloads": -1,
"filename": "lektor_responsive_image-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "e702ca934d1560706894a2b03e99c404",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 6723,
"upload_time": "2024-01-24T22:52:44",
"upload_time_iso_8601": "2024-01-24T22:52:44.009774Z",
"url": "https://files.pythonhosted.org/packages/56/09/73541307d5893ba079cec5308381793cbb68ac2ff61707fe138f36eb29e5/lektor_responsive_image-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "2062a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36",
"md5": "3030082d503368de31cdfa13a8ba1c6d",
"sha256": "1f139706fee720ea619f29eb92ee2815976491fec3aeda2ba70c3788f05ec35f"
},
"downloads": -1,
"filename": "lektor_responsive_image-1.0.0.tar.gz",
"has_sig": false,
"md5_digest": "3030082d503368de31cdfa13a8ba1c6d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 91723,
"upload_time": "2024-01-24T22:52:45",
"upload_time_iso_8601": "2024-01-24T22:52:45.648326Z",
"url": "https://files.pythonhosted.org/packages/20/62/a6d1b3b9c0119e9e378529dfded462952180d45dd44046d17f06523ebc36/lektor_responsive_image-1.0.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-01-24 22:52:45",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dairiki",
"github_project": "lektor-responsive-image",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"tox": true,
"lcname": "lektor-responsive-image"
}
