renderTemplate not rendering liquid inside variable #3152

imalb-prs · 2024-01-07T18:42:34Z

imalb-prs
Jan 7, 2024

I'm having trouble trying to get the renderTemplate plugin to render my liquid template when the template content is in a string variable. It renders the markdown fine inside the string and renders the liquid when it's directly "hard coded" between the {% renderTemplate "liquid,md" %}...{% endrenderTemplate %}, but not when it's in the string variable. Example below:

file: testrender.md

---
layout: blank
permalink: "/testrender/"
myData:
  key: '{% assign t123 = "testing 123" %}***This is the assigned var t123: {{ t123 }}***'
---
{% renderTemplate "liquid,md", myData %}
{{ key }}

{% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***

{% endrenderTemplate %}

The output (in the browser) looks like:

The HTML output is:

<body>
<p>{% assign t123 = "testing 123" %}<em><strong>This is the assigned var t123: {{ t123 }}</strong></em></p>
<p><em><strong>This is the assigned var t345: testing 345</strong></em></p>
</body>

I know I'm probably missing something simple. Any help greatly appreciated.

Answered by pdehaan

Jan 7, 2024

As far as I know, Liquid/Eleventy won't recursively process the strings, so key won't be re-parsed to turn the front matter string into a parsed thing.

You can probably get around that using a custom filter which will parse the template though:

// eleventy.config.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");
const { Liquid } = require("liquidjs");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyRenderPlugin);

  eleventyConfig.addFilter("liquidify", function (input, ctx = {}) {
    const engine = new

View full answer

pdehaan · 2024-01-07T20:04:58Z

pdehaan
Jan 7, 2024
Collaborator

As far as I know, Liquid/Eleventy won't recursively process the strings, so key won't be re-parsed to turn the front matter string into a parsed thing.

You can probably get around that using a custom filter which will parse the template though:

// eleventy.config.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");
const { Liquid } = require("liquidjs");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyRenderPlugin);

  eleventyConfig.addFilter("liquidify", function (input, ctx = {}) {
    const engine = new Liquid();
    const tpl = engine.parse(input);
    return engine.render(tpl, ctx);
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

---
# src/testrender.md
# layout: blank
permalink: "/testrender/"
myData:
  key: '{% assign t123 = "testing 123" %}***This is the assigned var t123: {{ t123 }}***'
---
{% renderTemplate "liquid,md", myData %}
{{ key | liquidify }}

{% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***

{% endrenderTemplate %}

OUTPUT

<p><em><strong>This is the assigned var t123: testing 123</strong></em></p>
<p><em><strong>This is the assigned var t345: testing 345</strong></em></p>

4 replies

imalb-prs Jan 7, 2024
Author

Thanks for your reply. That certainly does the trick and solves the example problem. I'm going to have to dig a little further into this. Eventually I would like to be able to use already defined 11ty filters and shortcodes in my template strings.

pdehaan Jan 7, 2024
Collaborator

If it's possible to use external files for the templates, I'd definitely towards using renderFile instead of renderTemplate.
If not, this seemed to work and still let me use the built-in slug filter, although would need a lot more testing:

---
# layout: blank
permalink: "/testrender/"
myData:
  key: '{% assign t123 = "TeStiNg 123 PeTeR" | slug %}***This is the assigned var t123: {{ t123 }}***'
---

{{ myData.key | templatify }}

{% renderTemplate "liquid,md", myData %}
  {{ key | templatify }}
  {% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***
{% endrenderTemplate %}

Where my horrifically named templatify filter just wraps the renderTemplate tag. You might be able to use a custom shortcode or something instead which accepts string input instead of paired shortcodes to avoid the need to double render:

  eleventyConfig.addFilter("templatify", function (input, lang="liquid", ctx = {}) {
    const render = eleventyConfig.getFilter("renderTemplate");
    return render(input, lang, ctx);
  });

Important

Reminder that LiquidJS has an existing render tag, which replaced ye olde include which could make custom shortcode naming confusing between Liquid's render and 11ty's renderTemplate/renderFile shortcodes/filters.

pdehaan Jan 7, 2024
Collaborator

  eleventyConfig.addAsyncShortcode("renderString", function (input, lang="liquid", ctx) {
    const render = eleventyConfig.getFilter("renderTemplate");
    return render(input, lang, ctx);
  });

---
# layout: blank
permalink: "/testrender/"
myData:
  key: '{% assign t123 = "TeStiNg 123 PeTeR" | slug %}***This is the assigned var t123: {{ t123 }}***'
---

{% renderString myData.key %}

{% renderTemplate "liquid,md", myData %}
  {% renderString key %}
  {% assign t345 = "testing 345" %}***This is the assigned var t345: {{ t345 }}***
{% endrenderTemplate %}

OUTPUT

<p><em><strong>This is the assigned var t123: testing-123-peter</strong></em></p>
<p><em><strong>This is the assigned var t123: testing-123-peter</strong></em>
<em><strong>This is the assigned var t345: testing 345</strong></em></p>

imalb-prs Jan 8, 2024
Author

Thanks for this! The async shortcode does the trick. I'm actually pulling the markdown with template code in from an external source (github issues) using eleventy-fetch. I wanted to be able to use any and all available filters and shortcodes including ones using plugins like eleventy-img.

Updated testrender.md

---
layout: blank
permalink: "/testrender/"
myData:
  liquid_md: '{% assign str = "TeStInG" %}{% assign dec = 122.52 %}***{{ str | slug }} {{ dec | ceil }}***'
  liquid_image: '{% image "https://camo.githubusercontent.com/21ffc95b9ae8cf1c16806bcbcd73bf699e4c015b5b60fa8bbfc33fc099814d7e/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667", "11ty logo", "100px" %}'
---
{% renderString myData.liquid_md %}

<style type="text/css">
  img {
    max-width: 100px;
    height: auto;
  }
</style> 
{% renderString myData.liquid_image %}

OUTPUT:

<p><em><strong>testing 123</strong></em></p>
<style type="text/css">
  img {
    max-width: 100px;
    height: auto;
  }
</style> 
<p><picture><source type="image/webp" srcset="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.webp 200w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-300w.webp 300w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-600w.webp 600w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-800w.webp 800w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-1200w.webp 1200w" sizes="100px"><source type="image/jpeg" srcset="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.jpeg 200w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-300w.jpeg 300w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-600w.jpeg 600w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-800w.jpeg 800w, /img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-1200w.jpeg 1200w" sizes="100px"><img alt="11ty logo" loading="lazy" decoding="async" src="/img/68747470733a2f2f7777772e313174792e6465762f696d672f6c6f676f2d6769746875622e737667-200w.jpeg" width="1200" height="1200"></picture></p>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

renderTemplate not rendering liquid inside variable #3152

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

renderTemplate not rendering liquid inside variable #3152

imalb-prs Jan 7, 2024

Replies: 1 comment · 4 replies

pdehaan Jan 7, 2024 Collaborator

OUTPUT

imalb-prs Jan 7, 2024 Author

pdehaan Jan 7, 2024 Collaborator

pdehaan Jan 7, 2024 Collaborator

OUTPUT

imalb-prs Jan 8, 2024 Author

imalb-prs
Jan 7, 2024

Replies: 1 comment 4 replies

pdehaan
Jan 7, 2024
Collaborator

imalb-prs Jan 7, 2024
Author

pdehaan Jan 7, 2024
Collaborator

pdehaan Jan 7, 2024
Collaborator

imalb-prs Jan 8, 2024
Author