search

11ty / eleventy-img

Utility to perform build-time image transformations.
https://www.11ty.dev/docs/plugins/image/
436 stars 55 forks source link

Add support for <img> loading attribute override <img eleventy:loading="eager" >, now everything is loading globally as 'lazy' or 'eager' when used eleventyImageTransformPlugin #246

Closed slivos closed 1 month ago

slivos commented 1 month ago

.eleventy.js

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    extensions: "html",
    formats: ["jpg", "webp"],
    widths: [928, 715, 616, 668, 488],

    defaultAttributes: {
      loading: "lazy",
      decoding: "async",
      sizes: "auto",
    },
});

Wanted something like this when used in Nunjucks 'macro':

<img src="{{ props.image }}" alt="{{ props.imageAlt }}" eleventy:loading="eager" >

attribute-overrides

zachleat commented 1 month ago

Can you use loading="eager"? It shouldn’t override existing attributes

slivos commented 1 month ago

Okay, that works, thank you. :D