Allow use of relative paths in WebC

[Scott Vandehey]

In the eleventy-base-blog package, there's a clever relativeToInputPath function that I've updated to allow me to pass only the image filename to the universal shortcode:

// Given a relative image file page, return the full path
imgPath: (relativeFilePath) => {
  const imageAssetsPath = path.join('src', '_assets', '_images');
  return path.resolve(imageAssetsPath, relativeFilePath);
},

Then in my markdown files, I can just do this to load an image in src/_assets/_images/feature/example.jpg:

{% image "feature/example.jpg" "Featured Image" %}

Recently, I tried to update my blog to use webc as the markdown templating language, but I ran into problems when I updated the image syntax to webc:

<img webc:is="eleventy-image" src="feature/example.jpg" alt="Featured Image">

This fails because it can't find the image. But I don't see how I can do something similar to what the blog does to update the relative image path. Is there something I can do to avoid having to put the full image path when using webc?

[Scott Vandehey]

Oh, I missed something! I forgot that any filters you register are available in your webc files, so I was able to make imgPath into a filter and then this works:

<img webc:is="eleventy-image" :src="imgPath('feature/example.jpg')" alt="Featured Image">