Using Shortcode to generate HTML without original file in directory

[dmaslan]

First of all, thank you for the beautiful plugin! It saves me a lot of pain optimizing images. I am building a site with eleventy using Nunjucks as my main templating language and deploying to Netlify via a github repo. I use this plugin to optimize my images and put them into my templates using a Nunjucks shortcode. My site includes a headless e-commerce store powered by Shopify that pulls data from the Shopify API and therefore triggers a rebuild everytime the shopify store is updated. I have a lot of images and would like to avoid running this plugin remotely on netlify because it takes up a fair amount of build minutes when I have to re-optimize all my images every time a rebuild is triggered. However, I would still like to run the plugin remotely only on the images that are being pulled from the Shopify API, which is not very many and should be fast. In addition, my internet connection is very slow and therefore I would like to avoid pushing the original image files to github/netlify if possible, since they are large files and will never be served to the final user anyway.

I realize this is related to this issue, but my question is slightly different. I thought I had solved the issue by adding my original image files to my .gitignore file and only optimizing them during local builds when my process.env.ELEVENTY_ENV is set to "development," otherwise simply generating the html markup using statsSync. This is the code I used:

async function imageShortcode(
  src,
  sizes,
  trans,
  alt = "",
  widths = [300, 600],
  cls
) {
  let form;
  if (trans) {
    form = ["webp", "png"];
  } else {
    form = ["webp", "jpg"];
  }
  let options = {
    widths: widths,
    formats: form,
  };

  // generate images, while this is async we don’t wait
  if (process.env.ELEVENTY_ENV === "development") {
    Image(src, options);
  }

  let imageAttributes = {
    alt,
    sizes,
    decoding: "async",
    ...(cls && { class: cls }),
  };

  // get metadata even the images are not fully generated
  metadata = Image.statsSync(src, options);
  return Image.generateHTML(metadata, imageAttributes);
}

However, this doesn't work when I try to run the function on netlify. It returns an error because the original image files are not in my github repo, and it needs them apparently to generate the html. So, the two approaches I can think of are either to pre-optimize the images into smaller files and include those in the github repo or to write my own custom function that generates the markup using the original image filename but does not require the image. However, both of these options seem a bit roundabout and since I'm a bit new to eleventy and Netlify, I'm not sure what's advisable. I feel like there should be a way to take advantage of the Nunjucks shortcode and optimizing remote images using this plugin while optimizing local images only during local builds. Is there another approach that I'm not thinking of?

[freshyill]

I think I'm seeing something similar.

This is what I get

EleventyShortcodeError: Error with Nunjucks shortcode `image`

`Template render error` was thrown
> ENOENT: no such file or directory, open '/Users/chris/Sites/myrepo/https:/url-of-some.remote/image.jpg'

Eleventy is treating the image as if it's local and also mangling the URL. Note the https:/with only one slash.

[zachleat]

I put together a demo repo of how to do this using Netlify build plugins, have a look:

https://github.com/11ty/demo-eleventy-img-netlify-cache

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and we will reopen the issue. Thanks!

[zachleat]

For @freshyill you may want to have a look at now-merged #138