How Prevent GIF Images from Being Processed by markdownItEleventyImg Plugin?

[joisun]

Hello, Thanks for the awesome plugin.

I am using Eleventy to write a blog and I have configured markdownItEleventyImg (which based on eleventy-img) to handle images in my markdown files. My current configuration looks like this:

const path = require('path');

markdownLib.use(markdownItEleventyImg, 
    {
    imgOptions: {
        widths: [1200],
        urlPath: `/${SITE_PREFIX}/images/`,
        outputDir: "./_site/images/",
        formats: ["jpeg", "gif"],
        sharpOptions: {
            animated: true,
        },
        // sharpJpegOptions:{
        //     quality:100
        // }
    },
    globalAttributes: {
        class: "markdown-image",
        decoding: "async",
        sizes: "100vw"
    },
    resolvePath: (filepath, env) => path.join(path.dirname(env.page.inputPath), filepath)
});

However, I have encountered an issue where all images, including GIFs, are processed and output in the specified formats. My intention is to exclude GIF images from being processed by this plugin, while still processing other image formats like JPEG.

I have attempted to adjust the configuration but haven't been successful in preventing GIFs from being processed.

Could you please provide guidance on how to configure markdownItEleventyImg to skip GIF images during processing (just generate the corret path)?

by the way, If my post have more then one gif asset, only the first one will be animated, which i have no idea too.

Thank you!

[zachleat]

eleventy:ignore is one currently-available option but you’d need to opt-in to each individual image: https://www.11ty.dev/docs/plugins/image/#attribute-overrides

We could add a filter callback option to return true or false and pass in the image input path so you could do the filtering yourself.

[joisun]

eleventy:ignore is one currently-available option but you’d need to opt-in to each individual image: 11ty.dev/docs/plugins/image/#attribute-overrides

We could add a filter callback option to return true or false and pass in the image input path so you could do the filtering yourself.

Thanks for your attention, solved by:

sharpOptions: {
            animated: true,
            limitInputPixels:false
},