search

11ty / eleventy-img

Utility to perform build-time image transformations.
https://www.11ty.dev/docs/plugins/image/
433 stars 53 forks source link

Provide a WebC component #180

Closed zachleat closed 1 year ago

zachleat commented 1 year ago

Usage:

Eleventy Configuration

const { eleventyImagePlugin } = require("@11ty/eleventy-img");

module.exports = function(eleventyConfig) {

    // Add as a global WebC component
    eleventyConfig.addPlugin(pluginWebc, {
        components: [
            "./_components/**/*.webc",
            "npm:@11ty/eleventy-img/*.webc",
        ]
    });

    // Set global defaults in configuration
    eleventyConfig.addPlugin(eleventyImagePlugin, {
        // full options list on https://www.11ty.dev/docs/plugins/image/#usage
        formats: ["avif", "webp", "jpeg"],

        urlPath: "/img/built/",

        // outputDir is resolved automatically via urlPath 👀 (but you can override it)

        defaultAttributes: {
            loading: "lazy",
            decoding: "async"
        }
    });
};

Example WebC usage

<img webc:is="eleventy-image" src="possum.png" alt="…">

Specify widths:

<img webc:is="eleventy-image" src="possum.png" alt="…" width="100, 200">
<img webc:is="eleventy-image" src="possum.png" alt="…" :width="[100, 200]">

Specify formats (overriding defaults set via the configuration above):

<img webc:is="eleventy-image" src="possum.png" alt="…" formats="avif, png">
<img webc:is="eleventy-image" src="possum.png" alt="…" :formats="['avif', 'png']">

Change the url path or output dir (overriding defaults set via the configuration above):

<img webc:is="eleventy-image" src="possum.png" alt="…" url-path="/some-dir/" output-dir="_site/some-dir/">