Description
Operating system
macOS Monterey 12.7.6
Eleventy
3.0.0
Describe the bug
In order to show summary of my posts in post list, I'm using a package called truncate-html as a shortcode. (for keeping the HTML format with proper tag stripping) I'm also using Transform method in eleventy-img. There's no problem when I reference absolute image link but relative image link as it's explained why in the Image plugin docs. eleventy-img gives an error if any relative image link is inside the range to be truncated/excerpted. Also I tried setting urlPath but got same error.
Error Log
❯ npx @11ty/eleventy --serve
[11ty/eleventy-img] Processing ./content/globalimgdir/og-possum.avif (transform)
[11ty/eleventy-img] Processing ./content/blog/post-with-local-img/possum.png (transform)
[11ty] Writing ./_site/feed/feed.xml from ./content/eleventy-plugin-feed-blog-title-atom.njk (virtual)
[11ty] Writing ./_site/sitemap.xml from ./content/sitemap.xml.njk
[11ty] Writing ./_site/tags/index.html from ./content/tags.njk
[11ty] Writing ./_site/about/index.html from ./content/about.md (njk)
[11ty] Writing ./_site/404.html from ./content/404.md (njk)
[11ty] Writing ./_site/blog/post-with-global-img/index.html from ./content/blog/post-with-global-img.md (njk)
[11ty] Writing ./_site/blog/post-with-local-img/index.html from ./content/blog/post-with-local-img/index.md (njk)
[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble writing to "./_site/blog/index.html" from "./content/blog.njk" (via EleventyTemplateError)
[11ty] 2. Transform `@11ty/eleventy/html-transformer` encountered an error when transforming ./content/blog.njk. (via EleventyTransformError)
[11ty] 3. ENOENT: no such file or directory, stat 'content/possum.png'
[11ty]
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat 'content/possum.png'
[11ty] at Object.statSync (node:fs:1676:25)
[11ty] at Image.getInMemoryCacheKey (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/@11ty/eleventy-img/img.js:161:32)
[11ty] at queueImage (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/@11ty/eleventy-img/img.js:827:15)
[11ty] at imageAttributesToPosthtmlNode (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/@11ty/eleventy-img/src/image-attrs-to-posthtml-node.js:64:24)
[11ty] at transformTag (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/@11ty/eleventy-img/src/transform-plugin.js:52:10)
[11ty] at /Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/@11ty/eleventy-img/src/transform-plugin.js:89:25
[11ty] at /Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/posthtml/lib/api.js:91:45
[11ty] at traverse (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/posthtml/lib/api.js:105:26)
[11ty] at traverse (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/posthtml/lib/api.js:111:5)
[11ty] at traverse (/Users/ege/webdev/local-image-in-post-excerpt-test/node_modules/posthtml/lib/api.js:105:17)
[11ty] Copied 3 Wrote 7 files in 0.61 seconds (v3.0.0)
In the relative link section from the doc:
Note that if the same source image is used in multiple templates, it will be written to two different locations!
Normally, I feed my truncation shortcode with templateContent which has relative links before the transformation. I thought if there's a way to get a version of templateContent that has all transformation changes written so I can truncate the result of the eleventy-img transform. Would it be somehow ignorable by eleventy-img afterwards?
Truncate/Excerpt Shortcode
// ... npm i -D truncate-html
import truncate from "truncate-html";
// ...
export default async function(eleventyConfig) {
// ...
eleventyConfig.addShortcode("truncateHTML", (doc) => {
if (!doc.hasOwnProperty('templateContent')) {
console.warn('Document has no property `templateContent`, skipping…');
return;
}
const html = doc.templateContent,
options = {
byWords: true,
ellipsis: "…",
reserveLastWord: true,
}
return truncate(html, 40, options);
});
// ...
}postlist.njk
<ol reversed class="postlist">
{%- for post in postslist | reverse %}
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
{%- truncateHTML post -%} <a href='{{ post.url }}' title='Read more…'>⇢</a>
</li>
{%- endfor %}
</ol>Image Plugin Config
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
extensions: "html",
formats: ["webp", "auto"],
// urlPath: "/urlpath/",
// outputDir: "./_site/urlpath/",
defaultAttributes: {
loading: "lazy",
decoding: "async",
}
});Directory Structure with Relevant Files/Folders
...
content
│ blog
│ │ post-with-local-img
│ │ │ index.md
│ │ └ possum.png
│ │ blog.11tydata.js
│ └ post-with-global-img.md
└ globalimgdir
└ og-possum.avif
...
Reproduction steps
git clone https://github.com/egeesin/local-image-in-post-excerpt-test local-image-in-post-excerpt-test/npm inpx @11ty/eleventy- Optional: Comment the
<img>fromcontent/blog/post-with-local-img/index.mdto see the build.
Expected behavior
I want relative link to work in both post itself and the excerpt. I want eleventy-img to transform my links in a way that it's only relative to my post directory but to the directory of pages/templates where excerpt have been used.
Reproduction URL
https://github.com/egeesin/local-image-in-post-excerpt-test
Screenshots
No response
Activity