Eleventy Image shortcode inside for.. not working

[gasatrya]

Here are my codes.

shortcode.js

productImage: async (src, alt) => {
  const metadata = await Image(src, {
    widths: [null],
    formats: ['webp'],
    outputDir: './dist/img/',
  })

  let imageAttributes = {
    alt,
    loading: 'lazy',
    decoding: 'async',
  }

  return Image.generateHTML(metadata, imageAttributes)
},

index.njk

{% for item in home.acf.home_builders %}
    {% ifAsync item.acf_fc_layout == 'hero' %}
        {% include "index/hero.njk" %}
    {% elif item.acf_fc_layout == 'products' %}
        {% include "index/products.njk" %}
    {% endif %}
{% endfor %}

index/products.njk

<div>
    <div>
        <h1 class="text-gradient mb-6">{{ item.title }}</h1>
        <p class="text-2xl mb-6">{{ item.description }}</p>
    </div>
    <div>
        {% for product in item.products %}
            {% productImage product, "ALT TEXT" %}
        {% endfor %}
    </div>
</div>

If you see the code home.acf.home_builders, so, the source of this is from WordPress API. The code is inside _data/home.js. There are no errors in command line, but I see no output. Then I tested to bring the code from products.njk and move it to index.njk, it is working properly. Is this bug with the nunjucks include ?

Final Code

