Picture plugin #384
Comments
|
I'd love to see a picture plugin. In terms of how I would like to see this work, rather than having to wrap every image in a site with a My motivation for suggesting this is that I often author pages in Markdown, and I'd like to not have to change how I'm including images. I'd like the standard way of including images to just work with this new plugin.
|
|
Okay, it makes sense. Maybe it could work in this way: <div img-formats="avif,jpg" img-sizes="1x,300w,2x">
<!-- All images here will be affected -->
</div><picture img-formats="avif,jpg" img-sizes="1x,300w,2x">
<!-- Only this picture will be affected -->
</picture><!-- This image will be converted to a picture -->
<img src="" img-formats="avif,jpg" img-sizes="1x,300w,2x">I not sure about the name of the attributes. And I'd like to have only one attribute instead of two. Maybe something like |
|
Hi @oscarotero. That looks good, but I don't think I was clear with my suggestion. Sorry about that, let me try again. When I suggested a default configuration, I was imaging something set when registering the plugin, something like: site.use(picture({
widths: [300, 600],
formats: ["webp", "jpg"]
}));I've lifted these option names from Eleventy's image plugin, feel free to pick different options. Alternatively, the imagick plugin uses shared data. Is there a way we could do the same for a picture plugin, so there is consistency between the two plugins? With this configuration in place, I'd imagine all images will be affected. Perhaps then your suggestion of I hope this makes sense, do let me know if I've not been clear about anything. And, of course, feel free to ignore all of this if you choose! |
|
@cgwrench Yes, I got your suggestion, but don't think it's a good idea to specify this globally in the If you want to define this behavior for the entire site, you can add the attribute in a layout shared to all pages. For example: <!doctype html>
<html>
<head>
...
</head>
<body img="avif,jpg | 1x,300w,2x">
{{ content | safe }}
</body>
</html>To define this value using shared data, you can create a variable in a _data file and use it in the templates. For example: # _data.yml
picture_config: "avif,jpg | 1x,300w,2x"<!doctype html>
<html>
<head>
...
</head>
<body img="{{ picture_config }}">
{{ content | safe }}
</body>
</html>Does it works for you? |
|
That does work for me, thanks! |
|
Work in progress here: https://github.com/lumeland/experimental-plugins/tree/main/picture You can see an example here: The current syntax is:
|
|
It will be available in the coming v1.18.0. I'm closing this |
Enter your suggestions in details:
It would work combined with the Imagick plugin, to generate different versions of the same image by scanning the HTML and searching for
<picture>elements with theformatsand/orsizesattribute. For example:This would generate the following code:
And all versions of
/my-image.jpg.Related issue: #356
The text was updated successfully, but these errors were encountered: