{{!< 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 --}} <main id="site-main" class="site-main"> <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}"> <header class="article-header gh-canvas"> {{#if primary_tag}} <section class="article-tag post-card-primary-tag"> <a href="{{primary_tag.url}}">{{primary_tag.name}}</a> </section> {{/if}} <h1 class="article-title">{{title}}</h1> {{#if custom_excerpt}} <p class="article-excerpt">{{custom_excerpt}}</p> {{/if}} <div class="article-byline"> <section class="article-byline-content"> <ul class="author-list"> {{#foreach authors}} <li class="author-list-item"> {{#if profile_image}} <a href="{{url}}" class="author-avatar"> <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" /> </a> {{else}} <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a> {{/if}} </li> {{/foreach}} </ul> <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> <span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span> </div> </div> </section> </div> {{#if feature_image}} <figure class="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}} </figure> {{/if}} </header> <section class="gh-content gh-canvas"> {{content}} </section> {{!-- <section class="article-comments gh-canvas"> If you want to embed comments, this is a good place to paste your code! </section> --}} </article> </main> {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}} {{#unless @member}}{{#if access}} <section class="footer-cta outer"> <div class="inner"> {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}} <a class="footer-cta-button" href="#/portal" data-portal> <div class="footer-cta-input">Enter your email</div> <span>Subscribe</span> </a> {{!-- ^ This looks like a form element, but it's just a link to Portal, making the form validation and submission much simpler. --}} </div> </section> {{/if}}{{/unless}} {{!-- Read more links, just above the footer --}} {{#if @custom.show_recent_posts}} {{!-- The {#get} helper below fetches some of the latest posts here so that people have something else to read when they finish this one. This query gets the latest 3 posts on the site, but adds a filter to exclude the post we're currently on from being included. --}} {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}} {{#if more_posts}} <aside class="read-more-wrap outer"> <div class="read-more inner"> {{#foreach more_posts}} {{> "post-card"}} {{/foreach}} </div> </aside> {{/if}} {{/get}} {{/if}} {{/post}}