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;

person_v1.32 · Accepted Answer · 2022-04-16 18:15:44Z

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;

answered Apr 16, 2022 at 18:15

person_v1.32

3,2351 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denver Prophit Jr. Over a year ago

I’ve been trying to figure out a way to declare the file path as 11ydata in each directory but I don’t know how to make that very able to discover by the image that JS file and read the folders Json file or JavaScript

person_v1.32 Over a year ago

@DenverProphitJr. You might be able to automatically discover the path directory using page data values, possibly with this.page.inputPath.

Collectives™ on Stack Overflow

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

Problem:

My current structure:

My `eleventy-img` code:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem:

My current structure:

My eleventy-img code:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

My `eleventy-img` code: