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="D MMMM YYYY"}} {{tags separator=" , " prefix=" ; tagged in: "}}</span>
  11         <h1>{{title}}</h1>
  12
  13         {{#if custom_excerpt}}
  14             <p class="content">{{custom_excerpt}}</p>
  15         {{/if}}
  16     </header>
  17
  18     {{#if feature_image}}
  19     <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
  20     {{/if}}
  21
  22     <div class="content">
  23         {{content}}
  24     </div>
  25
  26     {{!-- Email subscribe form at the bottom of the page --}}
  27     {{#if @labs.subscribers}}
  28     <section class="subscribe-form">
  29         <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
  30         <p>Get the latest posts delivered right to your inbox</p>
  31         {{subscribe_form placeholder="youremail@example.com"}}
  32     </section>
  33     {{/if}}
  34
  35     <footer class="post-footer">
  36
  37         <div class="authors">
  38             {{#foreach authors}}
  39             <a class="author-box" href="{{url}}">
  40                 {{#if profile_image}}
  41                 <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  42                 {{/if}}
  43                 <section class="author-box-content">
  44                     <div class="author-box-label">Author</div>
  45                     <h5 class="author-box-name">{{name}}</h5>
  46                     {{#if bio}}
  47                     <p>{{bio}}</p>
  48                     {{else}}
  49                     <p>Read more posts by this author.</p>
  50                     {{/if}}
  51                 </section>
  52             </a>
  53             {{/foreach}}
  54         </div>
  55
  56     </footer>
  57
  58     <section class="post-full-comments">
  59         {{!-- If you want to embed comments, this is a good place to do it! --}}
  60         <div id="disqus_thread"></div>
  61         <script>
  62
  63             /**
  64             *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
  65             *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
  66
  67             var disqus_config = function () {
  68             this.page.url = '{{url absolute="true"}}';     // PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
  69             this.page.identifier = 'ghost-{{comment_id}}'; // PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
  70             };
  71
  72             (function() { // DON'T EDIT BELOW THIS LINE
  73             var d = document, s = d.createElement('script');
  74             s.src = 'https://worknjae.disqus.com/embed.js';
  75             s.setAttribute('data-timestamp', +new Date());
  76             (d.head || d.body).appendChild(s);
  77             })();
  78         </script>
  79         <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  80     </section>
  81
  82 </section>
  83 {{/post}}
  84
  85 <script>
  86     var images = document.querySelectorAll('.kg-gallery-image img');
  87     images.forEach(function (image) {
  88         var container = image.closest('.kg-gallery-image');
  89         var width = image.attributes.width.value;
  90         var height = image.attributes.height.value;
  91         var ratio = width / height;
  92         container.style.flex = ratio + ' 1 0%';
  93     })
  94 </script>