eleventy-img and prefers-color-scheme

[klaaspieter]

I have a screenshot that I want to show in light or dark mode; without eleventy-img this is the markup I want to have:

<picture>
  <source srcset="/image-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset=/image-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
  <img alt="screenshot" src="/image-light.png" />
</picture>

Is there a way to generate the prefers-color-scheme options while maintaining the eleventy-img size and format variations?

[btrem]

You should be able to create a shortcode to accomplish that. I've looked at 11ty-image, and it's changed a lot since I first added it to my site. (TODO for me, update my code!) I'm using an older method, an aync shortcode. I've adapted it to light and dark mode.

    eleventyConfig.addShortcode("myImage", async function (src, alt="") {

        // responsive image settings; adjust to your taste
        const formats = ["webp",null];
        const widths = [250,500,1000];
        const sizes = "100w";

        // image slug and extension
        const imageFileSlug = path.basename(src, path.extname(src));
        const imageFileExt = path.extname(src);

        // url path for processed images; adjust to taste
        const imageUrlPath = "/images/";

        // place for processed images
        const imageOutputDir = `./_site/${imageUrlPath}/`;

        // create image files for light mode
        let metadataLight = await Image(`image_src/${imageFileSlug}-light${imageFileExt}`, {
            formats: formats,
            sizes: sizes,
            widths: widths,
            outputDir: imageOutputDir,
            urlPath: imageUrlPath,
        });

        // create image files for dark mode
        let metadataDark = await Image(`image_src/${imageFileSlug}-dark${imageFileExt}`, {
            formats: formats,
            sizes: sizes,
            widths: widths,
            outputDir: imageOutputDir,
            urlPath: imageUrlPath,
        });

        // create source elements for light mode
        let markupLight = `${Object.values(metadataLight)
            .map((imageFormat) => {
                return `<source srcset="${imageFormat
                    .map((entry) => entry.srcset)
                    .join(", ")}" sizes="${sizes}" type="${
                    imageFormat[0].sourceType
                }" media="(prefers-color-scheme: light)">`;
            })
            .join("\n    ")}`
        ;

        // create source elements for dark mode
        let markupDark = `${Object.values(metadataDark)
            .map((imageFormat) => {
                return `<source srcset="${imageFormat
                    .map((entry) => entry.srcset)
                    .join(", ")}" sizes="${sizes}" type="${
                    imageFormat[0].sourceType
                }" media="(prefers-color-scheme: dark)">`;
            })
            .join("\n    ")}`
        ;

        // get file name etc. for default image
        let imgData = metadataLight.png[0];

        // create and return picture markup
        return markup = `<picture>
    ${markupLight}
    ${markupDark}
    <img src="${imgData.url}" alt="${alt}">
</picture>`;

    });

You'll have to adjust directories for your configuration/setup. Assuming your screenshots are in ./image_src inside your 11ty directory, place your screenshots foo-light.png and foo-dark.png in that directory.

Then, in a template, use your shortcode:

Lorem ipsum dolor sit amet.

{% myImage "image_src/foo.png" %}

More lorem ipsum.

It will generate the responsive images with the media query you specified. N.B. the shortcode produces the code that (I think) you want. But I have no experience with prefers-color-scheme media queries.

Demo available in this repo: https://github.com/btrem/11ty_3746