search

eeeps / eleventy-respimg

A responsive-image Eleventy shortcode, powered by Cloudinary
MIT License
46 stars 5 forks source link

Process for referencing local images before remote deployment? #3

Open michaelroper opened 6 years ago

michaelroper commented 6 years ago

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 commented 6 years ago

Nice suggestion! And maybe! I know @nhoizey added this functionality to jekyll-cloudinary – I'll look at how he did it... https://github.com/nhoizey/jekyll-cloudinary/commit/f700819b4bcbfa585c0589b8372ca078934f50c3

chriscoyier commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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.