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)
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 usingasyncEach
instead of afor
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.