"unknown block tag: Image"

[Teufeuleu]

Hi, First, thanks for this plugin, I was looking exactly for such a tool this morning and felt very lucky when I saw that you released this four days ago.

So I tried a very simple thing on the website I'm working on. I added to my .eleventy.js

const { Image } = require("@campj/eleventy-image");
  module.exports = function(config) {
    config.addNunjucksAsyncShortcode("Image", Image);
  };

and to my src/_includes/base.njk:

{% Image
    src = "/img/SEA_00.jpg",
    pathPrefix= "src/projects/project1",
    maxWidths = [200, 500, 768, 1024, 1368]
  %}

The image I want to process being src/projects/project1/img/SEA_00.jpg.

And I get this error:

Error writing templates: (more in DEBUG output)
> Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
> (src/_includes/base.njk) [Line 98, Column 6]
  unknown block tag: Image

`Template render error` was thrown:
    Template render error: (src/_includes/base.njk) [Line 98, Column 6]
      unknown block tag: Image

If I remove the code added above, everything runs as expected. I've to say I'm very new to Node and Eleventy, so there are certainly some basics concepts I missed.

[Teufeuleu]

Okay I did some improvements, but I'm still facing an issue. First, there are a few confusing information in your documentation. You forgot to update the installation command-line, from npm install --save-dev @campj/image to npm install --save-dev @campj/eleventy-image

Then I noticed that you don't use the same config variable name as 11ty's default which is eleventyConfig instead of config. It might seem trivial to you but it can be very confusing for some beginners like me. I work with a few other plugins and they all use the default eleventyConfig in their documentation which is a bit more convenient to use I guess.

Now the plugin runs, but it seems like the pathPrefix prop is ignored:

eleventy-image:: path prefix is
cache dir is D:\_WEB\_TFLCL_Theme/.cache
Error writing templates: (more in DEBUG output)
> Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
> (src/_includes/base.njk)
  EleventyShortcodeError: Error with Nunjucks shortcode `Image`

`Template render error` was thrown
> ENOENT: no such file or directory, open 'D:\_WEB\_TFLCL_Theme\src\site\img\SEA_00.jpg'

Showing path prefix as empty while I have pathPrefix= "src/projects/project1" in my shortcode in he .njk file.

I tried to place the image in the targeted directory (in this case src\site\img\SEA_00.jpg) and got another issue:

Error writing templates: (more in DEBUG output)
> Having trouble writing template: dist/index.html

`TemplateWriterWriteError` was thrown
> (src/_includes/base.njk)
  EleventyShortcodeError: Error with Nunjucks shortcode `Image`

`Template render error` was thrown
> Cannot set property 'w' of undefined

`Template render error` was thrown:
    TypeError: Cannot set property 'w' of undefined
        at D:\_WEB\_TFLCL_Theme\node_modules\@campj\eleventy-image\pipeline.js:227:49
        at Array.forEach (<anonymous>)
        at makeThumbnails (D:\_WEB\_TFLCL_Theme\node_modules\@campj\eleventy-image\pipeline.js:227:15)
        at module.exports (D:\_WEB\_TFLCL_Theme\node_modules\@campj\eleventy-image\shortcode.js:78:11)
        at runMicrotasks (<anonymous>)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)

Sorry for not being able to push commits (especially for the documentation part), I still need to learn how git and github work.

[campj-dev]

@Teufeuleu apologies for the delayed response. I've updated the docs & published a new version. I think it should resolve your issues. I'll have some time to put into this tomorrow morning, so I will check back then.

[Teufeuleu]

No worries for the delay! And thanks for your fast answer. Actually I don't even know how to set environment variables so I'm kinda stuck now. I tried to add process.env['ELEVENTY_IMAGE_SRC_PREFIX'] = "/projects/project1/img"; just before the declaration of const { Image } in .eleventy.js but I still get eleventy-image:: path prefix is with nothing else.

I think I preferred the way you were about to implement path handling first, as I would like to have multiple image folders in the website I'm working on. Its struture is like this:

|   index.md
|           
+---pages
|   |   pages.11tydata.json
|   |   
|   +---page1
|   |       page1.md
|   |       
|   \---page2
|           page2.md
|           
+---projects
|   |   projects.11tydata.json
|   |   
|   +---project1
|   |   |   project1.md
|   |   |   
|   |   \---img
|   |           SEA_00.jpg
|   |           
|   +---project2
|   |   |   project2.md
|   |   |   
|   |   \---img
|   +---project3
|   |   |   project3.md
|   |   |   
|   |   \---img
|   \---project4
|           project4.md
|           
+---scss
|       main.scss
+---_data
|       metadata.json
|       
\---_includes
        base.njk
        page.njk
        project.njk

And I was expeting to pass to the image pipeline the path of each img folder in the projects directory (for example using directory data files or something like fast-globe) and output processed images with the same pattern (src/projects/project1/img/photo.jpg resulting in dest/projects/project1/photo_sd.jpg and so on). I guess I still have a lot to learn, and maybe your tool is not suitable for my use yet. Anyway, thanks for your support!

[campj-dev]

Yes, it's definitely been designed to only work if all images are in the same source folder folder. The ELEVENTY_IMAGE_SRC_PREFIX variable only changes where that source folder is.

The plugin currently assumes: 1) all images are in the same source folder folder. 2) they are output to the build directory in the subdirectory you path to from your templates: Example

{% Image src="/img/someImage.jpg" %}

would assume that all your image, someImage.jpg is in the folder {ELEVENTY_IMAGE_SRC_PREFIX}/someImage.jpg

and is output to dist/img

You can set environment variables in package.json when scripts are run, or via a .env file if you like.

Apologies for it being so opinionated, it's definitely built for a specific way of using Eleventy at the moment.

[Teufeuleu]

Thanks for these explanations. I slowly realize that the way I planned to manage images was not the most simple one unless using some tools like Gulp which is out of my scope right now. Maybe I'll try to handle image resizing through a content manager like Strapi. But first I'll focus on 11ty, rethink my file's organization and try to get your plugin working.