Height wrong with animated gifs

[ChefAndy]

Hello! Thanks for making the plugin. I'm neither a javascript nor eleventy guy, and haven't worked in web development in a few years, so I'm sorta shooting from the hip, here. If this isn't a bug and there's something wrong with my approach, or there's a less hacky mitigation, I'd love to hear it. ❤️

Anyway, I'm processing animated gifs and the height is waaaay off:

<img alt="Increase/Decrease Intensity" loading="lazy" decoding="async" src="/img/dWTmiud1Zo-320.gif" width="900" height="**30898**" srcset="/img/dWTmiud1Zo-320.gif 320w, /img/dWTmiud1Zo-600.gif 600w, /img/dWTmiud1Zo-900.gif 900w" sizes="(max-width: 320px) 320w, (max-width: 600px) 600w, (max-width: 900px) 900w, (max-width: 1920px) 1920w, 3840w">

Yikes!

For some reason that surely makes sense to someone who knows more about JS than I do, (or at least made sense to them at some point,) when dealing with paged images, Sharp's height attribute returns the height of all the pages stacked up on top of each other, and you need to use the pageHeight to get the height of the image as-viewed.

From their site:

When loading more than one page/frame of an animated image, these are combined as a vertically-stacked "toilet roll" image where the overall height is the pageHeight multiplied by the number of pages.

My hacky 5 minute workaround involves processing the image twice-- once as a static image to get the actual height, and the other as an animated gif and swapping out the height value. It's totally fine for my use case because it's a small personal porfolio site, but I imagine this could be annoying.

    eleventyConfig.addShortcode("portimage", async function(src, alt) {
        let sizes="(max-width: 320px) 320w, (max-width: 600px) 600w, (max-width: 900px) 900w, (max-width: 1920px) 1920w, 3840w";
        let widths = [3840, 1920, 900, 600, 320]

        let imageAttributes = {
            alt,
            sizes,
            loading: "lazy",
            decoding: "async",
        };

        let realHeight = 0;
        if (src.endsWith("gif")) {
            let static_gif_metadata = await Image(src, {
                widths: widths,
                formats: ["auto"],
                outputDir: "dist/img/",
                urlPath: "/img/",
            });
            realHeight = Image.generateObject(static_gif_metadata, imageAttributes).img.height;
        }

        let metadata = await Image(src, {
            widths: widths,
            formats: ["auto"],
            outputDir: "dist/img/",
            urlPath: "/img/",
            sharpOptions: src.endsWith("gif") ? { animated: true, limitInputPixels: false } : {}
        });

        let output = "<div className='imagecard'>" + Image.generateHTML(metadata, imageAttributes) +
            "\n\n<figcaption>" + alt + "</figcaption>\n\n</div>\n"

        if (src.endsWith('gif')) {
            const height_regex = /height="\d*/;
            output = output.replace(height_regex, 'height="' + realHeight);
        }

        return output;
    });

[zachleat]

Fixed by #182