Relative image link inside formatted post excerpt with eleventy-img

Question

Relative image link inside formatted post excerpt with eleventy-img

Opened this issue a month ago · 2 comments

egeesin commented a month ago

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 i
npx @11ty/eleventy
Optional: Comment the <img> from content/blog/post-with-local-img/index.md to 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

Answer 1 · 2024-12-12T16:18:05.000Z

Haven’t had the time to go through your full issue yet but I do want to call out the work in #3573 real quick!

Answer 2 · 2024-12-14T09:05:11.000Z

Haven’t had the time to go through your full issue yet but I do want to call out the work in #3573 real quick!

Tried the new passthrough copy mode in v3.0.1-alpha.1: egeesin/local-image-in-post-excerpt-test@f2b5ed6

but got same error as I had before originally.

> eleventy-base-blog@9.0.0 start /Users/ege/webdev/local-image-in-post-excerpt-test
> npx @11ty/eleventy --serve --quiet

[11ty] Copied 3 Wrote 9 files in 1.12 seconds (124.8ms each, v3.0.1-alpha.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
[11ty] File changed: content/blog/post-with-local-img/index.md
[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] Wrote 7 files in 0.11 seconds (v3.0.1-alpha.1)

It should be something to do with image plugin instead as I wasn't using any passthrough copy config anyway as far as I understand.