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