search

nhoizey / eleventy-plugin-images-responsiver

Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.
https://nhoizey.github.io/eleventy-plugin-images-responsiver/
MIT License
8 stars 1 forks source link

Netlify CMS one click responsive images. #3

Open headapples opened 4 years ago

headapples commented 4 years ago

Thanks again for replying to my question about 11ty/Netlify CMS and responsive image markup and for suggesting this plugin.

I've looked through the repo as well as through the Pack11ty repo and it's great work.

I still for the life of me can't work out how to integrate it into Netlify CMS though, so that a non technical editor can select an image from the UI (using a widget) and have the responsive markup automatically generated.

The sticking point seems to be not having a fixed number of images tags or shortcodes or anything else in the content templates. Instead, I want the html to be generated from scratch based on the chosen images.

Do you really think this plugin solves this use case?

nhoizey commented 4 years ago

@headapples I have to try Netlify CMS to understand how it manages images.

I'm already using this plugin with Forestry, another Git based CMS.

headapples commented 4 years ago

Thanks again for taking the time to think about this.

I was a bit stuck with how Netlify CMS handles images myself. It seems to just create the markdown for an image in some cases as well as allowing something like 11ty to access the filename as data.

But how to go from that image in the markdown to responsive html output for each image/filename for every page?

You might have seen from my original issue in the other repo that I have considered almost every conceivable angle, and one of the Netlify Dev's kindly replied that they thought a custom react component was the best solution (so not too different from how you created your plugin?).

It also occurred to me recently that I only have to get access to each image filename on a page and put the same filename into the responsive markup (as long as the different srcset and sizes are known already), as the browser will take care of the rest.