Eleventy Link image asset turns whole page into a link

Hi all,

I’ve made my Eleventy website’s links have image icons and for some reason, when I add the third and last image asset it turns the entire page into a link.


(Apologies, I’m a new poster so I cant copy the whole code in.)

Adding the img src to the last link there turns the whole page into a link: it doesn’t seem to matter if I swap the links.

Thanks in advance!

can you check in the DOM inspector to see if it’s parsed the way you want? you have some errors in the HTML syntax. the indentation is not clear in the source code, so it’ll be easier to see the hierarchy from the DOM inspector too.

Thanks for your fast response! I’m not super sure if this answers your question but here’s a screenshot of where the “/work” href shows up, especially in and around the area where the unwanted link shows up.


I couldn’t tell you if I think it’s supposed to look like that but it does end up looking very different to how I would expect it to look.

I didn’t catch this before but I can’t figure out what this error is pointing out either!

wow, that’s quite different from the source code

looks like after parsing:

  • there’s not even a <header> element, instead there’s <main>
  • something starts an <a href="/work"> link toward the beginning, compared to the source where it’s the last link
  • something linking to /posts/newpost/ which didn’t even appear :face_with_raised_eyebrow:

come to think of it, this seems like it’s coming from another part of your code, outside of the header.

see that red underlined < character in the line with the error? look over at the matching >. actually there isn’t one.

bad luck on the error message though, it looks like when the editor can’t find the matching >, it instead thinks you meant to type a literal “<” less than sign.

Okay so the /newpost was a test blog post I made to see if it would work - it did so I deleted it, and I’ve had a look through the code and it’s definitely not there still. Is it possible there’s something happening on the backend thru eleventy that I can’t see?

Reckon I should just kill this and start again? Or is there somewhere else I should look? I’m not too fussed honestly - most of it is just reuploading assets. It’s likely, with my fiddling around with it earlier, that I’ve messed something up somewhere.

eleventy should remove the generated pages if you remove the source that it generates them from. I hope it’s not a bug with that :grimacing:

maybe before you start over, try searching for newpost in the ctrl+shift+f project-wide search

hi again!

I did as you said and did a project-wide search for “newpost” and nothing came up, so I started again from scratch.

I have made minimal changes: fonts, colours, text positioning and link name changes.

But again the same issue - where I add an image asset to the last link turns the whole page into a link - has occurred. Here’s a new image from right-click and inspecting the problem area.

Can you expand the <header class="header"> too? It looks like an <a href="/blog"> from inside there never gets closed with a </a>

No problem, here it is

were you able to fix those unclosed <img tags from earlier? it looks like there’s still some parsing weirdness going on with those images.