Comments (12)
nford
commented on May 29, 2024
This bug seems to go back at least to 0.2.0 based on my testing.
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
Looks to me, in src/_includes/layouts/base.njk the starting <body> tag is not having its closing bracket (> is missing). Adding that bracket seems to resolve the issue for me.
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -6,7 +6,7 @@ type: page
<head>
<title>{{ title }}</title>
</head>
[-<body-]{+<body>+}
<main>
{{ content | safe }}
</main>This plugin parse the HTML files generated by Eleventy to convert <img> tags to <picture> tags. I suspect when it doesn't find a valid <body> block, it ignores <head> and other tags.
In another note, in home.njk you are using <img class="" src={{ image }}/>. I would recommend using quote on all attributes in the Nunjucks. E.g.: <img class="" src="{{ image }}" />. In case, the image path have space in the file name, the generated HTML tag becomes invalid.
from eleventy-plugin-img2picture.
nford
commented on May 29, 2024
Thanks for your reply Saneef and for pointing out that error, I deleted the closing bracket by accident when setting up the test file, it led me to find the actual cause of the issue in my real project. Replace the body tag with this:
<body x-on:keydown.escape="isModalOpen=false">
That's alpine.js which worked without issue until I added your plugin.
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
I'll check whether the plugin messes with Alpine.js tags.
from eleventy-plugin-img2picture.
nford
commented on May 29, 2024
This looks like a great plugin, I'm super excited to use it as it will make life easier in a couple of different ways in this project compared to vanilla eleventy-img
I tried this syntax as well which also fails:
<body @keydown.escape="isModalOpen=false">
But interestingly this does work even though it's an invalid attribute name
<body escape="isModalOpen=false">
so it seems to be choking on the special characters
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
Looks like it is problem with plugin code. I'll push a fix in some time.
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
I have published a new version v2.0.2 with a fix to this problem. Could you give it a try?
from eleventy-plugin-img2picture.
nford
commented on May 29, 2024
Installing from git+https://github.com/saneef/eleventy-plugin-img2picture.git#v2.0.2 (version confirmed in node_modules) the issue remains. It gets weirder though, if I add and remove line feeds between html tags and reload sometimes I get only the title tag from base.njk, sometimes nothing.
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
I'll try to debug it again. Sorry that the last release didn't work.
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
I published another version v2.0.3. This should fix the problem.
from eleventy-plugin-img2picture.
nford
commented on May 29, 2024
That did it! Thank you, Saneef
from eleventy-plugin-img2picture.
saneef
commented on May 29, 2024
Glad it did the trick. Thanks for taking time to test the releases!
from eleventy-plugin-img2picture.
Related Issues (10)
- Applying Sharp placeholder HOT 2
- AVIF size? HOT 5
- Make moving classes to picture tag optional HOT 4
- caching generated images HOT 2
- Generated AVIF images are not displayed in Chrome Canary
- "no such file or directory" error when building HOT 7
- `sizes` attribute from `<img>` is not replicated on `<source>`
- `TemplateWriterWriteError` when trying to use the plugin HOT 16
- Does not work for output directories not named "_site" HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-plugin-img2picture.