eleventy: Use shortcode inside a included block?

I’m using Nunjucks with Front Matter to create a simple page builder.

My page.njk include “blocks” like this:

{% for block in blocks %}
  {% include "blocks" + "/" + block.template + ".njk" %}
{% endfor %}

And my Front Matter for a page with blocks:

---
title: "Page title"
blocks:
- template: image
  image: "/images/laura-davidson-qbah4ildazy-unsplash.jpg"
- template: another-block
...
---

The end gold is to use a shortcode to render an image using eleventy-img. But when I add the image shortcode Nunjucks stops rendering my block. No errors, nothing. It doesn’t matter if I use a hardcoded image like: {% image "assets/images/photo.png", "Alt <3 11ty" %} (that shortcode works fine outside of my block) or if i try to use image data from Front Matter. Other shortcodes work fine.

Are there a limitation in using the image shortcode this way?

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 8
  • Comments: 16 (4 by maintainers)

Most upvoted comments

Hello everyone, I have or had the same problem. I suspect it is because you are trying to make this async and it does not work with an include.

Here is the information on how to make a synchronous call: https://www.11ty.dev/docs/plugins/image/#synchronous-usage

After switching from async to synchronous it works.

asyncEach was the key! I had the {% include %} inside a {% for %}, switching this to a `{% asyncEach %} got it working for me.

Thank you so much @pdehaan

@joepavitt If you can create a simple test case/repo I can take a look. Sometimes it’s a matter of using the undocumented Nunjucks ifAsync tag or using asyncEach instead of a for loop.

Good catch ! Indeed it works if you use the plugin synchronously. I wonder if this a limitation with elevent-img specifically or if all shortcodes work that way ? The doc would benefit from a warning on this, imo.