page.hbs

   1 {{!< default}}
   2
   3 {{!-- The tag above means: insert everything in this file
   4 into the {body} tag of the default.hbs template --}}
   5
   6
   7 {{#post}}
   8 {{!-- Everything inside the #post block pulls data from the page --}}
   9
  10 <article class="article {{post_class}}">
  11
  12     <header class="article-header gh-canvas">
  13         {{#if feature_image}}
  14         <figure class="article-image">
  15             {{!-- This is a responsive image, it loads different sizes depending on device
  16             https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
  17             <img
  18                 srcset="{{img_url feature_image size="s"}} 300w,
  19                         {{img_url feature_image size="m"}} 600w,
  20                         {{img_url feature_image size="l"}} 1000w,
  21                         {{img_url feature_image size="xl"}} 2000w"
  22                 sizes="(min-width: 1400px) 1400px, 92vw"
  23                 src="{{img_url feature_image size="xl"}}"
  24                 alt="{{title}}"
  25             />
  26         </figure>
  27         {{/if}}
  28     </header>
  29
  30     <section class="gh-content gh-canvas">
  31
  32         <h1 class="article-title">{{title}}</h1>
  33
  34         {{content}}
  35
  36     </section>
  37
  38 </article>
  39
  40 {{/post}}