Eleventy: Using Cloudinary for responsive images

[nhoizey]

It would be great to be able to use Cloudinary for responsive images.

For content images inside Markdown (or other formats), it could use presets and a Liquid syntax as in the Jekyll-Cloudinary plugin.

It would be even better if it could use native Markdown syntax and some "filters" in templates.

I already use Cloudinary, so I can help define the features, maybe even provide some code… ;-)

[eeeps]

I, for one, (am completely biased but) think this is a great idea! And would of course love to help make it a reality.

I had some simmilar thoughts when seeing this: https://twitter.com/zachleat/status/943502658295476225 ...

@zachleat how exactly do you envision static asset handling things “layering on top?”

[zachleat]

I think this is going to be closely tied to what gets formulated for #13.

[Wilto]

[zachleat]

This repository is now using lodash style issue management for enhancements (see https://twitter.com/samselikoff/status/991395669016436736)

This means enhancement issues will now be closed instead of leaving them open. The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

[eeeps]

Now that we have shortcodes - here's a (very basic) start: https://github.com/eeeps/eleventy-respimg

[nhoizey]

I've made huge progress towards my aim to use standard Markdown syntax for images and yet generate responsive images. I'm using Eleventy transforms for that, enhancing the standard images HTML <img src="…"> to <img src="…" srcset="…" sizes="…"> and even embedding it in a <figure> if/when it makes sense.

I'll try to release it soon as a plugin that would support Cloudinary at first (I'm using it), but potentially other image CDNs, or even home made solutions.

Sorry for the teasing, but I wanted to let you know it will come soon, at last. 😁

[nhoizey]

Teasing is over, here's my plugin for simple responsive images in Eleventy:
https://github.com/nhoizey/eleventy-plugin-images-responsiver/

eleventy-plugin-images-responsiver is "just" a thin layer between Eleventy plugin and transformations system and images-responsiver, a generic HTML transformation Node.js module for simple responsive images.

Eleventy uses Markdown-it to transform Markdown into HTML, and then runs the transform added by eleventy-plugin-images-responsiver, which calls images-responsiver to actually transform the HTML.

Neither eleventy-plugin-images-responsiver nor images-responsiver transform (resize) the image files, there are multiple ways to do so: https://nhoizey.github.io/images-responsiver/tutorial-05-images-urls.html