Media query shortcode ?

[LebCit]

Hello,
I want to change the class of a div depending on the width and if it has an image, I've tried the following but it's not working.
eleventyConfig.addShortcode("myShortcode", () => window.matchMedia('(min-width: 1024px)')); in .eleventy.js
Then in .njk template:
{% if featuredImage and myShortcode %} ... doesn't work
{% if featuredImage %} ... works but I have to handle the media query part from a style sheet.

What am I doing wrong ?

[Ryuno-Ki]

Since Eleventy is basically a glorified Node.js script, there is no window global object.

What do you mean by „doesn't work”? Can you share the error message?

[LebCit]

There is no error it just doesn't work.

{% if featuredImage and myShortcode %}
class="bio"
{% else %}
class="no-bio"
{% endif %}

It's always returning the no-bio class whatever the window width is.

[Ryuno-Ki]

I guess, because window.matchMedia throws an error.
You will need to include that as client-side JavaScript.
If you don't want to add too much logic, check out Alpine.js.
Adding this to the relevant pages would allow you to add the logic to the templates.

[LebCit]

Thank you very much, I'll include it via JS, I thought it was possible like I was doing it.

[Ryuno-Ki]

The thing is, you're producing HTML. HTML does not know about the client it gets sent to.
So you can only run this kind of logic once you hit the client.