Bug when using {{tags}} helper

Developer help
1

I’ve forked the latest Casper theme and made a very small change to show all tags on each post in the main list of posts, and I’ve discovered a bug in the Handelbars helper for tags. When I render this block of html without the {{tags}} helper, it works just fine:

<a class="post-card-content-link" href="{{url}}">
  <header class="post-card-header">
    <h2 class="post-card-title">{{title}}</h2>
  </header>
  <section class="post-card-excerpt">
    {{#if feature_image}}
    <p>{{excerpt words="30"}}</p>
    {{else}}
    <p>{{excerpt words="44"}}</p>
    {{/if}}
  </section>
</a>

And the HTML that it outputs looks like this:

<div class="post-card-content">
   <a class="post-card-content-link" href="/2021-02-things-are-looking-up/">
      <header class="post-card-header">
         <h2 class="post-card-title">Things Are Looking Up</h2>
      </header>
      <section class="post-card-excerpt">
         <p>Excerpt of the blog post</p>
      </section>
   </a>
</div>

BUT as soon as I add the tags helper like this:

<a class="post-card-content-link" href="{{url}}">
  {{tags}}
  <header class="post-card-header">
    <h2 class="post-card-title">{{title}}</h2>
  </header>
  <section class="post-card-excerpt">
    {{#if feature_image}}
    <p>{{excerpt words="30"}}</p>
    {{else}}
    <p>{{excerpt words="44"}}</p>
    {{/if}}
  </section>
</a>

The output of the HTML is suddenly all corrupted:

<div class="post-card-content">
  <a class="post-card-content-link" href="/2021-02-things-are-looking-up/">

  </a>
  <header class="post-card-header">
    <a class="post-card-content-link" href="/2021-02-things-are-looking-up/">

    </a>
    <a href="/tag/medical-school/">Medical School</a>,
    <a href="/tag/skylar/">Skylar</a>
    <h2 class="post-card-title">Things Are Looking Up</h2>
  </header>
  <section class="post-card-excerpt">
    <p>Excerpt of the blog post</p>
  </section>
</div>

This also happens when using the {{foreach tags}} helper. Has anyone else seen this problem? I’m assuming this is actually a bug in the tags helper implementation, but is there something obvious in my handlebars code that would be causing this issue?

Ghost version: Ghost Version: 3.41.3
Casper version: 3.1.2

2

As pointed out on the issue you raised here: Inclusion of {{tags}} helper corrupts handlebar output · Issue #12606 · TryGhost/Ghost · GitHub this is due to you injecting <a> tags inside an <a> tag and making invalid HTML.

Either you need to call {{tags}} outside of the <a> tag or you need to turn autolinking off by using {{tags autolink="false"}}

1 Like
3

@Hannah Ah thank you! I didn’t realize Handlebars was smart enough to prevent invalid HTML from being created, but that makes total sense.