post.hbs

{{!< default}}

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

<header class="site-header">
    {{> site-header}}
</header>

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

<main id="site-main" class="site-main outer">
    <div class="container-fluid" id="post">
        <div class="page-header border-bottom" id="the-box">
            <h1>{{title}}</h1>
            {{#if custom_excerpt}}
            <p class="font-italic">{{custom_excerpt}}</p>
            {{/if}}
        </div>

        {{#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) 1170px,
                        2000px"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
                class="img-fluid"
            />
        </figure>
        {{/if}}

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

        {{!-- Email subscribe form at the bottom of the page --}}
        {{#if @labs.members}}
            {{> subscribe-form}}
        {{/if}}

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

    </div>
</main>

{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer border-top">
    <div class="container">
        <div class="row">
            {{#if primary_tag}}
            {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
                {{#if related_posts}}
                <div class="card col-md-4 mt-2 mb-2  d-flex align-items-stretch">
                    <div class="card-body">
                    <h5 class="card-title">
                        {{#../primary_tag}}
                        More in <a href="{{url}}">{{name}}</a>
                        {{/../primary_tag}}
                    </h5>
                    <ul class="list-group list-group-flush">
                    {{#foreach related_posts}}
                        <li class="list-group-item">
                            <a href="{{url}}">{{title}}</a>
                        </li>
                    {{/foreach}}
                        <li class="list-group-item">
                            <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}}
                                →</a>
                        </li>
                    </ul>
                    </div>
                </div>
                {{/if}}
            {{/get}}
            {{/if}}

            {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
            {{#next_post}}
                {{> "post-footer"}}
            {{/next_post}}

            {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
            {{#prev_post}}
                {{> "post-footer"}}
            {{/prev_post}}
        </div>
    </div>
</aside>

{{/post}}