Process for referencing local images before remote deployment?

[michaelroper]

Hey Eric!

I'm fairly new to Cloudinary and Eleventy, so I'm just trying to get my head around the best process for this stuff. If I'm developing my site locally, and I add a new image to my images folder, that obviously not yet anywhere publicly remote that Cloudinary can fetch or upload from, so until I deploy the site, those image references will be broken, right? Is there any way to get around that at this point?

I noticed you have "allow relative src paths" on the to-do list - will that allow something like referencing local images in a DEV env, and then using the cloudinary URLs when building for a remote/PROD env?

[eeeps]

Nice suggestion! And maybe! I know @nhoizey added this functionality to jekyll-cloudinary – I'll look at how he did it... nhoizey/jekyll-cloudinary@f700819

[chriscoyier]

This was my workaround:
https://github.com/chriscoyier/coding-fonts/blob/master/src/_includes/font-page.njk#L58

That data gets set here:
https://github.com/chriscoyier/coding-fonts/blob/master/src/_data/images.js

Which is based on an environment variable PROD. So on Netlify I set the build process to be PROD="true" eleventy (and then just set nothing on development)

[nhoizey]

@eeeps as you mentioned jekyll-cloudinary, I take the (very late, triggered by @chriscoyier comment ) opportunity to mention that my newer responsive images plugin is for Eleventy, applied as a transform that you can run only for production build.

Here's how I do it for my own personal site:
https://github.com/nhoizey/nicolas-hoizey.com/blob/master/.eleventy.js#L200-L207

I include and run the plugin only for production build because I'm fine with unoptimized local images during development (and faster build), but I could also run it in development mode with different options, including the target resizedImageUrl.

[andrew-ireland]

Was there every a resolution on best practice for handling this with eleventy-respimg, short of uploading all images to a public domain? Chris Coyier's solution is clever, but I'd rather do something along these lines without ditching the eleventy-respimg shortcode/functionality entirely.