How can I get the full path to image src for eleventy-img if I use glob collections?

Question

Problem:

I'm using the shortcode in /technical-seo/using-science-philosophy-organize-semantic-web.md {% image "grocery-isle.jpg", "Google Photos – Aisle 5, Faversham Sainsbury’s", "320, 640, 1024", "img-responsive" %}

`TemplateContentRenderError` was thrown
[11ty] > (./technical-seo/using-science-philosophy-organize-semantic-web.md)
  EleventyShortcodeError: Error with Nunjucks shortcode `image`

`Template render error` was thrown
[11ty] > ENOENT: no such file or directory, open '/home/denverpr/repositories/yada-11ty-themesgrocery-isle.jpg'

It's an image folder in each glob collection. I need the collection path to be included. The true path is /home/denverpr/repositories/yada-11ty-themes/technical-seo/images/grocery-isle.jpg

My current structure:

├── technical-seo
    ├── create-jump-to-links-serp.md
    ├── ecommerce-site-structure-for-semantic-search.md
    ├── images
    │   ├── grocery-isle.jpg
    │   ├── optimize-local-seo.jpg
    │   ├── science-semantic-web.png
    │   ├── serp-jump-to-links-1.png
    │   ├── serp-jump-to-links-2.png
    │   ├── serp-jump-to-links-3.png
    │   └── serp-jump-to-links.png
    ├── index.njk
    ├── optimizing-local-search.md
    ├── technical-seo.11data.js
    └── using-science-philosophy-organize-semantic-web.md

My eleventy-img code:

module.exports = function(src, alt, widths, sizes, classattr) {
  // src input same as 'normal' site-relative path for convenience, so add base path:
  src = path.dirname(__dirname) + src;

Answer 1

In the error message, it shows that it's looking for the image at /home/denverpr/repositories/yada-11ty-themesgrocery-isle.jpg but not finding anything, which makes sense given that the image is located at /home/denverpr/repositories/yada-11ty-themes/technical-seo/images/grocery-isle.jpg.

You can also see why that incorrect path is generated. src will be /home/denverpr/repositories/yada-11ty-themes (the dirname thing) + grocery-isle.jpg.

To fix this, you can either update the image shortcode with the full path to the image, or add in the correct path to your image code. The best approach will depend on your specific situation.

Approach 1 - update shortcode (and also fix the generated path):

{% image "technical-seo/images/grocery-isle.jpg", ... %}

module.exports = function(src, alt, widths, sizes, classattr) {
  // src input same as 'normal' site-relative path for convenience, so add base path:
  src = path.dirname(__dirname) + "/" + src;

Approach 2 - fix path in image code:

module.exports = function(src, alt, widths, sizes, classattr) {
  // src input same as 'normal' site-relative path for convenience, so add base path:
  src = path.dirname(__dirname) + "/technical-seo/images/" + src;