post.hbs

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{#post}}
{{#if feature_image}}
<section class="featured">
    <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
</section>
<section class="featured-content container">
{{^}}
<section class="no-featured container">
{{/if}}

    <header class="main">
        <span class="date">{{date format="MMMM D, YYYY"}}</span>
        <h1>{{title}}</h1>
        {{#if custom_excerpt}}
            <p>{{custom_excerpt}}</p>
        {{/if}}
    </header>

    <article>
        {{content}}
    </article>

    <footer class="post-footer">

        <div class="authors">
            {{#foreach authors}}
            <a class="author-box" href="{{url}}">
                {{#if profile_image}}
                <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
                {{/if}}
                <section class="author-box-content">
                    <div class="author-box-label">Author</div>
                    <h5 class="author-box-name">{{name}}</h5>
                    {{#if bio}}
                    <p>{{bio}}</p>
                    {{else}}
                    <p>Read more posts by this author.</p>
                    {{/if}}
                </section>
            </a>
            {{/foreach}}
        </div>

    </footer>

    {{!--
    <section class="post-full-comments">
        If you want to embed comments, this is a good place to do it!
    </section>
    --}}

</section>
{{/post}}

<script>
    var images = document.querySelectorAll('.kg-gallery-image img');
    images.forEach(function (image) {
        var container = image.closest('.kg-gallery-image');
        var width = image.attributes.width.value;
        var height = image.attributes.height.value;
        var ratio = width / height;
        container.style.flex = ratio + ' 1 0%';
    })
</script>