Upgrade to latest Eleventy Image, support animated gif

This commit is contained in:
Zach Leatherman 2025-01-08 13:17:10 -06:00
parent 940e69d2bf
commit 350c914dbc
2 changed files with 14 additions and 12 deletions

View file

@ -6,7 +6,6 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import pluginFilters from "./_config/filters.js"; import pluginFilters from "./_config/filters.js";
/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function(eleventyConfig) { export default async function(eleventyConfig) {
// Drafts, see also _data/eleventyDataSchema.js // Drafts, see also _data/eleventyDataSchema.js
eleventyConfig.addPreprocessor("drafts", "*", (data, content) => { eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
@ -26,8 +25,8 @@ export default async function(eleventyConfig) {
// Run Eleventy when these files change: // Run Eleventy when these files change:
// https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
// Watch content images for the image pipeline. // Watch images for the image pipeline.
eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}"); eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpg,jpeg,gif}");
// Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle // Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle
// Adds the {% css %} paired shortcode // Adds the {% css %} paired shortcode
@ -74,19 +73,22 @@ export default async function(eleventyConfig) {
// Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform // Image optimization: https://www.11ty.dev/docs/plugins/image/#eleventy-transform
eleventyConfig.addPlugin(eleventyImageTransformPlugin, { eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
// File extensions to process in _site folder
extensions: "html",
// Output formats for each image. // Output formats for each image.
formats: ["avif", "webp", "auto"], formats: ["avif", "webp", "auto"],
// widths: ["auto"], // widths: ["auto"],
defaultAttributes: { htmlOptions: {
// e.g. <img loading decoding> assigned on the HTML tag will override these values. imgAttributes: {
loading: "lazy", // e.g. <img loading decoding> assigned on the HTML tag will override these values.
decoding: "async", loading: "lazy",
} decoding: "async",
}
},
sharpOptions: {
animated: true,
},
}); });
// Filters // Filters

View file

@ -36,7 +36,7 @@
"homepage": "https://github.com/11ty/eleventy-base-blog#readme", "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^3.0.0", "@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-img": "^5.0.0", "@11ty/eleventy-img": "^6.0.0",
"@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-rss": "^2.0.2",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",