page.hbs

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

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

<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

    <header class="post-full-header">
        <h1 class="post-full-title">{{title}}</h1>
    </header>

    {{#if feature_image}}
        <figure class="post-full-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 800px) 400px,
                        (max-width: 1170px) 700px,
                        1400px"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure> 
    {{/if}}

    <section class="post-full-content">
        <div class="post-content">
            {{content}}
        </div>
    </section>

    <section class="post-full-comments">
        {{> "post-comments"}}
    </section>

</article>

{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
    var $postContent = $(".post-full-content");
    $postContent.fitVids();
});
</script>
{{/contentFor}}