can't use eleventy-img plugin in component

• no error when used outside component
• no error with hard-coded src and alt

Looks like the shortcode/plugin isn’t able t use the default values from the .toml file.

toml:

[component]
structures = []
label = "hero-base"
description = ""
icon = ""
tags = []

[props]
description = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias mollitia ducimus facere?"

[props.title]
small = "Mijn mooie"
big = "grote titel"

[props.afbeelding]
image = "/assets/img/index-hero.jpg"
alt ="mijn alt"

liquid:

<section class="hero-base">
  {% image afbeelding.image, afbeelding.alt, "hero-base__img", "100vw", "600, 900, 1200, 1400, 1800" %}
  <div x-ref="content" class="hero-base__content">
    {% bookshop "title"  bind: title %}
    <p class="hero-base__p">{{ description }}</p>
  </div>
</section> 

Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering liquid template ./component-library/components/hero/base/base.eleventy.liquid

`TemplateContentRenderError` was thrown
> ENOENT: no such file or directory, stat '.undefined', file:./component-library/components/hero/base/base.eleventy.liquid, line:2

`RenderError` was thrown
> ENOENT: no such file or directory, stat '.undefined'

`Error` was thrown:
    Error: ENOENT: no such file or directory, stat '.undefined'
        at Object.statSync (node:fs:1536:3)
        at Image.getInMemoryCacheKey (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy-img\img.js:139:32)
        at queueImage (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy-img\img.js:565:15)
        at Object.imageShortcode (C:\Users\silve\11ty\vda-bouwmaterialen\.eleventy.js:16:24)
        at Object.<anonymous> (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy\src\BenchmarkGroup.js:30:26)
        at Object.render (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\@11ty\eleventy\src\Engines\Liquid.js:147:25)
        at Object._callee$ (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:1851:55)
        at tryCatch (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:108:40)
        at Generator.invoke [as _invoke] (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:319:22)
        at Generator.prototype.<computed> [as next] (C:\Users\silve\11ty\vda-bouwmaterialen\node_modules\liquidjs\dist\liquid.common.js:156:21)
Copied 26 files / Wrote 0 files in 0.27 seconds (v0.12.1)
Watching…
�📚 New components — no connected client
[Browsersync] Reloading Browsers...

[bglw]

Hi @silveltman 👋

Wee update here. Plugins are still inaccessible from Bookshop components, but we do have a new feature where you can detect the environment from your template and render different content. You can see some docs on that here: Rendering Different Content When Live Editing

In this case, that would let you do something like the following:

{% if env_bookshop_live %}
  <img x-ref="img" src="{{ afbeelding.image }}" alt="{{ afbeelding.alt }}" class="hero-base__img">
{% else %}
  {% image afbeelding.image, afbeelding.alt, "hero-base__img", "100vw", "600, 900, 1200, 1400, 1800" %}
{% endif %}

You would still have a slight rendering difference between the component browser and the live site, but being aware of that might be enough.

Let me know your thoughts!

[bglw]

Hi @silveltman,

Apologies for the slow reply. You are correct that plugins are currently unsupported from within Bookshop components — the in-browser rendering doesn’t use Eleventy directly so doesn’t have access to any plugins you have defined there.

There is an undocumented way to add your own plugins to Bookshop’s live editing environment, but it would require writing a new JavaScript file that implemented the behavior you’re after. We sometimes use this for re-implementing a simple string transformation plugin.

In this case, I can’t see a way that eleventy-img could be made to work in the browser, but you could add a plugin that performs some fallback behavior to prevent an error when Bookshop is rendering the component.

Let me know if this is something you’re keen on and I’ll write up a quick documentation section on adding these plugins 😃