{% for item in home.acf.home_builders %}
    {# {{ item | dump }} #}

    {% ifAsync item.acf_fc_layout == 'hero' %}
        <div style="--bg-hero: url('{% bgImage item.background_image %}')" class="bg-[image:var(--bg-hero)] bg-no-repeat bg-contain bg-right-bottom">
            <div class="flex items-center justify-between max-w-6xl mx-auto">
                <div class="basis-2/5">
                    <h1 class="text-gradient mb-6">{{ item.title }}</h1>
                    <p class="text-2xl mb-6">{{ item.description }}</p>
                    <a class="btn" href="#contact">Level Up Today</a>
                </div>
                <div class="basis-3/5">
                    {% set img = item.image %}
                    {% heroImage img, "Wallet codes B2B", 849 %}
                </div>
            </div>
        </div>
    {% elif item.acf_fc_layout == 'products' %}
        <div>
            <div>
                <h1 class="text-gradient mb-6">{{ item.title }}</h1>
                <p class="text-2xl mb-6">{{ item.description }}</p>
            </div>
            <div>
                {% for product in item.products %}
                    {% productImage product, "Wallet Codes Product" %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endfor %}

[pdehaan]

Since your Nunjucks shortcode is async, I think you need to use https://mozilla.github.io/nunjucks/templating.html#asynceach instead of vanilla {% for %} loop.

[gasatrya]

I did try that and still no output. I will try again later.

[gasatrya]

@pdehaan it seems there is a bug with include keyword in nunjucks?

My test code.

{% asyncEach item in home.acf.home_builders %}
    {# {{ item | dump }} #}

    {% ifAsync item.acf_fc_layout === "hero" %}
        {% include "index/hero.njk" %}
    {% elseif item.acf_fc_layout === "products" %}
        {% include "index/products.njk" %}
    {% elif item.acf_fc_layout === "benefits" %}
        {% include "index/benefits.njk" %}
    {% elif item.acf_fc_layout === "process" %}
        {% include "index/process.njk" %}
    {% elif item.acf_fc_layout === "partners" %}
        {% include "index/partners.njk" %}
    {% elif item.acf_fc_layout === "about" %}
        {% include "index/about.njk" %}
    {% elif item.acf_fc_layout === "contact" %}
        {% include "index/contact.njk" %}
    {% endif %}
    
{% endeach %}

It only load the Hero section.

[gasatrya]

I have to separate each file with ifAsync, using elif the include won't load the file.

index.njk

{% asyncEach item in home.acf.home_builders %}
    {# {{ item | dump }} #}
    {% include "index/hero.njk" %}
    {% include "index/products.njk" %}
{% endeach %}

hero.njk

{% ifAsync item.acf_fc_layout === "hero" %}

    <div id="hero" style="--bg-hero: url('{% imgURL item.background_image, 571, "webp" %}')" class="bg-[image:var(--bg-hero)] bg-no-repeat bg-cover md:bg-contain bg-right-bottom mb-52 md:mb-28 h-[316px] md:h-auto">
        <div class="md:flex md:items-center md:justify-between max-w-6xl mx-auto">
            <div id="hero-text" class="md:basis-2/5 hidden md:block">
                <h1 class="text-gradient mb-6">{{ item.title }}</h1>
                <p class="text-2xl mb-6">{{ item.description }}</p>
                <a class="btn md:animate-bounce-once" href="#contact">Level Up Today</a>
            </div>
            <div id="hero-image" class="md:basis-3/5">
                {% set alt = ( item.image.alt if item.image.alt else 'Wallet Codes' ) %}
                {% image item.image.url, alt, [800, 375], ['webp'], 'eager', '', '(min-width: 30em) 100vw, 50vw' %}
            </div>
        </div>
    </div>

    <div class="block md:hidden text-center px-5 mb-28">
        <h1 class="text-gradient mb-6">{{ item.title }}</h1>
        <p class="text-2xl mb-6">{{ item.description }}</p>
        <a class="btn" href="#contact">Level Up Today</a>
    </div>

{% endif %}

products.njk

{% ifAsync item.acf_fc_layout === "products" %}
    <div id="products" class="relative md:mb-40 lg:px-0 px-5 scroll-m-[130px]">
        <div class="flex flex-col md:flex-row justify-between gap-x-10 max-w-6xl mx-auto relative z-10">
            <div class="md:basis-2/5 mb-5 md:mb-0">
                <div >
                    <h2 class="text-gradient mb-6">{{ item.title }}</h2>
                    <p class="text-lg mb-6">{{ item.description }}</p>
                </div>
            </div>
            <div class="md:basis-3/5 show more products">
                {% set alt = ( item.image.alt if item.image.alt else 'Wallet Codes' ) %}
                {% image item.image_desktop.url, alt, [1024], 'webp', 'lazy', 'hidden md:block' %}
                {% image item.image_mobile.url, alt, [500], 'webp', 'lazy', 'block md:hidden' %}
                <span id="transparent" class="md:hidden absolute h-[400px] w-full bottom-0 left-0 bg-gradient-to-b from-transparent via-[#FAFAFA] to-[#FAFAFA] flex items-center justify-center">
                    <a id="open-products" class="text-accent-blue font-bold text-sm" href="#">show more products</a>
                </span>
            </div>
        </div>
        <span class="hidden md:block blur-[150px] opacity-80 bg-[#DD001D] absolute right-0 bottom-32 w-[330px] h-[171px] rounded-full z-0"></span>
        <span class="hidden md:block blur-[100px] opacity-80 bg-[#96d3f2] absolute right-0 bottom-[-60px] w-[499px] h-[258px] rounded-full z-0"></span>
    </div>
{% endif %}

[gasatrya]

If you are wondering about home.acf.home_builders, here's the code

const axios = require('axios')
const URL = process.env.WP_URL
require('dotenv').config()

module.exports = async () => {
  let data

  await axios
    .get(`${URL}/wp-json/wp/v2/pages?_fields=id,acf.home_builders&acf_format=standard`, {
      params: {
        slug: 'home',
      },
    })
    .then(res => {
      data = res.data[0]
    })
    .catch(err => {
      console.log(err)
    })

  return data
}

[pdehaan]

Yeah, this is tricky to debug without me trying to build from scratch and set up a WordPress blog to export from.
Maybe I can find some random mock API that I can fetch from a global data file and run some if statements on…

The axios code above looks reasonable, but will possibly return an array (if .then() or null/undefined (if .catch()).

I don't think I've seen/used ifAsync before. Kind of surprised you couldn't use a vanilla if statement if you're already within an asyncEach loop.

[pdehaan]

include actually accepts any arbitrary expression, so you can pass anything into it, as long as the expression evaluates to a string or a compiled Template object: {% include name + ".html" %}.
— via https://mozilla.github.io/nunjucks/templating.html#include

Re:

    {% ifAsync item.acf_fc_layout === "hero" %}
        {% include "index/hero.njk" %}
    {% elseif item.acf_fc_layout === "products" %}
        {% include "index/products.njk" %}
    {% elif item.acf_fc_layout === "benefits" %}
        {% include "index/benefits.njk" %}
    {% elif item.acf_fc_layout === "process" %}
        {% include "index/process.njk" %}
    {% elif item.acf_fc_layout === "partners" %}
        {% include "index/partners.njk" %}
    {% elif item.acf_fc_layout === "about" %}
        {% include "index/about.njk" %}
    {% elif item.acf_fc_layout === "contact" %}
        {% include "index/contact.njk" %}
    {% endif %}

I wonder if you could do {% include "index/" + item.acf_fc_layout + ".njk" ignore missing %} (assuming item.acf_fc_layout is a string and not some promise).

[pdehaan]

I'm not seeing the same behavior locally with my presumably similar config:

.eleventy.js

/**
 * @typedef {import('@11ty/eleventy/src/UserConfig')} EleventyConfig
 * @typedef {ReturnType<import('@11ty/eleventy/src/defaultConfig')>} EleventyReturnValue
 * @type {(eleventyConfig: EleventyConfig) => EleventyReturnValue}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addNunjucksAsyncShortcode("productImage", async (src="", alt="") => {
    return Promise.resolve(`<img src="${src}" alt="${alt}" loading="lazy" />`);
  });

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

src/index.njk

---
title: Index
layout: layout.njk
---

<h1>{{ title }}</h1>

src/_includes/layout.njk

<main>
  {{ content | safe }}
</main>

<aside>{%- include "sidebar.njk" -%}

<footer>
  <p>Powered by {{ eleventy.generator }}</p>
</footer>

src/_includes/sidebar.njk

{% asyncEach p in products %}
  <article>
    <!-- {{ p | dump(2) | safe }} -->
    <h2>{{ p.title }}</h2>
    <p>layout={{ p.acf_fc_layout }}</p>
    {% productImage p.src, p.alt %}

    <section data-note="dynamic include">
      {% include p.acf_fc_layout + ".njk" ignore missing %}
    </section>

    <section data-note="if..elif">
      {% if p.acf_fc_layout == "hero" -%}
        {%- include "hero.njk" -%}
      {% elif p.acf_fc_layout == "products" -%}
        {%- include "products.njk" -%}
      {% else -%}
        <!-- unknown partial: "{{ p.acf_fc_layout }}" -->
      {% endif -%}
    </section>
  </article>
{% endeach %}

src/_data/products.js

module.exports = async () => {
  return Promise.resolve([
    {
      title: "pRoDuCtS PaGe",
      acf_fc_layout: "products",
      src: "/images/products.png",
      alt: "pRoDuCtS",
    },
    {
      title: "HeRo PaGe",
      acf_fc_layout: "hero",
      src: "/images/hero.png",
      alt: "HeRo",
    },
    {
      title: "BeNeFiTs PaGe",
      acf_fc_layout: "benefits",
      src: "/images/benefits.png",
      alt: "BeNeFiTs",
    },
  ]);
};

OUTPUT

<main>
  <h1>Index</h1>
</main>

<aside>
  <article>
    <!-- {
      "title": "pRoDuCtS PaGe",
      "acf_fc_layout": "products",
      "src": "/images/products.png",
      "alt": "pRoDuCtS"
    } -->
    <h2>pRoDuCtS PaGe</h2>
    <p>layout=products</p>
    <img src="/images/products.png" alt="pRoDuCtS" loading="lazy" />

    <section data-note="dynamic include">
      <p>pRoDuCtS iNcLuDe</p>
    </section>

    <section data-note="if..elif">
      <p>pRoDuCtS iNcLuDe</p>
    </section>
  </article>

  <article>
    <!-- {
      "title": "HeRo PaGe",
      "acf_fc_layout": "hero",
      "src": "/images/hero.png",
      "alt": "HeRo"
    } -->
    <h2>HeRo PaGe</h2>
    <p>layout=hero</p>
    <img src="/images/hero.png" alt="HeRo" loading="lazy" />

    <section data-note="dynamic include">
      <p>HeRo iNcLuDe</p>
    </section>

    <section data-note="if..elif">
      <p>HeRo iNcLuDe</p>
    </section>
  </article>

  <article>
    <!-- {
      "title": "BeNeFiTs PaGe",
      "acf_fc_layout": "benefits",
      "src": "/images/benefits.png",
      "alt": "BeNeFiTs"
    } -->
    <h2>BeNeFiTs PaGe</h2>
    <p>layout=benefits</p>
    <img src="/images/benefits.png" alt="BeNeFiTs" loading="lazy" />

    <section data-note="dynamic include"></section>

    <section data-note="if..elif">
      <!-- unknown partial: "benefits" -->
    </section>
  </article>
  <footer>
    <p>Powered by Eleventy v1.0.2</p>
  </footer>
</aside>

So using Eleventy v1.0.2, I'm seeing the expected behavior using async shortcodes, and dynamic data using promises, and dynamic includes (or explicit if..elif includes).

[gasatrya]

I switch axios over fetch and return promise, then use this code {% include p.acf_fc_layout + ".njk" ignore missing %} it works! Thank you.