{% image %} is not working

[haroldao]

It's me again 😅...

For {% image %}

When I want to run my local server I have this error :

So at the end the server stopped:

To temporary avoid this issue on my local server, I have to comment all {% image ......%}, then the local server will work and my images will be rendered but I'll still have the same error between each saving after I uncommented the images.

Btw... I also have this error on Netlify which make all my images are not visible.

[haroldao]

Here's the output of {{ document.data.footer_logo | json }}

{"dimensions":{"width":1331,"height":313},"alt":"Trafik Plus logo","copyright":null,"url":"https://trafik-plus.cdn.prismic.io/trafik-plus/ddccb391-ec65-4d4c-87da-53bb964808f2_Trafik_Plus_Logo_2.svg"}

[haroldao]

Something weird I saw was that the code base in the repo is different from mine.
The plugin uses the latest version tho.....

[lihbr]

Hey there, thank you so much for reporting an issue again!

I don't really see what's going wrong here 🤔

• Can you try to provide a minimal reproduction of the issue so I can try troubleshooting it from there?
• Are you experiencing the issue with other shortcodes?

Looking at the screenshots, my hunch goes toward a failure because document.data.footer_logo is not always your "layout" document in Prismic. Could you perhaps try with {% image prismic.layout.en-us.data.footer_logo %} (or with {% image prismic.layout.en-us[0].data.footer_logo %} if an array)

[haroldao]

• everytime I use {% image XXXXXX %}, I have this issue. If I have{% image XXXXXX %} while the server is running, the image is shown but I have the error message in the terminal. If I decide to turn down the local server and decide the run it again, It will crash and I'll not be able to run everything (my temporary solution is to comment all {% image XXXXXX %} before running the local server and uncomment everything when the local server is on)

• Not for now. I only used asText, asHTML, (image)

Ohhh sorry I forgot to share the beginning of my file :

(that's why I use 'document'😅)

Btw... your 2 other solutions are not working :/

[haroldao]

Here's my JSON when I do {{ prismic.layout | json }}

https://jsoneditoronline.org/#left=cloud.50fe064f243c4fa19cc960eea7ea04d1 (make sure to click 'Copy >')

[haroldao]

One more thing 😅 I don't know why all data from Prismic are not rendered in the 404 page :/

[lihbr]

OK, yeah, that looks weird to me! I'll need a minimal reproduction to troubleshoot forward/understand the issue better.

Can you:

• Bootstrap a new 11ty project with Prismic ;
• Replicate the scenario leading to the above issue (you can use your existing Prismic repository for the data, don't worry);
• Share this minimal project here (you can upload zip here, if so do it without the node_modules folder);
• Explain how with that minimal project how you're experiencing an issue.

Without a reproduction or access to a project, it's extremely hard to guess what is/could go wrong and provide adequate support :/

Thanks for your collaboration!

[lihbr]

Closing this as it became stale, feel free to reopen it if you want to continue investigating the issue!

[haroldao]

OK, yeah, that looks weird to me! I'll need a minimal reproduction to troubleshoot forward/understand the issue better.

Can you:

• Bootstrap a new 11ty project with Prismic ;
• Replicate the scenario leading to the above issue (you can use your existing Prismic repository for the data, don't worry);
• Share this minimal project here (you can upload zip here, if so do it without the node_modules folder);
• Explain how with that minimal project how you're experiencing an issue.

Without a reproduction or access to a project, it's extremely hard to guess what is/could go wrong and provide adequate support :/

Thanks for your collaboration!
eleventy-base-blog.zip

Here's a ZIP folder. I used the starter from Eleventy (called Base Blog). And I replicate the issue with the image (still not working too) :) + I tried your code for the language switcher and same thing (with link/endlink)

[haroldao]

I only added new lines of code in .eleventy.js and in base.njk

[haroldao]

Here's the error outputted in the terminal for the "link/endlink"

[haroldao]

Here's the error outputted in the terminal for the shorcode "image"

[lihbr]

Hey there, OK:

Link not working

It looks like you're using version 0.2.0 so the doc for the link component that applies to you is available here: https://github.com/prismicio-community/eleventy-plugin-prismic/blob/5d3910fc06d3aafd7ef8db7b939bff98bb96d469/DOCUMENTATION.md#link-paired-shortcode

But long story short, you can make it work by providing the page to the shortcode:

<ul>
	{% for alternateDocument in document.alternate_languages %}
	<li>
		{% link page, alternateDocument %}
		{{ alternateDocument.lang }}
		{% endlink %}
	</li>
	{% endfor %}
</ul>

In version 1.0.0 (beta), providing the page is not needed anymore so the previous version is meant to work with it.

Image not working

This one is a bit trickier; because you're using the shortcode on a layout it basically tries to run it for every page. However, it appears some of your pages doesn't have a footer_logo image available, you can fix it this way by checking for its availability:

{% if document.data.footer_logo %}
	{% image document.data.footer_logo %}
{% endif %}

Although I assume you'd like the footer logo to be available globally, in such case you can access your layout directly this way:

{% image prismic.layout.en[0].data.footer_logo %}

(you can declare layout a singleton in your plugin config, if it's one, to avoid having the [0] accessor)

Let me know 💐

[haroldao]

I was using version 0.2.1 and the image was working after your comment but not the link issue. I updated to the latest release (v1 Beta 5) and now everything work fine !🍾🤩🚀