post.hbs

   1 {{!< default}}
   2 {{!-- The tag above means: insert everything in this file
   3 into the {body} of the default.hbs template --}}
   4
   5 {{#post}}
   6 {{!-- Everything inside the #post tags pulls data from the post --}}
   7
   8 <main id="main">
   9
  10     <section class="post">
  11
  12         <header class="major">
  13             <span class="date">{{date format="MMMM D, YYYY"}}</span>
  14             <h1>{{title}}</h1>
  15             {{#if custom_excerpt}}
  16                 <p class="content">{{custom_excerpt}}</p>
  17             {{/if}}
  18         </header>
  19
  20         {{#if feature_image}}
  21         <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
  22         {{/if}}
  23
  24         <div class="content">
  25             {{content}}
  26         </div>
  27
  28         {{!-- Email subscribe form at the bottom of the page --}}
  29         {{#if @labs.subscribers}}
  30         <section class="subscribe-form">
  31             <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
  32             <p>Get the latest posts delivered right to your inbox</p>
  33             {{subscribe_form placeholder="youremail@example.com"}}
  34         </section>
  35         {{/if}}
  36
  37         <footer class="post-footer">
  38
  39             <div class="authors">
  40                 {{#foreach authors}}
  41                 <a class="author-box" href="{{url}}">
  42                     {{#if profile_image}}
  43                     <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  44                     {{/if}}
  45                     <section class="author-box-content">
  46                         <div class="author-box-label">Author</div>
  47                         <h5 class="author-box-name">{{name}}</h5>
  48                         {{#if bio}}
  49                         <p>{{bio}}</p>
  50                         {{else}}
  51                         <p>Read more posts by this author.</p>
  52                         {{/if}}
  53                     </section>
  54                 </a>
  55                 {{/foreach}}
  56             </div>
  57
  58         </footer>
  59
  60         {{!--
  61         <section class="post-full-comments">
  62             If you want to embed comments, this is a good place to do it!
  63         </section>
  64         --}}
  65     </section>
  66
  67 </main>
  68
  69 {{/post}}
  70
  71 <script>
  72     var images = document.querySelectorAll('.kg-gallery-image img');
  73     images.forEach(function (image) {
  74         var container = image.closest('.kg-gallery-image');
  75         var width = image.attributes.width.value;
  76         var height = image.attributes.height.value;
  77         var ratio = width / height;
  78         container.style.flex = ratio + ' 1 0%';
  79     })
  80 </script>