[Enhancement] Add eleventy-img to template

[debatz]

Hello,

Thank you very much for your starter template!

I am an 11ty noob -- and frankly, all-around noob -- and haven't been able to make "eleventy-img" work with this starter.

Also, I understand that images should go into the src/static folder, and can't see any hardcoded reason why I wouldn't be able to use src/static/img, am I right?

Thank you for your time.

Cheers.

[chrissy-dev]

Hey 👋🏼,

As much as I love the eleventy-img plugin I don't think it's right to include it as standard. I don't want to add unnecessary bloat to the project. That being said, the plugin works as expected, and very well. I'll talk you through it.

1. Install the plugin: npm i @11ty/eleventy-img.

2. Add the plugin to your .eleventy.js config.

const filters = require('./utils/filters.js')
const transforms = require('./utils/transforms.js')
const collections = require('./utils/collections.js')
const Image = require("@11ty/eleventy-img")

module.exports = function (eleventyConfig) {
    // Folders to copy to build dir (See. 1.1)
    eleventyConfig.addPassthroughCopy("src/static");

    // Filters 
    Object.keys(filters).forEach((filterName) => {
        eleventyConfig.addFilter(filterName, filters[filterName])
    })

    // Transforms
    Object.keys(transforms).forEach((transformName) => {
        eleventyConfig.addTransform(transformName, transforms[transformName])
    })

    // Collections
    Object.keys(collections).forEach((collectionName) => {
        eleventyConfig.addCollection(collectionName, collections[collectionName])
    })

    // Start: eleventy-img config
    eleventyConfig.addNunjucksAsyncShortcode("myImage", async function (src, alt, outputFormat = "jpeg") {
        if (alt === undefined) {
            // You bet we throw an error on missing alt (alt="" works okay)
            throw new Error(`Missing \`alt\` on myImage from: ${src}`);
        }

        // returns Promise
        let stats = await Image(src, {
            widths: [100, 760, 1024],
            formats: [outputFormat],
            urlPath: "/static/",
            outputDir: "./dist/static/",
        });

        let props = stats[outputFormat].pop();

        return `<img src="${props.url}" width="${props.width}" height="${props.height}" alt="${alt}">`;
    });
    // End: eleventy-img config

    // This allows Eleventy to watch for file changes during local development.
    eleventyConfig.setUseGitIgnore(false);

    return {
        dir: {
            input: "src/",
            output: "dist",
            includes: "_includes",
            layouts: "_layouts"
        },
        templateFormats: ["html", "md", "njk"],
        htmlTemplateEngine: "njk",

        // 1.1 Enable eleventy to pass dirs specified above
        passthroughFileCopy: true
    };
};

3. You can then use it in your project:

{% myImage "./src/static/[YOUR_IMAGE_FILE].jpg", "This is alt text" %}

Don't call yourself a noob, by even playing around with 11ty you know a lot more than you're giving yourself credit for.

Hope this helps 😄👍

[debatz]

Thanks a bunch!

I followed the steps in my installation and it wouldn't work.

Cloned again, did the steps, it works!

I'll do the programmer thing and forget I couldn't make it work myself haha! Thanks a lot!

I'm moving an ecommerce over to 11ty+Snipcart so getting this module working was pretty important. I'll make a repo for ecommerce if and when I make it work! Thank you again!