search

11ty / eleventy-img

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

Feature request: Add width/height attributes only #212

Open zachleat opened 4 months ago

zachleat commented 4 months ago

I needed a plugin that adds width/height attributes to the elements in my Markdown blog posts. Nothing else, no optimization or anything.

https://mastodon.social/@simevidas/111918982599300045

The transform plugin is close to this if you use formats: ["auto"], e.g.:

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
        extensions: "html",
        formats: ["auto"],
    });
};

Would be a good opt-in enhancement to the transform plugin to bypass sharp processing altogether.

zachleat commented 4 months ago

Also a shout out to this plugin linked up in the replies by @nhoizey https://github.com/boyum/markdown-it-image-size

simevidas commented 4 months ago

Looks like eleventyImageTransformPlugin requires Eleventy 3 which is still in alpha. I’ll test this code once version 3 is in beta.

nhoizey commented 4 months ago

Thinking out loud…

The advantage of the markdown-it plugin is that it will get the image dimensions once (I guess) even if the content with this image is shown in 5 HTML pages.

A transform based on HTML will probably get the image dimensions 5 times instead of 1, but there could be a cache of image dimensions based on the image file path.

What if there is a crop of the image in some of the HTML pages, based on responsive needs (I'm not sure eleventy-img allows that 🤔), so the resulting images have different dimensions in the different HTML pages? The markdown-it plugin doesn't seem to be the right solution here.