Nested a/link elements inside an include not rendering correctly in jekyll liquid

Help
1

I tried writing all this out here, but because I’m a new user I’m limited and it seems to think my code is URLs for some reason (And you’re limited to 2 urls and 1 image as a new user).

Here is the question on StackOverflow all nicely formatted: https://stackoverflow.com/questions/57731571/nested-a-link-elements-inside-an-include-not-rendering-correctly-in-liquid-for-j

I’m wondering if this is a bug with jekyll, liquid, or if I’m just going about it incorrectly.

My structure is essentially this:
I have an index page that is looping through my posts and rendering a subset of their content (the post image and some content). Each truncated post on the index page is a link to the full post, ie the image and text are the content of the link itself. The post has an include that is rendering the post image along with a caption. This caption can potentially contain a link. If it does contain a link, it renders crazy html. If it doesn’t, things are fine.

Is this the right way to go about things? Is there another better way? Is this a bug?

Thanks for the help!

2

What you have looks fine and should work… but without seeing the HTML it’s producing it’s hard to tell what’s going on from your screenshots.

What format are your posts in? Markdown? One thing to be mindful of when using Markdown mixed with HTML is indents matter. It will often take your HTML and treat them like code blocks or quotes because of the indent and mangles things. I’ve had this bite me a few times and had to remove any indents from the HTML inside of the include which isn’t that great.

The other thing I noticed is what you’re doing in the {% include %} added to each post, could easily be refactored using front matter instead. I would build the logic to do the image header directly into your post _layout instead of adding an include to every post.

To make this work you’d only need to make a few modifications… instead of include.variable it would be page.variable (you might need to scope the image variables to be more specific since page.url is already reserved for the actual page).

For example something like this you could add to your post _layout.

{% if page.image %}
<figure>
  <img src="{{ page.image.url }}" alt="{{ page.image.description }}">
  <figcaption>Photo by <a href="{{ page.image.authorurl }}">{{ page.image.author }}</a></figcaption>
</figure>
{% endif %}

And then move all your variables you fed the include to the post’s front matter… which is arguably a better place for this sort of thing.

image:
  url: "/images/unsplash-author.jpg"
  author: "Marco Mons"
  authorurl: "https://unsplash.com/@author"
3

I went with includes because I was using this same concept not just for headers but for images all throughout the post. In the case of having more than one image in the post, putting it in frontmatter doesn’t really scale.

Here’s what the output looks like:

Bad HTML
DevTools_-_127_0_0_1_4000_.png1858×642 164 KB

If I don’t have a link inside the include figcaption, it renders just fine with no weirdness.

To be clear, this only affects rendering on the main index page where I’m looping through things. On the single/post page, it’s fine.

4

Ah ok. Well I don’t think it’s a Jekyll issue. Looks more like it’s your HTML.

<div class="posts">
  {% for post in site.posts %}
    <article class="post">
        <a href="{{ site.baseurl }}{{ post.url }}">
            <h1>{{ post.title }}</h1>
            <div class="entry">
                <p>{{ post.content | markdownify | truncatewords:75 }}</p>
            </div>
        </a>
    </article>
  {% endfor %}
</div>

You’re nesting an anchor element inside of another anchor. It’s not obvious above, but inside of your post.content is the post where you’re adding the include with another anchor element. This explains why it works when you don’t use that anchor for the author.

The screenshot you posted above is likely what your browser’s dev tools is adjusting for and not the actual HTML… it’s a self corrected version of the DOM. I’m willing to bet if you view source instead it will be different and you’ll see an <a> wrapped around the post content, with another <a> inside of the figure element from the include.

What you want to do instead is something like

<article>
  <h1><a href="">post title</a></h1>
  {{ post.content }}
</article>

I’m assuming you wrapped the entire post in an anchor to make it all clickable, but that’s going to bite you as any links inside of that will be invalid. You can instead do some cool stuff with pseudo elements on the post anchor and CSS. This post should give you some ideas.

5

There we go, that makes total sense. I didn’t think of a link wrapping a link as being a bad thing.

Thanks for the direction!