Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Add width/height attributes only #212

Open
zachleat opened this issue Feb 12, 2024 · 4 comments
Open

Feature request: Add width/height attributes only #212

zachleat opened this issue Feb 12, 2024 · 4 comments
Labels
enhancement New feature or request

Comments

@zachleat
Copy link
Member

zachleat commented Feb 12, 2024

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 zachleat added the enhancement New feature or request label Feb 12, 2024
@zachleat
Copy link
Member Author

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

@simevidas
Copy link

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

@nhoizey
Copy link

nhoizey commented Feb 12, 2024

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.

@zachleat
Copy link
Member Author

Related to #133, should probably be implemented together!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants