post.hbs

<main class="post-page">
  <article class="container post-container">
    <div class="row">
      <div class="col-12">
  {{#if post.metadata.header_image_url}}
      <div class="post-image">
          <img src="{{{post.metadata.header_image_url}}}" alt="">
      </div>
  {{/if}}
        <h1 class="post-title">{{post.title}}</h1>
        <div class="badge-cloud">
          {{# if post.series}}
          <a href="{{post.series_url}}">
            <div class="series-badge badge my-4">Series: {{post.series}}</div>
          </a>
          {{/if}}
          {{#each post.tags}}
            <a href="{{this.url}}"><div class="tags-badge badge my-4">{{this.key}}</div></a>
          {{/each}}          
        </div>
        <div class="post-author__container d-flex justify-content-between mt-4 mb-5">
          <div class="post-author">{{post.reading_time}}</div>
          <time class="post-date" datetime="{{post.published_at}}">
            {{post.published_at_str}}
          </time>
        </div>
        <div class="post-content my-3">
          {{{post.content}}}
        </div>
      </div>
    </article>
    {{#if post.more_like_this}}
    <div class="posts-widget__container col-12">
      <h2 class="posts-widge__title">More stories you may also like</h2>
      <div class="posts-widget">
        {{#each post.more_like_this}}
        <div class="card">
          <a href="{{this.url}}"><img src="{{this.metadata.header_image_url}}" class="card-img-top" alt="..."></a>
          <div class="card-body">
            <a href="{{this.url}}">
              <p class="card-text">{{this.title}}</p>
            </a>
            <time class="post-date" datetime="{{this.published_at}}">
              {{this.published_at_str}}
            </time>
          </div>
        </div>
        {{/each}}
      </div>
    </div>
    {{/if}}
    <div class="comments-widget__container col-12" id="comments-container">
      {{#if post.comments}}
        <h2>Comments ({{post.comments.length}})</h2>
      {{/if}}
      {{#each post.comments}}
        {{> comment this index=@index }}
      {{/each}}

      {{#if post.allow_comments}}
        {{> comment-form}}
      {{else}}
        <h2>Comments are now closed</h2>
      {{/if}}
    </div>
  </div>
  
</main>

<script>
$(function() {
  $('.post-content').find('img').each(function() {
    var href = $(this).attr('src');
    $(this).replaceWith($('<a data-fancybox="gallery" href="' + href + '"><img src="' + href + '"></a>'));
  });
});
</script>