post.hbs

{{!< default}}

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


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

    <div class="df-post {{post_class}}">
        <div class="df-post__inner gh-canvas">
            <div class="article-header ">

                <div class="df-post__tags">
                    {{#primary_tag}}
                        <span class="post-card-primary-tag">
                    <a href="{{url}}">{{name}}</a>
                </span>
                    {{/primary_tag}}
                </div>

                <h1 class="article-title">{{title}}</h1>

                {{#if custom_excerpt}}
                    <p class="article-excerpt">{{custom_excerpt}}</p>
                {{/if}}

                <div class="df-post__meta">
                    <section class="article-byline-content">
                        <div class="article-byline-meta">
                            <h4 class="author-name">{{authors}}</h4>
                            <div class="byline-meta-content">
                                <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
                                {{#if reading_time}}
                                    <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
                                {{/if}}
                            </div>
                        </div>

                    </section>
                </div>

                {{#if feature_image}}
                    <div class="df-post__article-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="(min-width: 1400px) 1400px, 92vw"
                                src="{{img_url feature_image size="xl"}}"
                                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                        />
                        {{#if feature_image_caption}}
                            <figcaption>{{feature_image_caption}}</figcaption>
                        {{/if}}
                    </div>
                {{/if}}

            </div>

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


{{/post}}