post.hbs

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

{{#post}}
{{!-- Everything inside the #post tags pulls data from the post --}}

<main id="main">

    <section class="post">

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

        {{#if feature_image}}
        <figure class="image main">
            <img src="{{img_url feature_image}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" />
            {{#if feature_image_caption}}
                <figcaption>{{feature_image_caption}}</figcaption>
            {{/if}}
        </figure>
        {{/if}}

        <div class="content">
            {{content}}
        </div>

        {{!-- Email subscribe form at the bottom of the page --}}
        {{#if @labs.subscribers}}
        <section class="subscribe-form">
            <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
            <p>Get the latest posts delivered right to your inbox</p>
            {{subscribe_form placeholder="youremail@example.com"}}
        </section>
        {{/if}}

        <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>

</main>

{{/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>