{{!-- This is a partial file used to generate a post "card" which templates loop over to generate a list of posts. --}} <article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}} post-access-{{visibility}}"> {{#if feature_image}} <a class="post-card-image-link" href="{{url}}"> {{!-- This is a responsive image, it loads different sizes depending on device https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}} <img class="post-card-image" srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="xl"}} 2000w" sizes="(max-width: 1000px) 400px, 800px" src="{{img_url feature_image size="m"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" loading="lazy" /> {{^has visibility="public"}} <div class="post-card-access"> {{> "icons/lock"}} Members-only </div> {{/has}} </a> {{/if}} <div class="post-card-content"> <a class="post-card-content-link" href="{{url}}"> <header class="post-card-header"> <div class="post-card-tags"> {{#primary_tag}} <span class="post-card-primary-tag">{{name}}</span> {{/primary_tag}} {{#if featured}} <span class="post-card-featured">{{> "icons/fire"}} Featured</span> {{/if}} </div> <h2 class="post-card-title"> {{^has visibility="public"}} {{#unless feature_image}} {{> "icons/lock"}} {{/unless}} {{/has}} {{title}} </h2> </header> {{#if excerpt}} <div class="post-card-excerpt">{{excerpt}}</div> {{/if}} </a> <footer class="post-card-meta"> <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> {{#if reading_time}} <span class="sep">—</span> <span class="post-card-meta-length">{{reading_time}}</span> {{/if}} </footer> </div> </article>