renderTransforms Filter to run Transforms on arbitrary content (useful for RSS feeds)

[nickcotton]

Hi! Have been using the new Eleventy Transform feature on my personal site with great success but recently noticed that images in my RSS feed were missing. Upon further investigation, it seems like they aren't getting the same treatment as images in the original posts.

I tried adding xml to the extensions option but I guess it doesn't detect img elements within the content of the xml (which totally makes sense). Just wanted to ask if this was supported in some other way I'm not aware of? I couldn't find anything in the docs or other issues.

My feed template is largely copied from the one in the eleventy-plugin-rss docs.

Happy to provide any more info that would be helpful. Thanks!

[sphars]

I'm facing the same issue with the new Transform feature. I've tried to make this work with my RSS feed template as it currently stands, trying varying options, but I don't think there's a way to get the RSS template to generate content based on the final output-ed .html files.

You can reproduce this in my website. I have a post with several images, and they are referenced using relative links in the markdown¹ so they show up in markdown previews in vscode/github. They are transformed correctly using the ImageTransformPlugin (my config) which successfully rewrites the img srcs in the resulting .html². My posts are in ./src/posts/<year>/post.md, my images are placed in ./src/assets/img/content, the transform plugin writes to /assets/img/content. But as you can see in the generated RSS feed³, img srcs are still using the relative links from the original markdown, plus none of the transformations happened (so no longer optimized images).

It makes sense to me why this happens. The feed.njk template will only generate data based what the source files provide (i.e. my collection.posts), and not what will eventually end up in the output .html files resulting from the transform. Even with eleventyImports in my feed.njk to wait for dependencies, as far as I understand, it doesn't matter. I think it may just not be possible with what is available right now in the Transform plugin.

Given that, I'm not sure how to work with this, but here's some possible solutions I've been brainstorming this morning (but haven't really investigated at all):

1. Keep Transform plugin and use a new transform specifically for the feed.xml file to rewrite img tags (which I don't think will be pretty due to encoding of HTML tags in <content>)
2. Keep Transform plugin and add some new shortcode in <content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content> in my feed.njk to check post.templateContent for images and rewrite them (might still have TemplateContentPrematureUseError (see below) if I'm using Image Transform though)
3. Keep Transform plugin but restructure my site src so that images and markdown sources are more coupled, like ./src/posts/my-post/index.md with related images in same directory that can be referenced in markdown with image.jpeg and use Passthrough Copy to get them in the output (RSS feed would still not include the generated responsive images, just the original image, which is not ideal but better than nothing. Also I don't really want to do subdirectories for each post, but that's a personal preference)
4. Remove Transform plugin and go back to using a shortcode to use the base Image plugin for responsive markdown images. Might be able to use inputPathToUrl filter somehow (but this will break my markdown previews)
   • Additionally, look into creating a shortcode to use in my layout's template {{ content | safe }} that checks for images and rewrites it, so that I can keep markdown previews working
5. Remove the plugin and use this markdown-it plugin instead (likely best option for me)
6. See if Re-use Eleventy 2.0 html base plugin for normalizing content to absolute urls eleventy-plugin-rss#38 will help? (I'm not entirely sure what the HTML <base> plugin does so this may be irrelevant)
7. Keep Transform plugin and live without images in my RSS feed, and maybe just use excerpts instead of full content (not ideal but workable)
8. A combination of the above or some other solution I'm not aware of (likely)

I'm open for any feedback or something I missed.

Using:

• @11ty/eleventy@3.0.0-alpha.10
• @11ty/eleventy-img@5.0.0-beta.1
• @11ty/eleventy-plugin-rss@1.2.0

Related: I can no longer use eleventy --serve for live changes due to Tried to use templateContent too early on <markdown file> (via TemplateContentPrematureUseError) error, with a stack trace starting with the RSS plugin. First saw this after adding the plugin. See #3136

Footnotes

1. Markdown source: ↩

2. HTML output: ↩

3. RSS Feed output: ↩

[zachleat]

Moving this to core. The root issue here is that HTML transforms don’t execute on collection item content. HTML transforms (like the Input Path plugin or Image Transform plugin) only process output .html files.

We need a way to programmatically call transforms manually, perhaps via something like a renderTransforms provided filter.

Also adding 11ty/eleventy-plugin-rss#47 related to improvements to the RSS plugin, perhaps we can do this automatically for folks if they use a virtual template for their feed.

[zachleat]

The renderTransforms filter will ship with 3.0.0-alpha.11.

Usage:

{{ post.templateContent | renderTransforms }}

Marginally related follow up issue for errors in Nunjucks filters: #3295

[zachleat]

This feature is included with the new Virtual Template method for RSS/Atom/JSON Feed creation: 11ty/eleventy-plugin-rss#47