tag.hbs

   1 {{!< default}}
   2 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
   3
   4
   5 <section class="outer">
   6     <div class="inner posts">
   7         <div class="post-feed">
   8
   9             {{#tag}}
  10             <header class="post-card post-card-large">
  11                 {{#if feature_image}}
  12                 <div class="post-card-image-link">
  13                     {{!-- This is a responsive image, it loads different sizes depending on device
  14                     https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
  15                     <img class="post-card-image"
  16                         srcset="{{img_url feature_image size="s"}} 300w,
  17                                 {{img_url feature_image size="m"}} 600w,
  18                                 {{img_url feature_image size="l"}} 1000w,
  19                                 {{img_url feature_image size="xl"}} 2000w"
  20                         sizes="(max-width: 1000px) 400px, 800px"
  21                         src="{{img_url feature_image size="m"}}"
  22                         alt="{{title}}"
  23                         loading="lazy"
  24                     />
  25                 </div>
  26                 {{/if}}
  27                 <div class="post-card-content">
  28                     <div class="post-card-content-link">
  29                         <header class="post-card-header">
  30                             <div class="post-card-primary-tag">Tagged</div>
  31                             <h2 class="post-card-title">{{name}}</h2>
  32                         </header>
  33                         <section class="post-card-excerpt">
  34                             <p>
  35                                 {{#if description}}
  36                                 {{description}}
  37                                 {{else}}
  38                                 A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
  39                                 {{/if}}
  40                             </p>
  41                         </section>
  42                     </div>
  43                 </div>{{!--/.post-card-content--}}
  44
  45             </header>
  46             {{/tag}}
  47
  48             {{#foreach posts}}
  49
  50                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
  51                 {{> "post-card"}}
  52
  53             {{/foreach}}
  54
  55         </div>
  56     </div>
  57 </section>