Home
Support Forums

I've just implemented the Eleventy Image plug-in (eleventy-img) but I'm also using Large File System (LFS)

The site is https://davidrhoden-basic.netlify.app/, (Also davidrhoden.com.)

The site is based on the Eleventy framework, and I’ve just implemented a plug-in called Image, or eleventy-img, that creates resized, optimized images for the site. However, I’ve also been using Git-LFS. It seems like the plug-in and the LFS service are conflicting when I try to build. (This would be my first build with the plug-in, but so far it hasn’t succeeded.)

Do I need to turn off Git-LFS to make this plug-in work? It seems like the plug-in “thinks” the source images are missing, and I wonder if that’s caused by how Git-LFS stores images.

Any help would be appreciated.
Here’s the important bit of the failing deploy log:

4:23:26 PM: > Having trouble rendering njk (and markdown) template ./timeline/meeko-on-keys-with-my-art-jun-27-2021.md
4:23:26 PM: `TemplateContentRenderError` was thrown
4:23:26 PM: > (./timeline/meeko-on-keys-with-my-art-jun-27-2021.md)
4:23:26 PM:   EleventyShortcodeError: Error with Nunjucks shortcode `myImage`
4:23:26 PM: `Template render error` was thrown
4:23:26 PM: > unsupported file type: undefined (file: /opt/build/repo/static/img/timeline/meeko-on-keys-with-my-art-jun-27-2021.jpg)
4:23:26 PM: `Template render error` was thrown:
4:23:26 PM:     TypeError: unsupported file type: undefined (file: /opt/build/repo/static/img/timeline/meeko-on-keys-with-my-art-jun-27-2021.jpg)
4:23:26 PM:         at lookup (/opt/build/repo/node_modules/image-size/dist/index.js:51:11)
4:23:26 PM:         at imageSize (/opt/build/repo/node_modules/image-size/dist/index.js:118:16)
4:23:26 PM:         at Function.statsSync (/opt/build/repo/node_modules/@11ty/eleventy-img/img.js:427:20)
4:23:26 PM:         at Object.imageShortcode (/opt/build/repo/.eleventy.js:124:20)
4:23:26 PM:         at Object.<anonymous> (/opt/build/repo/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:30:26)
4:23:26 PM:         at ShortcodeFunction.run (/opt/build/repo/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:138:27)
4:23:26 PM:         at Template.root [as rootRenderFunc] (eval at _compile (/opt/build/repo/node_modules/nunjucks/src/environment.js:633:18), <anonymous>:10:67)
4:23:26 PM:         at Template.render (/opt/build/repo/node_modules/nunjucks/src/environment.js:552:10)
4:23:26 PM:         at /opt/build/repo/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:236:14
4:23:26 PM:         at new Promise (<anonymous>)
4:23:26 PM: Copied 1371 files / Wrote 0 files in 4.42 seconds (v0.12.1)
4:23:26 PM: Unhandled rejection in promise ([object Promise]): (more in DEBUG output)
4:23:26 PM: > Input file contains unsupported image format
4:23:26 PM: `Error` was thrown:
4:23:26 PM:     Error: Input file contains unsupported image format 

The image format is just good old .jpeg, and it displays fine on the site now, with Git-LFS.

Hi @davidrhoden,

When you use Netlify Large Media, all the files that you’ve uploaded there are not available for processing during build time. This is why we have Image Transformations feature when using Large Media.

So, if you wish to use the images during build time, you’d have to disable NLM, but then you won’t get server-side image transformations and vice-versa. It’s an either/or case.

Let us know if you wish to disable NLM so we can process it as it cannot be disabled by the user.

@hrishikesh:
Thanks for that information. I decided to not use the eleventy-img plug-in for now, as it seems that Netlify’s image transforms will do what I need done.

(I didn’t realize Netlify LFS really created properly sized thumbnails; I thought it just served the full-size image, styled to be smaller. Thanks for the explanation and getting me to understand what LFS does.)