eleventy-img shortcode not working in a loop in a nested include

[robweychert]

Me again with another weird one! I’m using Eleventy 3.1.1 and Nunjucks.

My problem involves three items:

• A shortcode called image, which uses eleventy-img to generate image transformations and custom <img> markup
• An include called postcard, which generates summary markup of a given post object
• An include called cardGroup, which generates list markup of postcards from an array of post objects

image works as expected.

postcard works as expected, including when it uses image.

cardGroup also works as expected, except when any of the postcards in its array uses image. When that happens, cardGroup generates absolutely nothing, not even the postcards that don’t use image, and the build otherwise compiles without throwing an error.

The problem seems to happen somewhere in cardGroup’s {% for post in postList %} loop, because if I hard-code instances of postcard inside cardGroup, it does what it’s supposed to.

Any ideas?

[zachleat]

Is this an async thing? (the image optimization stuff is async by default) If you’re trying to iterate over asynchronous stuff, you need asyncEach in Nunjucks: https://mozilla.github.io/nunjucks/templating.html#asynceach

[robweychert]

That seems to have done it! Async stuff always trips me up, and I didn’t know about asyncEach. Thanks Zach!

[zachleat]

Happy to help!