partials/post-card.hbs

   1 {{!-- This is a partial file used to generate a post "card"
   2 which templates loop over to generate a list of posts. --}}
   3
   4 <article class="post-card {{post_class}} {{#is "home"}}{{#if feature_image}}{{#has index="0"}}post-card-large{{/has}}{{/if}}{{/is}}">
   5
   6     {{#if feature_image}}
   7     <a class="post-card-image-link" href="{{url}}">
   8         {{!-- This is a responsive image, it loads different sizes depending on device
   9         https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
  10         <img class="post-card-image"
  11             srcset="{{img_url feature_image size="s"}} 300w,
  12                     {{img_url feature_image size="m"}} 600w,
  13                     {{img_url feature_image size="l"}} 1000w,
  14                     {{img_url feature_image size="xl"}} 2000w"
  15             sizes="(max-width: 1000px) 400px, 800px"
  16             src="{{img_url feature_image size="m"}}"
  17             alt="{{title}}"
  18             loading="lazy"
  19         />
  20     </a>
  21     {{/if}}
  22
  23     <div class="post-card-content">
  24
  25         <a class="post-card-content-link" href="{{url}}">
  26             <header class="post-card-header">
  27                 {{#if primary_tag}}
  28                     {{#primary_tag}}
  29                     <div class="post-card-primary-tag">{{name}}</div>
  30                     {{/primary_tag}}
  31                 {{/if}}
  32                 <h2 class="post-card-title">{{title}}</h2>
  33             </header>
  34             <section class="post-card-excerpt">
  35                 <p>{{excerpt}}</p>
  36             </section>
  37         </a>
  38
  39         <footer class="post-card-meta">
  40             <ul class="author-list">
  41                 {{#foreach authors}}
  42                 <li class="author-list-item">
  43                     {{#if profile_image}}
  44                     <a href="{{url}}" class="static-avatar">
  45                         <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
  46                     </a>
  47                     {{else}}
  48                     <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
  49                     {{/if}}
  50                 </li>
  51                 {{/foreach}}
  52             </ul>
  53             <div class="post-card-byline-content">
  54                 <span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
  55                 <span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
  56             </div>
  57         </footer>
  58
  59     </div>{{!--/.post-card-content--}}
  60
  61 </article>